このページの本文へ

前へ 1 2 次へ

PCを使わずに、自分でアプリを作ってみよう 第2回

公式クライアントではできない機能をもったアプリを作るには

「PineVentor」でVineのクライアントを作ってみる

2015年11月30日 19時00分更新

文● 梶川敬文

  • この記事をはてなブックマークに追加
  • 本文印刷

 Vineというサービスをご存知でしょうか。6秒ほどのショート動画を配信するサービスですが、短いということが逆に幸いして、モバイルアクセスと相性よく、高校生がツイッターにジョーク動画を貼ったり、売り出し中のアイドルの宣伝動画を貼るのによく使われているようです。

 このVineのクライアントをPineVentorで作ってみましょう。Vineの公式Androidクライアントというのはもちろん存在するのですが、ログインしなくても使えるとか、公式クライアントにはない持ち味をもったクライアントを作成しようというのが今回の目的です。

PineVentor
価格無料 作者picpie
バージョン1.09 ファイル容量962KB
対応デバイスAndroid端末 対応OS2.2以上

Vineの公式Androidクライアントの検索画面

 なお、PineVentorはAndroid OS内蔵のブラウザ部品(WebView)や絵文字を使っています。機種によってバージョンや画面の大きさが異なるので、多少の見栄えの違いがあります。

Vineアプリ

 作成するアプリは以下のとおりです。

 サンプルにも同じものがあります。一番上に検索単語の入力欄があり、[Search]ポタンで検索を開始します。Vineサイトから検索結果がいくつか返ってきたら、まず先頭を表示します。その他は検索結果選択から表示したいものを選びます。

使用するコンポーネント

コンポーネントタイプ名前説明
SystemcSysシステムコンポーネント(デフォルト)
InputcInputA検索単語入力
ButtoncButtonA検索ボタン
BoxcBoxA動画情報表示
BoxcBoxB動画検索数表示
HttpcHttpAAPIアクセス
VideocVideoAビデオ表示と結果保存
SelectcSelectA検索結果選択

コンポーネントの配置

 コンポーネント表にしたがって、コンポーネントを設置していきます。Httpコンポーネント以外はすべてHTMLパーツなので、[create]をクリックして表示されるコンポーネントタイプ一覧の上の方にあります。

 cVideoAは、Width、Heightとも画面いっぱいの値(320くらい)を指定します。機種によって画面の大きさが違うので見ながら調節してください。cInputAのWidthは200くらいがいいでしょう。

 今回のアプリの処理は次のとおりです。ユーザーが何か入力してボタンを押す→それをVineに問い合わせる→Vineから結果が返ってくる→検索結果を保存し、先頭のビデオを再生→ユーザーが結果選択タグから何か選ぶ→選択されたビデオを再生し、情報を表示。

 設定するメソッドは以下の通りです。

コンポーネントイベントメソッド
cButtonAユーザーがボタンを押すcButtonA.onClick(te)
 cHttpAをcInputAの値を引数にしてVineへアクセスさせる
cHttpAVineから情報が返ってくるcHttpA.onSuccess(val)
 アクセス結果を元に次のデータを保存する
 cVideoA, cSelectAを初期化
 cVideoA内の配列にビデオの説明とURLを保存する
 cSelectAにビデオ選択用の文字列を設定する
cSelectAユーザーが結果選択タグから何か選択したcSelectA.onChange()
 選択された番号にしたがってビデオと説明をセットし再生する

前へ 1 2 次へ

カテゴリートップへ

この連載の記事

注目ニュース

ASCII倶楽部

最新記事

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン