読者です 読者をやめる 読者になる 読者になる

いものやま。

雑多な知識の寄せ集め

アプリを紹介するウィジェットを作ってみた。

ブログのサイドバーで自作アプリの紹介に使っているウィジェット

f:id:yamaimo0625:20160117181118p:plain

これの作り方を紹介していなかったので、紹介。

ウィジェットビルダー

実はこれ、Appleの用意しているウィジェットビルダーというWebアプリで簡単に作ることが出来る。

Apple - iTunes - Widget Builder

ウィジェットの作成

アクセスすると、次のような画面が表示される。

f:id:yamaimo0625:20160117185545p:plain

なお、英語で表示される場合、左下の国旗マークをクリックして言語を選択するといい。

アプリを紹介するウィジェットを作る場合、リストから「App をチェック」を選択。

f:id:yamaimo0625:20160117185850p:plain

すると、次のような画面が表示される。

f:id:yamaimo0625:20160117185908p:plain

ここで、紹介したいアプリを検索して選択。
それと、ウィジェットのサイズなどを決める。

そうすると、次のようにプレビューが表示される。

f:id:yamaimo0625:20160117191047p:plain

これでOKなら「HTML コード出力」に出力されたHTMLをコピーしておく。

ウィジェットの表示

これでウィジェットの作成は出来たので、あとは表示させるだけ。
これは、表示させたいところにさっきコピーしたHTMLを貼り付ければいい。

はてなブログの場合、以下のような手順でサイドバーに表示させることが出来る:

  1. ダッシュボードから「デザイン」を選択。
  2. 「カスタマイズ」(スパナのアイコン)を選び、「サイドバー」を選択。
  3. 「+ モジュールを追加」からHTMLのモジュールを追加し、そこにさっきコピーしたHTMLを貼り付ける。
  4. 「変更を保存する」ボタンを押して、変更を保存。

簡単w

ちなみに、このブログのように1つのHTMLモジュールに複数ウィジェットを表示させることも、もちろん可能。

あるいは、本文に直接貼り付けてもいい。

↑ こんな感じで表示される。

今日はここまで!