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

HandyFlowy上でJavaScriptやCSSの動作確認を手軽に行うスクリプトTester

wineroses氏のScriptMakerStylenoteに触発されまして。

HandyFlowy

HandyFlowy

  • Michinari YAMAMOTO
  • 仕事効率化
  • 無料

HandyFlowyの機能拡張スクリプトiPhoneでぽちぽち作成しようとすると、登録するまで挙動がわからず作成中のテストスクリプトをいくつも登録する事態に陥ります。

Testerはテストスクリプトとして登録することなくJavaScriptCSSの挙動を確認できる機能拡張スクリプトです。

window.onerror = function(mes, src, line, col, err) {
  alert('['+line+'] '+mes);
};
(function(){
  var p = pageContainer.getElementsByClassName("project selected noted")[0];
  if(!p){
    alert("No script in Note.");
    return;
  }
  var s = p.getElementsByClassName("notes")[0].innerText;
  var t =  /\}\s*$/.test(s) ? "style" : "script";
  var e = document.createElement(t);
  e.innerHTML  = s;
  document.body.appendChild(e);
})();

TesterをMemoFlowy経由でインポート

MemoFlowy

MemoFlowy

  • Michinari YAMAMOTO
  • 仕事効率化
  • 無料

使い方

ノートにCSS*1を書いてTesterを実行するとスタイルが反映されます。

ノートにJavaScriptを書いてTesterを実行するとJavaScriptが実行されます。

JavaScriptの変数を初期化したりCSSを適用前に戻したりするには右ペインのリロードボタンで。

ついでにJavaScriptで文法ミスなどエラーがあった場合は行番号とエラー内容を表示するようにしました。Workflowy自体のエラーも拾うので必要なくなったらリロードして解除してください。

Testerで色々試した後にScriptMakerやStylenoteで登録、の流れはいかがでしょう。

あとがき(要望)

HandyFlowyはスクリプトを登録するURLスキームが内部でしか使えず、共有するにしても修正するにしても手間がかかるので

  • handyflowy://importを外部から使える
  • 登録時にスクリプトの内容を確認して保存するかを決められる
  • 登録後もスクリプトの確認や修正が出来る

が実現されたらいいなと思いました。

*1:最後の文字が}である場合CSSと判断します。

iOSアプリのアイコンを多種多様なファイル形式で1ピクセル刻みに取得する

iTunes Search APIで取得できるアプリアイコンのURL形式がいつの間にか変わっていたのでテストしてみました。いつの間にか使えなくなるかもしれませんが、現状の記録ということで。

説明用サンプル

iTunes Uのidをlookupして得られるartworkUrl60

のファイル名「60x60bb.jpg」を元に説明します。

60x60

ファイル名の●x●の部分を変えることで1ピクセル刻みの正方形で大きさを指定して取得できます。

  • 基本的には指定したピクセル数の画像が返されます:512x512→512ピクセル
  • 異なる数字を指定した場合、小さい方の値が優先されます:512x60→60ピクセル
  • 上限は1024です:10000x10000→1024ピクセル
  • 片方に0を指定した場合、他方の長さが優先されます:0x60→60ピクセル
  • 両方0を指定した場合でも、0になりません:0x0→1ピクセル

bb

わざと誤った文字を指定したとき(例:aa)に表示されるメッセージによるとImage Resize Styleというパラメータのようです。
やや拡大して元の大きさで切り取ったような画像を取得できます。
指定するアルファベットは何でもよいわけでなく、取得できたものは
bb, bf, cc, cx, fa, fb, fc, fe, ff, fg, fh, ss
でした。bbからfhまでの画像は以下の通り(左上から右方向の順)です。

またssは●x●の指定によらず1024ピクセルの画像を返します。

.jpg

拡張子の文字列を変更すると、一般的な画像形式を含めかなりの数のファイル形式に変換できます。
3文字の拡張子*1のうち取得できた(ステータスコードが200である)ものを列挙しておきます。

art, arw, avi, avs, bmp, cgm, cin, crw, dcm, dcr, dcx, dib, dng, dot, dpx, emf, epi, eps, ept, exr, fax, fig, fpx, gif, hrz, ico, jng, jpc, jpg, man, mat, mng, mpc, mpr, mrw, msl, mtv, mvg, nef, orf, otb, pam, pbm, pcd, pcl, pcx, pdb, pdf, pef, pfa, pfb, pfm, pgm, pix, png, pnm, ppm, psd, pwp, rad, raf, rgb, rla, sct, sfw, sgi, sid, svg, tga, tif, tim, ttf, txt, wmf, wpg, xbm, xcf, xpm, xwd

*1:jpeg, tiff, pictなど3文字でない拡張子でも取得できるものもあります。

iOSウィジェットから書式クリアする2つの方法

1つ目。以前、bold italic underlineやその他諸々の書式をクリアする方法としてMyScriptsを使った手法を取り上げました。
iOSメモアプリへコピペする時にサクッと書式クリアする - aitatena

MyScripts

MyScripts

  • Takeyoshi Nakayama
  • 仕事効率化
  • ¥360
MyScriptsはURLスキームでスクリプトを呼び出せます。書式クリアの場合、呼び出しURLは次の形です。*1

myscripts://run?title=%E6%9B%B8%E5%BC%8F%E3%82%AF%E3%83%AA%E3%82%A2

これをS Launcherなどのウィジェットランチャーアプリに登録すると、いつでも呼び出せます。

S Launcher - Launches anything in one second

S Launcher - Launches anything in one second

  • Manh Nguyen Tien
  • ユーティリティ
  • 無料

対象文字列をカットして、ウィジェットから呼び出して、iOS9で搭載された左上のGo Backで戻ってペースト。
これで書式クリアされます。


2つ目。Workflowを使います。

Workflow: Powerful Automation Made Simple

Workflow: Powerful Automation Made Simple

  • DeskConnect, Inc.
  • 仕事効率化
  • ¥480

インポートはこちら:書式クリア

対象文字列をカットして、ウィジェットをタップして、ウィジェットを閉じてペースト。アプリを起動することなく完結します。

お好きな方法でどうぞ。

*1:スクリプトを長押しして表示されるメニューから リンクを作成…>スクリプト実行用(クリップボード) と進むとコピーされます

iOS版TextExpanderのJavaScriptスニペットについて

日本語情報が少なかったのでまとめました。

TextExpander 3 + custom keyboard

TextExpander 3 + custom keyboard

  • SmileOnMyMac, LLC
  • ユーティリティ
  • ¥600

JavaScriptスニペット利用方法

  1. 通常のスニペット登録画面を開き「Content: (Plain)」内でホールドしてコピーメニューを出します。
  2. コピーメニュー(の一番右)から「JavaScript」を選択すると見出しが「Content: (JavaScript)」に変化します。
  3. JavaScriptソースコードを登録すると、通常のスニペットと同様の方法でJavaScriptの実行結果を展開できます。

ソースコードの書き方

基本的には最後に書いた文が展開されます。

"Java" + "Script" + " result"; // JavaScript result

TextExpander.appendOutput()を使うと複数回に分けて出力結果に追加できます。

TextExpander.appendOutput("Java");
TextExpander.appendOutput("Script");
TextExpander.appendOutput(" result"); // JavaScript result

マクロとの併用

JavaScriptの実行結果にマクロ(%を使ったスニペット)が含まれていればマクロも実行されます。

'%Y.%m.%d'; // 2015.01.01(※展開した時点の日付)

日時に関するマクロの参考:TextExpander Help: Date, Time, and Math Macros

JavaScriptとfill-inを併用した場合、展開した際に入力欄を伴ったソースコードが表示されます。
入力欄に値を入力してOKボタンを押すと入力後の状態のソースコードが実行されます。
(後述のTextExpander.filledValuesも参照)

a = '%filltext:name=hoge%'; // 「a = '入力欄に入力した値';」が実行される

発展的なマクロ(クリップボード、fill-in、カーソル位置、カーソル操作、展開時デリミタ要否設定、タブキーなど)の参考:TextExpander Help: Advanced Snippet Functions: Macros

TextExpanderオブジェクトのプロパティ

TextExpanderオブジェクトにはappendOutputの他にもプロパティがあります。*1
参考:TextExpander Help: AppleScript, Shell Script, JavaScript Snippets

appendOutput

先述の通り、出力結果に追加します。

ignoreOutput

出力結果に何も出力したくない場合trueを設定します(初期値はfalse)。
例えば時刻を設定するだけのスニペットを作りたい場合などに使えます。

TextExpander.ignoreOutput = true // 出力結果なし
triggeringAbbreviation

Abbreviation(スニペット名、スニペット編集画面の上側に入力する展開元文字列)を取得します。

TextExpander.triggeringAbbreviation; // Abbreviationで指定した文字列
baseDate

展開した時点での日時を取得します。

TextExpander.baseDate; // Thu Jan 01 2015 12:34:56 GMT+0900 (JST)

またDate型のメソッドが使えます。

TextExpander.baseDate.getFullYear(); // 2015
adjustedDate

マクロの日時を設定します(初期値はbaseDate)

TextExpander.adjustedDate = (new Date()).setDate(TextExpander.baseDate.getDate() + 3); // 日付を3日進める
'%Y.%m.%d'; // 2015.01.04

またスニペットのネストを利用すると他のスニペットで利用できます。

// スニペット名:3Dadd
TextExpander.adjustedDate = (new Date()).setDate(TextExpander.baseDate.getDate() + 3); // 日付を3日進める
TextExpander.ignoreOutput = true; // 出力結果なし

として他のスニペット

%snippet:3Dadd% %Y.%m.%d 

を登録すると展開結果が2015.01.04となります。

pasteboardText

ペーストボードの文字列を取得します。

TextExpander.pasteboardText; // ペーストボードの文字列
expansionContext

スニペットが展開されたアプリケーションのbundle identifierを取得します。

TextExpander.expansionContext;
// スニペットプレビュー画面で展開した場合、com.textexpander.preview
// 他のアプリ上でTextExpanderキーボードで展開した場合、group.com.smileonmymac.tetouch
filledValues

fill-inで入力された値を取得します。

a = '%filltext:name=hoge%';
TextExpander.filledValues['hoge']; // hogeの入力欄に入力した値

使用可能なオブジェクト

TextExpander Help: AppleScript, Shell Script, JavaScript Snippetsによると、OS XではJavaScriptを拡張したJavaScript for Automation (JSA)が使えますが、iOSではPlain old JavaScriptだけだそうです。
具体的にどんなオブジェクトが使えるか判然としなかった調べました。

Object.getOwnPropertyNames(this).sort();
Array,ArrayBuffer,Boolean,DataView,Date,Error,EvalError,Float32Array,Float64Array,Function,Infinity,Int16Array,Int32Array,Int8Array,JSON,Map,Math,NaN,Number,Object,Promise,RangeError,ReferenceError,RegExp,Set,String,SyntaxError,TextExpander,TypeError,URIError,Uint16Array,Uint32Array,Uint8Array,Uint8ClampedArray,WeakMap,console,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,escape,eval,isFinite,isNaN,parseFloat,parseInt,undefined,unescape

文字列操作、数学関数、正規表現、URLエンコードなどローカルで行いたい処理はおおよそ可能です。
一方、windowやXMLHttpRequestなどWEB系のオブジェクトは使えないので外部との通信を行うのは無理そうです。

おわりに

Smile Blog: Sample JavaScripts for TextExpander 5.0 / TextExpander touch 3.5では

の流れのサンプル(BMI計算、給料計算、簡易計算機、PHQ-9うつ病テスト)が紹介されています。

この他にペーストボードを使えることを利用して

の流れも考えられますね。

ただキーボード切り替えが日本語環境ではかなり面倒なので対応アプリと標準キーボードの組み合わせが良さそうです。
参考:TextExpander touch: iOS Typing Shortcuts for iPhone and iPad

*1:紹介されているもの以外で隠しプロパティがあるんじゃないかと探ってみましたが特に見つかりませんでした。参考:JavaScript のオブジェクトのプロパティ一覧を取得する方法とオブジェクトが指定の名前のプロパティをもっているか検査する方法 - ひだまりソケットは壊れない

Workflow起動URLスキーム作成ツール

Workflowアプリに登録した各Workflowを起動するための、パラメータ付きURLスキームを簡単に作成するツールです。

参考:Develop for Workflow

Workflow: Powerful Automation Made Simple

Workflow: Powerful Automation Made Simple

  • DeskConnect, Inc.
  • 仕事効率化
  • ¥600

ツール本体

使い方

起動したいWorkflowの名前をname欄に入力すると、そのWorkflowを起動するURLスキームが入力欄の下に表示されます。

その他の入力欄はオプションです。

  • input:起動するWorkflowの入力値として使う値。テキストを直接指定するかクリップボードを用います。
  • callback:Workflowの処理が終わった後に自動的に起動するURLスキームを指定します。(参考:x-callback-url

App Storeのアプリ情報を取得するWorkflowを作ってみた

結構前からWorkflowと戯れていたんですが、Search APIで取得したJSONの形式変換がうまくいかず詰まってました。

Workflow: Powerful Automation Made Simple

Workflow: Powerful Automation Made Simple

  • DeskConnect, Inc.
  • 仕事効率化
  • ¥500

iTunes, App Store, iBooks, and Mac App Store Affiliate Resources - Search API

対応策はGet Contents of URLでデータ取得後に.json拡張子の付いた名前をSet Nameすること。これでGet Value for Keyが使えます。

これを使ってApp Storeのアプリ情報を取得するGet App Dataを作ってみました。インポートは次のリンクから。
https://workflow.is/workflows/b684c40ad8ff40ce919c852bf1f866fa

使い方

App Storeでアプリのページを表示して右上のアクションボタンからRun Workflowを選択。
f:id:aitatena:20150322132842j:plain

Get App Dataを選択するとメニューが表示されるので取得したい項目を選択。
f:id:aitatena:20150322132905j:plain

「アイコン」を選ぶと高解像度のアイコン(artworkUrl100)が表示されます。右上のアクションボタンから保存。
f:id:aitatena:20150322132939j:plain

「説明」を選ぶとアプリの説明文が表示されます。説明文のコピーに。
f:id:aitatena:20150322132956j:plain

スクリーンショット」「スクリーンショットiPad)」を選ぶとスクリーンショット画像が表示されます。一覧は右下のボタンから。
f:id:aitatena:20150322133010j:plain

制限事項

アップデートタブからアプリを選択した場合、URLが取得できないのでWorkflowを起動してもGet App Dataは表示されません。

メモ・単語帳アプリWordBookを「あとで調べる」に使っています

なんでもかんでもスマホですぐに調べられる時代。

わざわざ疑問点を記録しておいて「あとで調べる」ことは一見時代を逆行するような勉強法ですが、こんな利点があります。

  • 調べることによる脱線をしないため作業に集中できる
  • 暇な時にまとめて調べられるので時間を有効に使える
  • 調べるものを見渡して調べたいものや優先度の高いものから調べられる
  • 調べるまで時間が経過しているため自動的に復習になり記憶が定着しやすい
  • 何が分からなかったのか後から確認でき成長を感じられる

疑問点と調べた結果をセットで記録できるアプリを探したところ、WordBookが抜群の使い心地でした。

WordBook (メモ・単語帳)

WordBook (メモ・単語帳)

  • Yasuhiro Inami
  • 教育
  • ¥120

単語帳としても使えるアプリですが、私は「あとで調べる」に使っています。

▼一行ずつor左右に並べる、2段組or3段組といったレイアウトをブック(≒フォルダ)毎に設定可能。

f:id:aitatena:20141221000200j:plain

▼下スワイプでアイテムを新規作成したらダブルタップでセルを編集。編集画面ではフリックによるカーソル移動に対応。

f:id:aitatena:20141221000229j:plain

▼セルをタップで選択→アクションボタン→クイック検索*1の3タップ*2で速攻検索。Web上の検索はアプリ内ブラウザで完結。

f:id:aitatena:20141221000242j:plain

その他、Dropboxにワンタップでバックアップできたり、それをPCからWebアプリ上で閲覧・編集できたり、単語帳のような表示モードがあったりと、機能やギミックが盛り沢山です。

2段組み/3段組みが不要な方には1段組みで同様の機能を持つIdeaBookがあります。こちらはアイディアや思い付きの記録に使っています。

IdeaBook

IdeaBook

  • Yasuhiro Inami
  • 仕事効率化
  • ¥120

ずっと前から使ってたのに何故か紹介していなかったうもれアプリ。オススメです。

*1:URLスキームも使えるカスタム検索エンジンは5つまで登録可能。

*2:設定ボタン>単語リスト>『iOS辞書を使用』や『音声読み上げを使用』オフ時。