【iPhone】XenHTMLで導入したウィジェットをカスタマイズ
FilzaでiPhoneの中身を眺めていたところ、偶然iWidgetが目に留まったので、中身を書き換えてカスタマイズしてみることにしました。半分メモです。
目標
【XenMusicのレイアウトを変更】
・基本色を白からダークテーマにする
・ウィジェットを若干半透明にする
・影を作って浮き出ているように見せる
必要なもの
・ファイルマネージャ(Filzaなど)
・ファイル操作やフロントの知識(無くても可)
環境
iPhone8(iOS11.2.5)JB済
試してはいませんが、XenInfoがiOS9~12に対応してるので、iOS9以上なら動作すると思います。
事前準備
・XenHTML,XenInfoのインストール
・XenMusicを導入
XenHTMLのリポジトリ
XenInfo、XenMusicのリポジトリ
ウィジェットの追加方法
1．ホーム画面のアイコンを長押しします。
2．画面下部に出てきた「添加小工具(add widget)」をタップします。
※言語設定の優先順位で、中国語が英語より上位にあると自動的に中国語になってしまいます。
3．XenMusicを選んで適用させると、ウィジェットの配置を決められるようになります。
初期状態はこんな感じ！（画像は配布サイトのサンプルスクリーンショットです）
ダークテーマ好きなのでシックな感じに変更を加えていきたいと思います！
ウィジェットのソースを操作
ソースの保存先
/var/mobile/Library/iWidgets
htmlファイルとアイコン画像が入ったimgフォルダがあります。再生ボタンなど変えたい場合は画像を差し替えてください。
htmlの編集ですが、Filzaでは直接ソースコードを編集できないようなので、一度拡張子をtxtに変更してソースコードを編集します。
htmlの編集・レイアウトの変更
レイアウトを変更するには<style>から</style>の間を編集します。曲名やアーティストなどの文字部分を変えたい方は<body>から</body>の間の該当箇所を変えます。
htmlやcssの知識がある方は自由にカスタマイズしてみてください。また、scriptタグではjsが記述されており、ボタン押下時の処理などの動的な部分が編集できます。
そしてXenMusicはファイルが一つにまとめられているのでシンプルで分かりやすいですね！
以下では初心者向けに、上で提示した目標に沿ってレイアウトを変えていきたいと思います。
#baseに「background-color: rgba(147, 147, 147, 0.7);」と「box-shadow: 0 3px 2px rgba(0,0,0,0.2);」を追加
#artistのcolorを「color:#353535;」に変更
※画像ではPCのエディタを使用していますが、書き換える際はFilzaのテキストエディタで構いません。
書き換えが終わったら、「XenMusic.txt」を「XenMusic.html」に戻しましょう
上にある「ウィジェットの追加方法」に従ってXenMusicを表示させることができれば成功です！
お疲れさまでした～
