Mobile Computing (3) Paint Pot

第3章 Paint Pot

(Chapter 2. PaintPot)

PaintPotはネコの顔に赤青緑の線を引いたり点をうったりでき、書いたものを消したり、点を打つ大きさを変えたり、背景の写真をカメラで撮ったりできるアプリです。

画面のデザイン、Campas部品の使い方が学べます。

**
**

簡略な手順

http://ai2.appinventor.mit.edu/ を開いて、gmailで登録してください。

デザイン

これがDesignerの画面です。左側のPaletteから、HorizontalArrangement持って来て、

上に3個ボタンを持って来てレイアウトの中にセット!

左側のPaletteから、Drawing and AnimationからCanvasを1個持って来て、置いたCanvasをクリックしてPropertiesから大きさを変更しましょう。今回は横幅をFill parentに、縦幅を300ピクセルに設定しました。Propertiesからボタンの色やテキストも変更できます。ついでにボタンごとの呼び名もわかりやすいように変えておくといいと思います。Componentsから対象のボタンを選択して、下のRenameから変更できます。

次にCanvasのBackgroundImageを選択します。

LayoutからHorizontalArrangementを1個持って来て、

左からボタンを持って来てレイアウトの中に4個置きます。こんな感じに並べましょう

最後にMediaからCameraを持って来てDesignerでの作業は終了になります。**
**

プログラミング

次はいよいよBlocksでの作業になります。右上のBlocksと書いてあるボタンを押してBlocks編集画面へ移動します。まずはなぞった部分に線を引いていく処理を作ります。左側のCanvasからwhen canvas1 .Draggedというブロックを持ってきます。その中に同じくCanvasから持ってきたcall Canvas1 .DrawLineをセットします。次に始点と終点の座標は下の図のようにセットしてください。これだけで画面に線が引けるようになりました!

次はボタンを押たときに線や点の色を変更できるようにします。対象のボタンのとこからwhenなんとか .ClickBlockを持って来て、Canvasから色をセットするブロックを、色は左のColorsから持ってきましょう。

また、似たような処理はCtrl+C Ctrl+Vでコピペすることが出来ます。

次にタッチしたところに点を打てるようにします。…って言ってもやることはさっきとほとんど一緒です。こんな感じ。点の大きさはMathのとこから数字を持って来て、とりあえず5をセットしました。**
**

最後にカメラを使えるようにしましょう。といってもMIT AI2ではカメラ画面をそのまま使えるわけではなく、端末のカメラアプリを起動して、戻り値としてカメラの画像を受け取ることになります。Cameraからcall Camera1.TakePictureを持って来て、カメラで写真をとったらCanvasの背景に設定するようにします。

これでPaintPotは完成です!

完成したプログラム

改造

  1. ペンの太さの変更(大丸、小丸)
  2. 現在の色、ペンの太さの表示
  3. ペンの太さの自由設定

Mobile Computing (1) About App Inventor

第1章 モバイルコンピューティング

Forward

Preface

ンピュータは、日常生活に様々な変化をもたらしました。

歴史的なコンピュータの利用形態の変遷は、以下とも言われる。

  • メインフレーム全盛期の集中処理

  • 分散システム(オープンシステム)の抬頭によるクライアント・サーバなどの分散処理

  • インターネットに代表されるネットワーク中心の、新しい集中処理

  • 世界に分散したユーザーがサーバを意識せずサービスを受ける、クラウドコンピューティングの処理形態

モバイルコンピューティングとは、移動中、あるいは外出先でコンピュータを利用すること。ノートパソコンや携帯情報端末の高性能化・高機能化や、携帯電話やPHSによるデータ通信の高速化に伴い、外出中でも家や職場と同様の環境を再現できるようになりつつある。携帯電話などによるデータ通信を併用する場合のみを指してモバイルコンピューティングと呼ぶ場合もある。

ICTのトレンドは、クラウド、IoT、AIへ変換しています。変わらないものは、コンピューターサイエンスであります。

スマートフォンは、様々なセンサーを装備、クラウドと繋がる能力が持つIoTデバイスと見なすことができます。

ユビキタス情報システム論は、特定のコンピューター言語にこだわらない、コンピューターサイエンスの基層知識を用いで、

みなさん手持ちのスマートフォンを教材に、センサー情報の収集、クラウドとの連携する技術を学び、

何時でも、どこでも利用できるユビキタス 情報システムの構築技法を学びます。

本コースの構成

(1-8基礎編)

(9-11ネットワーク編)

(12最終課題)

1.1 ガイダンス

1.2 環境構築 (Genymotion)

プログラミング知識ほぼ不要!?ドラッグ&ドロップで直感的にアプリが作れる「Thunkable」 | Techable(テッカブル)

商用フォークのプロジェクトThankableが日本語でも紹介されてます。

「Thunkable」はドラッグ&ドロップでスマホアプリを作れるサービスだ。”ボタン”や”テキストボックス”など必要な素材を選択するだけで、アプリができあがっていく仕様で、Googleフォームでアンケートなどを作る感覚に近い。

Source: プログラミング知識ほぼ不要!?ドラッグ&ドロップで直感的にアプリが作れる「Thunkable」 | Techable(テッカブル)

Photoblog

Project Title. Easy Photo Blog publisher

Elevator Pitch. This cloud app pickup a photo from device’s image gallay, save the photo on self hosted WordPress site as a media file,and create a post with the media file attachement.

Description.
The Easy Photo Blog publisher is a mobile app that make easy to publish a post with photo to self hosted WordPress site. To make a post, user could follow steps:

  1. Type the post title
  2. Pickup a photo from device’s image gallay.
  3. Press “Post to madia” button to save the photo on WordPress site as a media file
  4. Type the post main content
  5. Press “Post Blog” to create a post with the media file attachement.

the app is easy way to make a photo blog to own WordPress site.

The app’s social benefit comes from its ability to make a quick post, and improve later, give a motivation to help user more publish. Also this a good example to use WordPress REST API.

screen1

Download and Test. Because this is a app using WordPress REST API, the only way to fully test its functionality would require using the WordPress REST API powered Blog site. You can feel free to use my test site. To download the app, scan the QR code to the left with the MIT AI2 Companion app or some other Scanner or click on this download link.

apk-download

a screen shot show a post on WordPress REST API powered Blog site.

2015-12-10 07.51.15
Technical Description. As shown in this screenshot, the app exceeds the project’s minimum technical requirements. It contains 2 global variables, 4 list data, 2 procedures or functions, and 2 if/else structure.

blocks2

Appendix.

The WP REST API is a WordPress plugin that intends to be eventually integrated into WordPress’ core as another (big) step towards transforming WordPress from a blogging platform/CMS into a fully fledged application framework.

WP REST API provide OAuth 1.0a and Basic Auth algorithm. it is no way to use OAuth 1.0a on App Inventor, so I use Basic Auth on this app. Basic Auth use base64 encode and not way to do on App Inventor, so on this app, just use a global variable to store a text which already encoded auth text.

TinyWebDB API Tester HD

AppInventorはAndoridのApp作りに簡単な環境です。WordPressをWebコンテンツを作るに最適な環境。

WP-TinyWebDB-APIは、両者の長所を連携し、WordPressをAppInventorのTinyWebDBサービスとして利用するためのAPIを、WordPressのプラグインとして提供したもの。

TinyWebDB API Tester (HD版) は設置しているAPIをテストするためのものである。

https://play.google.com/store/apps/details?id=appinventor.ai_chen_waseda.TinyWebDB_API_HD

TINIWEBDB-API5.2-512x512

孤帆远影 HD

孤帆远影(安卓HD版)包含十万首网络诗词,便于您欣赏,收藏。

主要功能:
1. 显示十万首中任意一首
2. 朗读 (须安装中文TTS)

计划功能:
1. 评论
2. 投稿
3. 余韵
4. 聚友

https://play.google.com/store/apps/details?id=appinventor.ai_chen420.PoemDB2

Screenshot_2013-06-11-01-46-24

孤帆远影

孤帆远影(安卓版)是孤帆远影诗词网站(http://poemdb.org)的安卓客户端,便于您通过安卓手机欣赏,收藏。

主要功能:
1. 显示孤帆远影诗词网站单页内容
2. 朗读 (须安装中文TTS)
3. 收藏单页内容便于脱机显示
4. 跳转孤帆远影诗词网站对应网页

https://play.google.com/store/apps/details?id=appinventor.ai_chen420.PoemDB

360手机助手截图01

TANNKA

短歌は、日本で最も古い定型詩で、日本最古の歌集として有名な『万葉集』は8世紀に編集されたものです。
31音の言外に感じられるものを余情といい、短歌一首の内容は、この余情をも含めたものというべきである。

TANNKAはスマートフォンで短歌を鑑賞するためのアプリです。

基本機能:
1. 短歌WordPressサイトと連携、サイトの和歌を表示
2. 短歌と余情を Twitter へ投稿
3. 短歌読み上げ (N2 TTSなど読み上げツールが別途必要)
4. 短歌ローカル保存する(オフラインでも使える)

計画機能:
1. 短歌に余情、コメントの保存
2. コミュニティ形成

リリースできない状態が長引き、興味がある方から意見を頂くために、公開しました。

https://play.google.com/store/apps/details?id=appinventor.ai_chen420.Tannka

tanka-512

DigiLib

Screenshot_2013-06-11-00-12-34

DigiLib is Android Application, base on my research concept, the idea of Three information Layers.

1. Study (V-Bookshelves)
2. V-Desktop
3. V-Note

DigiLib implement with Google Books web service, you need google account to use this app.

Functions

1. List of bookshelves
2. Import book by scan ISBN code or search by keyword
3. List of desktop shelves (Favorite, To Read, Reading Now, Have Read)
4. Book preview and note
5. Set (or remove) book to any desktop shelf.

https://play.google.com/store/apps/details?id=appinventor.ai_chen420.DigiLib