JavaScript,チュートリアル,ユーティリティ

画像の文字を認識して文字列を作るアプリを作ります

このチュートリアルでは、JavaScriptを使って光学文字認識を行うアプリを作ります。JavaScriptライブラリの一つであるTesseract.jsを使うとブラウザで光学文字認識ができます。ここではウェブビューでJavaScriptでTesseract.jsを使って光学文字認識を行います。ただ、ウェブビューと受け渡しできるのは文字列だけで、画像を渡すのにBase64エンコード、デコードをして文字列化する必要があるので、そこは uk.co.metricrat.imagebase64v2.aix というエクステンションを使っています。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"SimpleOCR"と名前を付けます。

デザイン編集

Screen1のタイトルを"光学文字認識"にします。

ページの最後にあるダウンロードセクションからダウンロードした ocr.html をファイルをアップロードボタンをクリックしてアップロードします。

uk.co.metricrat.imagebase64v2.aixエクステンションを https://metricrat-hosting.web.app/files/uk.co.metricrat.imagebase64v2.aix からダウンロードし、エクステンションパレットにアップロード後、ビューアーに追加します。

ユーザーインターフェース パレットからラベル、画像、ラベル、テキストボックス、ウェブビューをこの順番でビューアーに追加します。名前はそれぞれラベル1、画像1、ラベル2、テキストボックス1、ウェブビュー1になります。次にメディア パレットから画像ピッカーを追加します。名前は画像ピッカー1になります。プロパティーは以下の通り設定します。

  • ラベル1: 太字フォント=チェック、フォントサイズ=20、テキスト=画像

  • 画像1: 画像に合わせて拡大縮小する=チェック

  • ラベル2: 太字フォント=チェック、フォントサイズ=20、テキスト=認識結果

  • テキストボックス1: 背景の色=グレー、横幅="親要素に合わせる"、テキストカラー=白、マルチライン=チェック

  • ウェブビュー1: 目に目える=チェックを外す

  • 画像ピッカー1: テキスト="画像選択"

下図のようになります。

ブロック編集機能を使用したプログラミング

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

JavaScript,チュートリアル,ユーティリティ

画像にフィルターをかけてレトロ、ホスタライズ、漫画風フィルターをかけて表示するアプリを作ります

このチュートリアルでは、写真などの画像にフィルターをかけて表示するアプリを作ります。App Inventoir 2 本来の機能には画像にフィルターをかける機能はありません。エクステンションの中にはこうした機能を持つものもありますが、ここではウェブビューでJavaScriptを使ってフィルターをかけます。ウェブビューでJavaScriptを使うのは、エクステンションを書くよりもはるかに簡単です。ただ、ウェブビューと受け渡しできるのは文字列だけで、画像を渡すのにBase64エンコード、デコードをして文字列化する必要があるので、そこは uk.co.metricrat.imagebase64v2.aix というエクステンションを使っています。

画像フィルターアプリでは単純なフィルターをかけるアプリでしたがここではChatGPTに教えてもらったもうちょっと複雑で面白いフィルターのレトロ、ホスタライズ、漫画風フィルターを採用しています。ほとんどの変更はJavaScript内だけです。

  • レトロ：「古いポスターのような、色あせたノスタルジックな雰囲気」を再現するフィルター

  • ホスタライズ：「色の段階を減らし、ポップアートやアニメのようなカラフルな仕上がり」にするフィルター

  • 漫画風：「写真を白黒の漫画やスケッチのように変換する」フィルター

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"ImageFilter2″と名前を付けます。

デザイン編集

Screen1のタイトルを"画像フィルター"にします。

ページの最後にあるダウンロードセクションからダウンロードした imagefilter2.html をファイルをアップロードボタンをクリックしてアップロードします。

uk.co.metricrat.imagebase64v2.aixエクステンションを https://metricrat-hosting.web.app/files/uk.co.metricrat.imagebase64v2.aix からダウンロードし、エクステンションパレットにアップロード後、ビューアーに追加します。

ユーザーインターフェース パレットからウェブビュー、画像をビューアーに追加します。名前はそれぞれウェブビュー1、画像1になります。次にメディア パレットから画像ピッカーを追加します。名前は画像ピッカー1になります。

  • ウェブビュー1: 目に目える=チェックを外す

  • 画像1: 横幅="親要素に合わせる"

  • 画像ピッカー1: 横幅="親要素に合わせる"、テキスト="画像選択"

レイアウト パレットから 水平配置コンポーネント をビューアーに追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。名前は水平配置1になります。水平配置1にユーザーインターフェース パレットからボタンを3個追加します。名前とテキストは次のようにします。

  • 水平配置1

    • 名前=レトロ、テキスト=レトロ

    • 名前=ポスタライズ、テキスト=ポスタライズ

    • 名前=漫画風、テキスト=漫画風

水平配置1の下にユーザーインターフェース パレットからボタンを1個追加し、名前とテキストを"オリジナル"にします。

下図のようになります。

ブロック編集機能を使用したプログラミング

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

JavaScript,チュートリアル,ユーティリティ

画像にフィルターをかけてグレースケール、セピア、ネガで表示するアプリを作ります

このチュートリアルでは、写真などの画像にフィルターをかけて表示するアプリを作ります。App Inventoir 2 本来の機能には画像にフィルターをかける機能はありません。エクステンションの中にはこうした機能を持つものもありますが、ここではウェブビューでJavaScriptを使ってフィルターをかけます。ウェブビューでJavaScriptを使うのは、エクステンションを書くよりもはるかに簡単です。ただ、ウェブビューと受け渡しできるのは文字列だけで、画像を渡すのにBase64エンコード、デコードをして文字列化する必要があるので、そこは uk.co.metricrat.imagebase64v2.aix というエクステンションを使っています。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"ImageFilter"と名前を付けます。

デザイン編集

Screen1のタイトルを"画像フィルター"にします。

ページの最後にあるダウンロードセクションからダウンロードした imagefilter.html をファイルをアップロードボタンをクリックしてアップロードします。

uk.co.metricrat.imagebase64v2.aixエクステンションを https://metricrat-hosting.web.app/files/uk.co.metricrat.imagebase64v2.aix からダウンロードし、エクステンションパレットにアップロード後、ビューアーに追加します。

ユーザーインターフェース パレットからウェブビュー、画像をビューアーに追加します。名前はそれぞれウェブビュー1、画像1になります。次にメディア パレットから画像ピッカーを追加します。名前は画像ピッカー1になります。

  • ウェブビュー1: 目に目える=チェックを外す

  • 画像1: 横幅="親要素に合わせる"

  • 画像ピッカー1: 横幅="親要素に合わせる"、テキスト="画像選択"

レイアウト パレットから 水平配置コンポーネント をビューアーに追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。名前は水平配置1になります。水平配置1にユーザーインターフェース パレットからボタンを3個追加します。名前とテキストは次のようにします。

  • 水平配置1

    • 名前=グレースケール、テキスト=グレースケール

    • 名前=セピア、テキスト=セピア

    • 名前=ネガ、テキスト=ネガ

水平配置1の下にユーザーインターフェース パレットからボタンを1個追加し、名前とテキストを"オリジナル"にします。

下図のようになります。

ブロック編集機能を使用したプログラミング

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

JavaScript,チュートリアル,ユーティリティ

関数計算のできる電卓アプリを作ります

このチュートリアルでは、関数計算のできる電卓アプリを作ります。使える関数は平方根、三角関数、対数関数、累乗、階乗です。普通に作ろうとするとすごく大変になるので、Google Gemini 2.0 Flash Thinking Experimentalに相談してJavaScriptで計算するように作りました。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Calculator"と名前を付けます。

デザイン編集

Screen1のタイトルを"関数電卓"にします。

ページの最後にあるダウンロードセクションからダウンロードしたcalculator.htmlをファイルをアップロードボタンをクリックしてアップロードします。

ユーザーインターフェース パレットからテキストボックス、ラベルとウェブビューを追加します。名前はそれぞれ計算式、結果、ウェブビュー1にします。

  • 計算式: 横幅="親要素に合わせる"、マルチラインプロパティー=チェック

  • 結果: 横幅="親要素に合わせる"

  • ウェブビュー1: 目に見える=チェックを外す

レイアウト パレットから 水平配置コンポーネント を8個ビューアーに追加し、横幅はすべて"親要素に合わせる"に設定します。名前は水平配置1から水平配置8になります。それぞれの水平配置にユーザーインターフェース パレットからボタンを４個ずつ追加します。すべてのボタンのフォントサイズは20、横幅は25%にします。名前とテキストは次のようにします。

  • 水平配置1

    • 名前=PI、テキスト=π

    • 名前=E、テキスト=e

    • 名前=左かっこ、テキスト=(

    • 名前=右かっこ、テキスト=)

  • 水平配置2

    • 名前=累乗、テキスト=^

    • 名前=階乗、テキスト=!

    • 名前=LOG、テキスト=log

    • 名前=LN、テキスト=ln

  • 水平配置3

    • 名前=SQRT、テキスト=√

    • 名前=SIN、テキスト=sin

    • 名前=COS、テキスト=cos

    • 名前=TAN、テキスト=tan

  • 水平配置4

    • 名前=AC、テキスト=AC

    • 名前=符号、テキスト=±

    • 名前=パーセント、テキスト=%

    • 名前=除、テキスト=÷

  • 水平配置5

    • 名前=n7、テキスト=7

    • 名前=n8、テキスト=8

    • 名前=n9、テキスト=9

    • 名前=乗、テキスト=乗

  • 水平配置6

    • 名前=n4、テキスト=4

    • 名前=n5、テキスト=5

    • 名前=n6、テキスト=6

    • 名前=減、テキスト=−

  • 水平配置7

    • 名前=n1、テキスト=1

    • 名前=n2、テキスト=2

    • 名前=n3、テキスト=3

    • 名前=加、テキスト=+

  • 水平配置8

    • 名前=n0、テキスト=0

    • 名前=小数点、テキスト=.

    • 名前=削除、テキスト=◀︎

    • 名前=イコール、テキスト==

下図のようになります。携帯電話サイズだとすべてのボタンが見えないのでタブレットサイズで表示しています。

ブロック編集機能を使用したプログラミング

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内