Transcript ham-ho.appspot.com

2012/10/21
電気・情報関係学会北海道支部連合大会
単機能Twitter クライアント
試作のための各種方法の検討
北海道情報大学 情報メディア学部
情報メディア学科 准教授
新井山 亮
はじめに
• Twitterクライアント・アプリケーションの試作
– 投稿文字数制限付き短文投稿Webサービス
– 目標・・・簡易な単機能クライアントの作成
• 単機能クライアント作成のための各手法（例）
– “Google App Engine”（Googleが提供）
– “App Inventor”
（Android OS 搭載情報端末向け開発環境）
• 試作アプリケーションの評価・考察
2
単機能 Twitter クライアントの試作
「＼はむほー！／」 Tweet に特化・・・
• Twitter 利用者
– #lovefighters (hashtag)
「北海道日本ハムファイ
ターズのファン」
• 勝利の瞬間・・・
– 「＼はむほー！／」
と Tweet する 「慣習」
• 単機能クライアント
– ＼はむほー！／ Tweet
に特化したものを試作
3
Google App Engine
(Official Web Site)
• Web アプリケーション・
ホスティング・サービス
（参考文献[2]）
• Twitter クライアントの
作成例 （参考文献[3]）
• Python, Java, Go言語が
使用可能
– 上述の作成例に従い，
今回はPythonを使用
4
Google App Engine
(Python Programming Language - Official Web Site)
• Web アプリケーション
開発環境の整備
– “Python”の導入
– “Google App Engine SDK
for Python” の導入
• Launcher の利用
– 開発環境での動作確認
– 実行環境への展開
(deploy)
5
Google App Engine Launcher
(for Windows)
• Web アプリケーション
開発環境の整備
– “Python”の導入
– “Google App Engine SDK
for Python” の導入
• Launcher の利用
– 開発環境での動作確認
– 実行環境への展開
(deploy)
6
開発環境下での実行結果
サンプル“Guestbook”
• “Google App Engine
SDK for Python”の導入
• 同梱のサンプルを実行
– フォルダ “Guestbook”
• “File” >
“Add Existing Application”
から登録
– “Browse” button
• 開発環境の適切な動
作を確認
7
単機能 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
単機能 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
単機能 Twitter クライアントの試作
アプリケーション名 “ham-ho”
• フォルダ “ham-ho”
– main.py (Script)
•
•
•
•
Twitter 認証＆解除
Tweet 書込＆削除
タイムライン表示 etc.
詳細説明は割愛・・・
– 参考文献 [3] ・・・
– home.html (Template)
• メイン画面(Timeline)
– login.html (Template)
• ログイン画面
10
単機能 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
単機能 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
単機能 Twitter クライアントの試作
～The はむほー！ Launcher～ 「はむ砲」 ・・・
＼はむほ－！／ ＼サヨナラほ－！／ etc.
ハッシュタグ有無
発射！ (Tweet)
13
MIT App Inventor
("Learn" page)
• Android OS 搭載情報端
末向けアプリケーション
開発環境（参考文献[4][5]）
– Web ブラウザ上で画面
をデザイン
– Java アプリケーション上
で処理に見立てたブロッ
クによりイベントを組み
立て，アプリケーション
を作成
14
MIT App Inventor
("Learn" page)
• Twitter クライアントの
作成例（参考文献[6]）
• 必要な環境 (Win. XP)
– Java 7
– Android SDK Tools
• 動作確認方法
– 端末エミュレータ（遅い）
– 生成したapkパッケージ
を接続した実端末で展
開し，実行 etc.
15
単機能Twitter クライアントの試作
App Inventor Designer (via Web Browser)
16
単機能Twitter クライアントの試作
App Inventor Designer (via Web Browser)
Button4
17
単機能Twitter クライアントの試作
App Inventor Block Editor (Java)
18
単機能Twitter クライアントの試作
App Inventor Block Editor (Java)
19
単機能Twitter クライアントの試作
App Inventor Block Editor (Java)
20
単機能Twitter クライアントの試作
App Inventor Block Editor (Java)
21
単機能Twitter クライアントの試作
(MIT App Inventor)
Android Phone （Before Auth.）
Android Phone （Ready to Tweet ）
ハッシュタグ有無
＼はむほ－！／ ＼サヨナラほ－！／ etc.
発射！ (Tweet)
22
評価・考察
• 単機能 Twitter クライアントの試作
• 開発環境
– Google App Engine / Python
– MIT App Inventor
• Twitterクライアント作成技法の表層を体験
– 開発環境に関する新知見（ GAE / App Inventor）
– オンライン上の豊富なドキュメントの存在
– プログラミング実習のための教材としての展開
23
まとめ
• 単機能 Twitter クライアントの試作
• Twitter 利用者 (hashtag: #lovefighters )
– 「北海道日本ハムファイターズのファン」を意識
• 開発環境
– Google App Engine / Python
• http://ham-ho.appspot.com/
– MIT App Inventor
• apkパッケージ生成 ⇒ Android 端末実機で動作確認
24