iWidgetを作ってみよう

iPhone

ホーム画面をかっこ良く賑やかにできるiWidgetですが、自作できたら楽しいと思います。
ということで、久々の記事ですが、iWidgetの作成方法を書いてみます。

完成版の確認

以下の様な、黒色背景に白い文字でHelloWorldという文字を表示するウィジェットを作ってみたいと思います。
ファイル H28-09-05 8 22 09

Widget.htmlの作成

まず、/var/mobile/Library/iWidgets/の場所にHelloWorldというフォルダを作ります。
このフォルダの中にWidget.htmlというHTMLファイルを作り、テキストエディタで開いて中身を以下のように編集します。

<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;HelloWorldウィジェット&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;p&gt;HelloWorld&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

ファイル H28-09-05 6 42 16helloworldフォルダの中身

HTMLについて詳しく知りたい場合は検索してみましょう

Widget.htmlの編集(スタイルの設定)

次はスタイルを設定してみましょう。
Widget.htmlをテキストエディタで開いて中身を以下のように変更します。

<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;HelloWorldウィジェット&lt;/title&gt;<br />
&lt;style&gt;<br />
p {<br />
  background-color: black;<br />
  color: white;<br />
  height: 100px;<br />
  width: 400px;<br />
  border-radius: 5px;<br />
}<br />
&lt;/style&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;p&gt;HelloWorld&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

styleタグ内の意味は以下のとおりです。

  • background-color: black; ・・・背景色を黒色に
  • color: white; ・・・文字色を白色に
  • height: 100px; ・・・高さを100pxに
  • width: 400px; ・・・幅を400pxに
  • border-radius: 5px; ・・・角丸を5pxに

このスタイルを設定するための言語をCSSといいます。詳しく知りたい場合は検索してみましょう

Widget.plistの作成

iWidgetの設定ファイルの作成に移ります。Filzaではplistファイルを新規に作れないので、iFileで同じ場所を開きます。
開いたら、新規ファイルでWidget.plistを作成します。
ファイル H28-09-05 7 36 04

Widget.plistの編集

作成したWidget.plistをタップしてプロパティリストビューアーを開きます。
右下の+をタップし、以下のようにsizeと入力して、タイプはDictionaryを選択します。
ファイル H28-09-05 7 30 02
作成したsizeをタップしてsizeの下に移動します。
右下の+をタップし、以下のようにheightと入力して、タイプはIntegerを選択します。
ファイル H28-09-05 7 31 08
同じように+をタップし、widthと入力して、タイプはIntegerを選択します。
完了すると以下のようになっているはずです。
ファイル H28-09-05 7 32 27
heightを100、widthを400と入力して高さと幅を設定します。
ファイル H28-09-05 8 05 41

表示されるか確認

ホーム画面を長押しして自作したウィジェットを配置してみましょう。説明がヘタでごめんなさい。わからないことがあったら質問してみてください。

コメントはまだありません

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

AppStoreアプリ
「ショートカット」アプリのコマンドで取得したい項目を変数で指定する方法

WorkflowがiOS12で日本語化されましたが、まだまだ日本語の対応が中途半端なようです。 「デ …

AppStoreアプリ
[swift3]WKWebviewの画面をキャプチャする方法[UIImage]

WKWebviewを画面キャプチャする際に躓いたのでメモ。 まずはスクリーンショットをUIImage …

Mac
macOS Sierraでrubyのcgiを動かす際に躓いたこと

こちらのサイト様を参考にmacでrubyのcgiを動かそうとしたのですが、私のmacのバージョンでは …