MyScriptsでjQuery Mobileを使おう
2016/03/24
もくじ
内蔵になったjQuery Mobileを使おう
MyScripts 
カテゴリ: 仕事効率化
価格: ￥350
MyScriptsがバージョンアップでjQuery Mobile内蔵になりました。
MyScriptsユーザーなら全員、オフラインであってもjQuery Mobileが使えるので、気兼ねなく活用しましょう。
 |
MyScripts内蔵のjQuery Mobileのマニュアルを表示 | ひとりぶろぐ  |
jQuery MobileでMyScriptsにUIを付けよう
jQuery Mobileを使って、使いやすいMyScriptsスクリプトを作りましょう。
前提として、以下のページに書いてある知識が必要となります。
|
MyScriptsスクリプトにユーザーインターフェースを持たせる方法 | ひとりぶろぐ  |
手始めに、MyScripts単体でTwitterに投稿するMyScriptsスクリプトにUIを付けてみたいと思います。投稿専用Twitterクライアントのようなものを作ることになります。
複数行入力可能なUIは、JavaScriptのpromptでは実現不可能です。MyScriptsユーザーは、こんなことがやりたかったのではないでしょうか。（続きは[Read More]から）
TweetItをインストール
以下のページを参考に、TweetItを動くようにします。
|
[iOS]MyScipts単体でTwitterに投稿するスクリプトTweetItでいろいろ捗る | ひとりぶろぐ ![[iOS]MyScipts単体でTwitterに投稿するスクリプトTweetItでいろいろ捗る | ひとりぶろぐ](http://b.hatena.ne.jp/entry/image/http://hitoriblog.com/?p=6218) |
TweetItUIと、PageTemplateをインストール
以下のリンクをMyScriptsがインストールされたiOS機でタップし、MyScriptsに登録します。PageTemplateが生のHTML、TweetItUIが、PageTemplateをMyScripts上で動作するようにしたものです。
TweetItUIは、PageTemplateを「クリップボードのテキストを登録」で文字列に変換したものに、基本的に2行足しただけです。
PageTemplateの中身は以下の通りです。
「MyScriptsスクリプトにユーザーインターフェースを持たせる方法」で解説したように、MyScripts上でPageTemplate、すなわちhtmlをチクチク編集しつつ、QuickPreviewで動作確認をしつつ書きました。MyScriptsをhtmlエディタとして使ったわけですね。
マニュアルからコピペしよう
こんなクソ小難しい記述がどこから来たのか不思議に思うでしょうね。
しかし、安心してください。jQuery Mobileのマニュアルからほとんどコピペしてきました。
「MyScripts内蔵のjQuery Mobileのマニュアルを表示」で書いたように、jQuery MobileのマニュアルをMyScriptsの中で表示させ、ページ全体の構成は「Quick start guide」の上の方にあるものをコピペしてきました。jQuery / jQuery Mobileのjsファイル、cssファイルを、MyScriptsに内蔵されたものを参照する形に書き換えただけです。
MyScriptsでスクリプトを書きながらjQuery Mobileのマニュアルを参照したい場合は、普通にWebブラウザで参照した方が便利かもしれないですね。こちらだと日本語だし。
|
jQuery Mobile 1.1.0 日本語リファレンス  |
文字を入力するtextareaは、マニュアルの「Form elements＞Text inputs」の下の方にあるTextareaのところからコピペしてきました。
入力を確定するボタンは、マニュアルの「Buttons＞Button basics＞Form buttons」を参考にしました。formの普通のボタンを書くと、勝手に格好いいjQuery Mobileデザインのボタンになります。
ボタンとJavaScript
ボタンをタップすることでJavaScriptの関数を実行、そのJavaScriptの関数の中でMyScriptsスクリプトを実行するようにします。
ボタンのonclickに、関数submitを指定するだけです。ボタンを押すと、関数submitが実行されます。
onclick="submit();"
関数submitは、ページのヘッダのところで定義しています。
// 関数submit定義
var submit = function() {
// textareaという名前のtextarea内のテキストを取得してURLエンコード
var txt = encodeURIComponent($('textarea').val());
// MyScriptsスクリプト、TweetItを起動、取得したテキストをパラメータとして渡す
openURL("myscripts://run?title=TweetIt&text=" + txt);
return;
}
関数submitの中では、$()関数を使ってtextareaを取得し、val()メソッドで入力されたテキストを取得しています。
$('textarea').val()
取得したテキストはencodeURIComponents()でURLエンコードし、MyScriptsに渡しています。ここで登場する関数openURLも、関数submitと同時に定義しています。
// textareaという名前のtextarea内のテキストを取得してURLエンコード
var txt = encodeURIComponent($('textarea').val());
// MyScriptsスクリプト、TweetItを起動、取得したテキストをパラメータとして渡す
openURL("myscripts://run?title=TweetIt&text=" + txt);
$()関数は$(‘id名’)とすることで、id名を指定してオブジェクトを取得することができます。
textareaにはtextareaというidを付けてある（id=”textarea”の部分）ので、$(‘textarea’)で取得できるわけです。
↓ID名で照合
$('textarea')
textareaの場合は$(‘id名’).val()で入力されたテキストが取得できます。一行テキストボックス（input type=”text”）の場合は$(‘id名’).text()で入力されたテキストが取得できます。
Home画面にアイコンを置こう
jQuery MobileでUIを付けてアプリ風にしたら、Home画面にアイコンを置いて、オレオレアプリのようにしたくなります。
置きましょう、アイコン！
MyScriptsはTouch Icon Creatorと連携可能です。
Touch Icon Creator
カテゴリ: ユーティリティ
価格: ￥85
スクリプトを編集中に「アクションボタン＞スクリプトを実行…＞Touch Icon Creator」で、編集中のスクリプトを実行するアイコンを作る形でTouch Icon Creatorを起動します。
PageTemplateを改造して使ってください
PageTemplateは、その名の通り、jQuery Mobileを使ったMyScriptsを作る際のひな形になると思います。
好きに改造して使ってください。
PageTemplateを書き換えては「QuickPreview」で動作確認。
目処が付いたら「クリップボードのテキストを登録」で文字列に変換して、MyScriptsスクリプトに組み込み、といった感じです。
TweetItUIは引数が取れる
TweetItUIは、引数を取ってtextareaのデフォルト値としてセットできます。
myscripts://run?title=TweeetItUI&text=default
上記のようなURLで実行すると、以下のようにtextareaに最初からdefaultがセットされた状態になるわけです。
TweetItUIは、PageTemplateを「クリップボードのテキストを登録」で文字列に変換したものに2行足し、さらに、以下のように改変を加えてあるからです。さっき「基本的には」と書いたのは、このことです。
↓以下のように改変
つまり、一つの長ーい文字列になっている変換後のhtmlを、「〜textarea\”>●</textarea>〜」の●の部分を境に二つの文字列に分け、TEXTを挟んで結合したわけです。
これだけで渡されたtext引数が反映されます。
text引数が与えられたときのみ反映、クリップボードのテキストは無視したい場合は、以下のようにします。
var txt;
if (TEXT == CLIPBOARD) {
txt = "";
} else {
txt = TEXT;
}
↓以下のように改変
変数TEXTには、クリップボード上のテキストとtextパラメータで渡されたテキストの両方が入ります。
一方で、変数CLIPBOARDにはクリップボードのテキストのみが入り、textパラメータで渡されたテキストは入りません。
変数TEXTと変数CLIPBOARDの内容が同じである場合はtextパラメータでテキストが渡されていないことと判断。
変数TEXTと変数CLIPBOARDの内容が違う場合は、textパラメータでテキストが渡されたと判断。
クリップボードにコピーされているテキストとtextパラメータで渡されたテキストが同じである場合は、textパラメータでテキストが渡されていない判定となってしまいますが、これはどうしようもなさそうです。