小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

・Androidスマホのアプリが簡単にできる「App Inventor」の使い方を紹介…

小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

・Androidスマホのアプリが簡単にできる「App Inventor」の使い方を紹介しています。 　App Inventor のすばらしさを一人でも多くに人に伝えたい！

ListViewで、写真付き間食カロリー確認アプリを作った

　App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。せめてサンプルあれば・・・ 　ということで、今日作ったアプリを紹介します。 　今回は、ListView（リストビュー）に写真を表示しました。 目次 アプリの動作 　作成したアプリはこんな感じです。これは、アプリを起動したときの画面。登録した間食とそのカロリーをリスト表示しています。 １

小学生が学んでいる「S…

    • App Inventorでやってみたけどうまくいかなかったこと（その１）WebViewer で、YouTubeを再生できないか？

      　こんなことできないかなあ・・と思いついて試したけれど、結局実現できなかったこと。考えることは楽しいという人には要らんおせっかいだけど、なんかの参考に公開します。いやいやできるよっという方があれば、コメントください。 WebViewer で、YouTubeを表示できないか？ 　下記の動画は、東京藝大卒の津軽三味線奏者の駒田早代さんのYouTube。ネット記事で彼女のことを知り、さっそく見てみた。話も楽しいのだけど、再生するたび毎回はいらないので、演奏部分のみを連続で見れな

      小学生が学んでいる「S…

      • コンポーネント：VideoPlayer＋FilePickerで、スマホの動画を再生する（ 応用編）

        　App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。せめてサンプルあれば・・・ 　ということで、簡単なサンプルを紹介します。 　今回は、メディアグループのVideoPlayer（動画プレイヤー）コンポーネントの利用例の応用編です。 アプリの動作 　作成したアプリはこんな感じです。プレイリストの一番上の動画を再生中です。 基礎編からの変更

        小学生が学んでいる「S…

        • コンポーネント：VideoPlayer＋FilePickerで、スマホの動画を再生する（ 基礎編）

          　App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。せめてサンプルあれば・・・ 　ということで、簡単なサンプルを紹介してみることにします。 　今回は、メディアグループのVideoPlayer（動画プレイヤー）コンポーネントの利用例を紹介します。 アプリの動作 　作成したアプリはこんな感じです。起動して、動画ファイルを選択し、「開始ボタン

          小学生が学んでいる「S…

        ListViewで、写真付き間食カロリー確認アプリを作った

        小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

        マガジン

        • コンポーネント・ブロックの使い方とサンプル
          4本
        • プログラミングのヒント
          3本
        • アプリのサンプル
          6本
        • その他 App Inventor 以外の記事
          2本
        • App Inventor の基本情報
          2本

        記事

          コンポーネント：player＋FilePickerで、スマホの音楽を再生する-- 応用編 --

          　App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。サンプルもない。例を挙げた連載記事を参考に自分でためしてやっと、どう使うかを理解した。 　ということで、簡単なサンプルを紹介していきます。 　今回は、メディアグループのPlayer（音楽プレイヤー）コンポーネントの利用例の応用編（ 基礎編はこちら ）。ここでの説明では基礎編の内容は省略して

          小学生が学んでいる「S…

          コンポーネント：player＋FilePickerで、スマホの音楽を再生する-- 応用編 --

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          コンポーネント：Player＋FilePickerで、スマホの音楽を再生する-- 基礎編 --

          　App Inventor を使い始めた時に、ちょっと苦労したのが情報の少なさ。MITホームページのドキュメントは、コンポーネントとブロックの機能は記述してあるが、どう使うかが書いてない。サンプルもない。例を挙げた連載記事を参考に自分でためしてやっと、どう使うかを理解した。 　ということで、簡単なサンプルを紹介してみることにします。 　今回は、メディアグループのPlayer（音楽プレイヤー）コンポーネントの利用例を紹介します。 アプリの動作 　作成したアプリはこんな感じ

          小学生が学んでいる「S…

          コンポーネント：Player＋FilePickerで、スマホの音楽を再生する-- 基礎編 --

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          WebViewer+p5.js で、ジェネラティブ・アート

          　数年前たまたま見たProcessing の花びらの流れるサンプルがとてもきれいで、「ブラウザーのページのソースを表示」からコピペして、当時はJavascriptも不慣れなまま、苦労してやっと表示にこぎつけた。ところがパソコンがお釈迦になってプログラムも行方不明に。最近、p5.js を知って画像の記憶を頼りに、せっかくならスマホそれもApp Inventor も絡ませて再現しようということで作ったのがこの画面。ジェネラティブ・アートというと幾何学模様が多いけれど、画像の表示も

          小学生が学んでいる「S…

          WebViewer+p5.js で、ジェネラティブ・アート

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          ラベル(Label)の文字をHTMLの修飾子で着色・サイズ変更などが可能

          　ラベル（Label）にHTML修飾子を適用すると、文字単位で色の変更、サイズの変更、高さ方向の位置を変えることができます。ここではその設定方法を説明します。 HTML修飾子で、文字の見た目を変更できる場所 　変更できる場所は、つぎの３か所あります。 １）ラベル（Label） ２）Notifier（通知） ３）画面右上の横３本線メニューから、About this application を選択後の表示 ４）時刻の文字列フォーマットで利用 １）ラベル（Label） 　ラ

          小学生が学んでいる「S…

          ラベル(Label)の文字をHTMLの修飾子で着色・サイズ変更などが可能

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          App Inventor2が nb196 にバージョンアップ

          App Inventor2が nb196 にバージョンアップ 情報が届きました。 さっそくその内容を確認しました。 目玉は、日本語対応ですね。これで利用者のすそ野が拡がることを期待しましょう。 個々の内容もさることながら、Kodular との連携が明確になったことは楽しみです。 バージョンアップの内容は、つぎのとおり。１点注意ですが、コンパニオン（スマホ用のアプリ）もバージョンアップしています。更新しないと新機能が利用できません。ライブテストでも同様です。まずは、コンパニオ

          小学生が学んでいる「S…

          App Inventor2が nb196 にバージョンアップ

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          App Inventor について思うこと

          App Inventor を始めたきっかけ App Inventor のプロジェクト一覧を見ると、最初のプロジェクト作成は、2017年12月19日となってます。早いもので、7年目に突入。 教育用と思われがちな、App Inventor ですが、何とか実用的なアプリができないかと日々奮闘しています。 下図は、私のスマホのメインページですが、20個のアプリの内黄色の枠で囲った9個は、App Inventor で開発し日常的に活用しています。一般のアプリでも機能は果たせるもの

          小学生が学んでいる「S…

          App Inventor について思うこと

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          コンポーネント：ユーザーインターフェース一覧

          サンプルアプリを作成しました ユーザーインタフェースの各コンポーネントがどんな動きをするのか確認するための簡単なサンプルを作成しました。 下記がその画面です。実際にどんな感じか自分の環境に取り込んで確認してみてください。 ・Button（ボタン）：処理開始を指示する時に使います ・CheckBox（チェックボックス）：いくつかの選択肢の中から選ぶ時使います ・Date Picker（デイトピッカー）：年月日を入力する時に使います ・image（画像）：画像を表示する時に

          小学生が学んでいる「S…

          コンポーネント：ユーザーインターフェース一覧

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          App Inventor について思うこと

          App Inventor を始めたきっかけ App Inventor のプロジェクト一覧を見ると、最初のプロジェクト作成は、2017年12月19日となってます。早いもので、7年目に突入。 教育用と思われがちな、App Inventor ですが、何とか実用的なアプリができないかと日々奮闘しています。 下図は、私のスマホのメインページですが、20個のアプリの内黄色の枠で囲った9個は、App Inventor で開発し日常的に活用しています。一般のアプリでも機能は果たせるもの

          小学生が学んでいる「S…

          App Inventor について思うこと

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          アプリにアイコンを設定する方法

          アイコンを設定しないと作ったアプリが全部同じアイコンに 　アイコンを設定しないと、こんな風に作ったアプリのアイコンが全部同じミツバチになってしまいます。分かりにくいですね。 アイコンを設定すると、どんなアプリか区別が断然つきやすくなります。 せっかくですから、分かりやすいアイコンにしたいですね。アイコンを設定すると分かりやすいアイコンに変更できます。 アプリのアイコンの設定手順 「Project Properties」（後述）をクリックして表示される画面をスクロー

          小学生が学んでいる「S…

          アプリにアイコンを設定する方法

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          Windowsの画面操作を録画し、noteで公開する方法（Canva利用）をためしてみる

          概要 App Inventor のプログラム編集の様子をnoteで公開するにあたり、Windows画面を録画してnoteで公開する方法を試してみました。 おおまかな手順 CanvaでWindows画面を録画する準備し、録画開始する App Inventor で、プログラムの編集を行う Canvaで、録画を停止し、動画をアップロードする （保存が必要なら、動画を保存する） 動画を公開し、リンク用の url を取得する noteで、リンクを公開する とりあえず、本

          小学生が学んでいる「S…

          Windowsの画面操作を録画し、noteで公開する方法（Canva利用）をためしてみる

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          Canvaで録画したWindowｓ画面の動画を共有

          とりあえず、録画し公開してみました。できは悪いですが、こんな感じになります 下記のリンクから確認してみてください https://www.canva.com/design/DAF5xSTx8mQ/RNPcEapABAK-NPblcAsk_w/watch 動画サンプル

          小学生が学んでいる「S…

          Canvaで録画したWindowｓ画面の動画を共有

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発

          サンプルのaiaファイルを取り込んで編集する方法

          上記から aia ファイルをパソコンにダウンロードし、App Inventor のエディターで読み込み利用できます。 上記をクリックし、aiaファイルをパソコンに保存します。 フォルダーはどこでも構いません。 2．App Inventor を起動し、Project ＞ Import project(.aia) from my computer… をクリックします。 ３．ファイルが読み込めましたので、これで編集可能です

          小学生が学んでいる「S…

          サンプルのaiaファイルを取り込んで編集する方法

          小学生が学んでいる「Scratch」風のApp Inventorで、スマホアプリを簡単開発