2012/10/21 電気・情報関係学会北海道支部連合大会

1. 2012/10/21
電気・情報関係学会北海道支部連合大会
単機能 Twitter クライアント
試作のための各種方法の検討
北海道情報大学 情報メディア学部
情報メディア学科 准教授
新井山 亮

2. はじめに
• Twitter クライアント・アプリケーション
の試作
– 投稿文字数制限付き短文投稿 Web サービス
– 目標・・・簡易な単機能クライアントの作成
• 単機能クライアント作成のための各手法
（例）
– “Google App Engine” （ Google が提供）
– “App Inventor”
（ Android OS 搭載情報端末向け開発環境）
• 試作アプリケーションの評価・考察 2

3. 単機能 Twitter クライアントの試
作
「＼はむほー！／」 Tweet に特化・・・
• Twitter 利用者
– #lovefighters (hashtag)
「北海道日本ハムファ
イターズのファン」
• 勝利の瞬間・・・
– 「＼はむほー！／」
と Tweet する 「慣習
」
• 単機能クライアント
– ＼はむほー！／ Tweet
に特化したものを試作
3

4. Google App Engine
(Official Web Site)
• Web アプリケーショ
ン・ホスティング・
サービス （参考文献 [2] ）
• Twitter クライアント
の作成例 （参考文献 [3] ）
• Python, Java, Go 言語
が使用可能
– 上述の作成例に従い，
今回は Python を使用
4

5. Google App Engine
(Python Programming Language - Official Web Site)
• Web アプリケーショ
ン開発環境の整備
– “Python” の導入
– “Google App Engine SDK
for Python” の導入
• Launcher の利用
– 開発環境での動作確認
– 実行環境への展開
(deploy)
5

6. Google App Engine Launcher
(for Windows)
• Web アプリケーショ
ン開発環境の整備
– “Python” の導入
– “Google App Engine SDK
for Python” の導入
• Launcher の利用
– 開発環境での動作確認
– 実行環境への展開
(deploy)
6

7. 開発環境下での実行結果
サンプル“ Guestbook”
• “Google App Engine
SDK for Python” の導入
• 同梱のサンプルを実
行
– フォルダ “ Guestbook”
• “File” >
“Add Existing Application”
から登録
– “Browse” button
• 開発環境の適切な動
作を確認
7

8. 単機能 Twitter クライアントの
試作
Twitter アプリケーションの登録 “ ham-
ho” • 登録情報を入力
– Application Name: ham-ho
– Description:
～ The はむほー！ Launcher
～
「はむ砲」
– Application Website:
ham-ho.appspot.com
– Application Type: Clent
– Callback URL:
ham-ho.appspot.com
– Default Access type:
Read & Write
8

9. 単機能 Twitter クライアントの
試作
アプリケーション名 “ ham-ho”
• フォルダ “ ham-ho”
– oauth.pyc (complied)
• 入手可能なライブラリ
• Twitter 認証 関連処理
• Source code: oauth.py
– simple_cookie.pyc
(complied)
• 入手可能なライブラリ
• Twitter 認証 Cookie 関
連
• Source code:
simple_cookie.py
9

10. 単機能 Twitter クライアントの
試作
アプリケーション名 “ ham-ho”
• フォルダ “ ham-ho”
– main.py (Script)
• Twitter 認証＆解除
• Tweet 書込＆削除
• タイムライン表示 etc.
• 詳細説明は割愛・・・
– 参考文献 [3] ・・・
– home.html (Template)
• メイン画面 (Timeline)
– login.html (Template)
• ログイン画面
10

11. 単機能 Twitter クライアントの
試作
アプリケーション名 “ ham-ho”
• フォルダ “ ham-ho”
– app.yaml
• GAE Web アプリ 設定
application: ham-ho
version: 1
runtime: python
api_version: 1
handlers:
- url: .*
script: main.py
– index.yaml
• app.yaml をもとに GAE
開発環境が自動生成
11

12. 単機能 Twitter クライアントの
試作
Google App Engine Launcher “ham-ho”
• 登録と動作確認
– フォルダ “ ham-ho”
• “File” >
“Add Existing Application”
から登録
– “Browse” button
• localhost:8080 から 確
認
• 実行環境展開
(deploy)
– http://ham-ho.appspot.com/
• Google アカウント必須
12

13. 単機能 Twitter クライアントの
試作
～ The はむほー！ Launcher ～ 「はむ砲」
・・・ ＼サヨナラほ－！／
＼はむほ－！／
etc.
ハッシュタグ有
無
発射！
(Tweet)
13

14. MIT App Inventor
("Learn" page)
• Android OS 搭載情報
端末向けアプリケー
ション開発環境（参考文
献 [4][5] ）
– Web ブラウザ上で画
面をデザイン
– Java アプリケーション
上で処理に見立てたブ
ロックによりイベント
を組み立て，アプリケ
ーションを作成
14

15. MIT App Inventor
("Learn" page)
• Twitter クライアント
の
作成例（参考文献 [6] ）
• 必要な環境 (Win. XP)
– Java 7
– Android SDK Tools
• 動作確認方法
– 端末エミュレータ（遅
い）
– 生成した apk パッケー
ジを接続した実端末で
展開し，実行 etc. 15

16. 単機能 Twitter クライアントの
試作
App Inventor Designer (via Web Browser)
16

17. 単機能 Twitter クライアントの
試作
App Inventor Designer (via Web Browser)
Button4
17

18. 単機能 Twitter クライアントの
試作
App Inventor Block Editor (Java)
18

19. 単機能 Twitter クライアントの
試作
App Inventor Block Editor (Java)
19

20. 単機能 Twitter クライアントの
試作
App Inventor Block Editor (Java)
20

21. 単機能 Twitter クライアントの
試作
App Inventor Block Editor (Java)
21

22. 単機能 Twitter クライアントの
試作
(MIT App Inventor) Android Phone （ Ready to
Android Phone （ Before Auth. ） Tweet ）
ハッシュタグ有
無
＼はむほ－！／ ＼サヨナラほ－！／
etc.
発射！
(Tweet)
22

23. 評価・考察
• 単機能 Twitter クライアントの試作
• 開発環境
– Google App Engine / Python
– MIT App Inventor
• Twitter クライアント作成技法の表層を体
験
– 開発環境に関する新知見（ GAE / App
Inventor ）
– オンライン上の豊富なドキュメントの存在
– プログラミング実習のための教材としての展 23

24. まとめ
• 単機能 Twitter クライアントの試作
• Twitter 利用者 (hashtag: #lovefighters )
– 「北海道日本ハムファイターズのファン」を
意識
• 開発環境
– Google App Engine / Python
• http://ham-ho.appspot.com/
– MIT App Inventor
• apk パッケージ生成 ⇒ Android 端末実機で動作確
認 24