FirePadで書いてScrapboxに保存する方法
猛暑のさなか図書館通いになっています。抜き書きにメモする場面でKindleFireが活躍。さて、書くは良いとして、どこに蓄えようか。これが悩みどころで、読書そのものの本質に関わるけれど、とりあえずScrapboxに移す作戦にしました。
FirePad
Androidは使いにくい。なぜ使いにくいかというと、iPhoneのモブログ環境と比較するからです。iPhoneには便利なツールが揃っています。でも初めから用意されていたのではありません。ユーザーが必...
自作のオンライン・エディタ。行単位で編集する機能も備えています。GitHubのソースをそのまま抜き出し、KindleFireのローカルファイルにもできる。ソース内の書き換えは要るけれどオフラインでも動かせるので、これがFireタブレットの利点になります。
Scrapboxに書く
Scrapboxに転送するためのブックマークレットです。FirePadで起動するとScrapboxに切り替わります。ソース内の変数Scrapboxをご自分のURLアドレスに書き換えてください。
javascript:
Scrapbox="https://scrapbox.io/PROJECT";
FirePad="https://wineroses.github.io/fire/pad.html";
url=location.href;
if(url.indexOf(FirePad)>=0){
s=fire.value;t=s.split("\n")[0];b=s.substr(t.length);
location=Scrapbox+"/"+encodeURIComponent(t)+"?body="+encodeURIComponent(b);
}else{
if(url.indexOf(Scrapbox)>=0){
s=scrapbox.Page.lines.map((x) => x.text).join("\n");
}else{
if(url.indexOf("youtube.com")>=0){
id=url.split("v=")[1].split("&")[0];
s="<iframe width='350' height='200' src=\"https://www.youtube.com/embed/"+id+"\"></iframe>\n";
}else{
s="<a href="+url+">"+document.title+"</a>\n";
}}
location=FirePad+"?"+encodeURIComponent(s);
}Scrapboxから戻す
上記スクリプトをScrapboxで起動すると、FirePadに追記します。相互にやり取りできる。Scrspbox用のAndroidアプリがないので、FirePadで代用するイメージです。
おまけ
YouTubeでこのスクリプトを起動するとFirePadに動画を貼り付けます。プレビューで動画の再生もできます。それ以外のサイトだと通常のリンクが埋め込まれます。
（ありゃ。YouTubeの動画ってFirefoxFocusに弾かれてしまうんですね。ブロッカーを外してこのページを見てください。トゥーツ・シールマンスのImagineが視聴できます。）
仕様の変更
FirePadでのプレビューを三本指でのタップに変更しました。二本指でタップだとカード・モードになります。カード・モードも行単位から段落単位に変更しました。空行に挟まれた範囲を「段落」とするので、情報カードっぽく扱えます。つまり、タップする指の数で、文字編集→段落編集→プレビューと移行する仕様です。
まとめ
Fire7でScrapboxを活用するブックマークレットですが、iPhoneでも利用できます。Scrapboxをブラウザで見るなら、その延長でFirePadを立ち上げると入力に集中しやすい。FirePadの一行目がScrapboxでのタイトルになります。同じタイトルのページがあると追記になります。日本語変換で「きょう」と打つとタイムスタンプが現れるので、それを一行目にしておくと日毎にまとめられ、アイデアメモらしい使い方になります。
モブログ・エディタのFirePadをTextwellに詰め込んでみました
行単位で編集するエディタです。
FirePad
Textwell 1.8.7KindleFire用に作ったオンライン・エディタですが、Markdownが便利なのでTextwellと連携するようにしました。Textwellで書いている文章をFirePadで開きます。
使い方
アクションを起動すれば、本文のままにFirePadになります。スライドでカーソルを移動します。文字選択してからスライドだと選択範囲の伸縮になります。内蔵ブラウザを閉じるときReplaceボタンを押すとTextwell側に取り込みます。それが基本的な使い方。
ソース内の変数styleでフォントサイズや配色をカスタマイズすることができます。CSSでデザインを変更できるので、お好みに合わせて書き換えてください。
プレビュー
画面を二本指でタップするとプレビュー画面になります。HTMLタグだけでなく、Markdown記法にも対応しています。二本指でタップすれば編集画面に戻ります。
カード・モード
三本指でタップすると行編集になります。一行ごとにカード化され、ドラッグで入れ替えることができます。カードをタップすると戻ります。このデザインは長い文章には向いていません。長文は段落単位のほうがいい。でも、モブログ用なので行単位にしました。
カードの左端のタグをタップすると、カードを削除します。警告なしで消えます。並び順が初期化されるので、最初に削除してから並べ替えをしてください。
ブラウザ用FirePad
Androidは使いにくい。なぜ使いにくいかというと、iPhoneのモブログ環境と比較するからです。iPhoneには便利なツールが揃っています。でも初めから用意されていたのではありません。ユーザーが必...
KindleFireから使うときは下記アドレスをご利用ください。行編集はモブログ・エディタの必須機能と思っているので、やっとFire7でも可能になった感じ。
https://wineroses.github.io/fire/pad.html
まとめ
付箋紙のデザインにしているのは、アウトライナーとは別の切り口にするためです。コトバをモノとして扱う。そういう感触を狙っています。行の長さにあわせてカードの幅を変えても良かったのだけれど、あえて同一幅にしました。移動もしやすくなるし。ただ空行が冗長に見えるので、今後デザインを変えるかもしれません。とりあえずは、目指す方向が見えたところ。Textwellからも呼び出したくなるツールにしたい。
TextwellからDynalistのInboxにAPI経由で転送するアクション
Workflowに仲介してもらいます。
Dynalist
DynalistのAPIを利用して投稿するアクションです。
Import Textwell ActionDynalist
トークン
まずSecret tokenを作ってください。Dynalistにログインしてから下記ページにアクセスし「Generate」を選びます。APIを呼び出すトークンが生成されるので、それをコピーします。英数字が組み合わさった長い暗号で、破棄もできるので安心してお使いください。
Are you absolutely sure you want to destroy your API secret token? Programs and scripts that use the...
Workflowレシピ
Workflowに下記レシピをインストールします。レシピ内のTextのところに、先ほど生成したトークンを貼り付けます。設定は以上で完了です。
使い方
アクションを実行すると、カーソル行をDynalistのInboxに転送します。Inboxはデスクトップ版のDynalistでアイテムを選んだとき、メニューの下のほうの「Set as inbox」で設定することができます。転送が成功すると、Textwellからはその行がカットされます。
空行でアクションを実行すると、本文全体を一つのトピックとしてInboxに追加します。これ、どうして分割されないのか不思議なのですが、今のところブロック化される仕様のようです。適当に改行を入れて加工しないといけないのが、なんとも不便ですけど。
まとめ
公式アプリよりもエレガントに。以前組んだDynaCardの発展系。Textwellで書いてDynalistに貼り付けたり、DynalistをTextwellに読み込んだりします。WorkFlowy用C...
TextwellのT.requestだとPOSTが使えないので、Workflowを経由しました。でもおかげで、SafariからURLアドレスを送る方法が生まれました。Workflowを呼び出せるアプリなら、そのままDynalistと連携します。応用が効きます。これが今回の収穫かもしれない。
iOS/Android兼用のモブログ・エディタ FirePad を作ってみた
Androidは使いにくい。なぜ使いにくいかというと、iPhoneのモブログ環境と比較するからです。iPhoneには便利なツールが揃っています。でも初めから用意されていたのではありません。ユーザーが必要に応じツールを作り、補い合って構築してきたのです。
それで「こういうエディタがあれば」という妄想を組み立ててみました。WebアプリなのでiPhoneでも実行できます。あくまでもコンセプトです。実用性は求めないでください。
FirePad
GitHub is home to over 28 million developers working together to host and review code, manage projec...
GitHubに置いてみました。下記アドレスを開けばエディタです。スライドカーソルで自動保存付き。ローカルストレージなのでデータがネットに漏れることはありません。
https://wineroses.github.io/fire/pad.html
テキスト追記
pad.htmlのあとに?を付けテキストを置くと追記になります。URLエンコードが条件。つまり下記ブックマークレットを実行すると、FirePadにリンクを生成します。
javascript: s="["+document.title +"]("+ location.href +")\n"; location="https://wineroses.github.io/fire/pad.html?"+encodeURIComponent(s);Markdownプレビュー
画面を二本指でタップするとプレビューに切り替わります。もう一度二本タップすると編集画面に戻ります。プレビューはMarkdownに対応します。ブックマークレットでHTMLタグを取り出すときは、変数preview.innerHTMLをお使いください。
ブックマークレットで機能拡張
本文の内容は変数fire.valueで扱います。たとえば画面をクリアする場合は、下記ブックマークレットを実行してください。白紙の状態に戻します。javascript:fire.value="";Scrapbox
Scrapboxへの投稿も簡単です。fire.valueから一行目を取り出しタイトルとします。変数Scrapboxにご自分のプロジェクト・アドレスを書き入れてお使いください。javascript: Scrapbox="https://scrapbox.io/xxxx/"; d=fire.value.split("\n");t=d.shift();s=d.join("\n");url=Scrapbox+encodeURIComponent(t)+"?body="+encodeURIComponent(s);open(url);Undo
編集の取り消しは、ブラウザによっては下記スクリプトが有効です。javascript:document.execCommand("undo");スタイル・カスタマイズ
環境によって配色など変えたくなります。localStorage.styleでデザインのカスタマイズができます。たとえば編集画面のIDは fire なので下記ブックマークレットでフォントサイズを変更できます。CSSでスタイルを上書き。実行してからFirePadを読み込んでください。
javascript:localStorage.style = "#fire{font-size:16px;}";まとめ
プライム会員になって、Kindle読み放題、ジャズ聴き放題となりました。Fireは画期的です。田舎だと手に入らない専門書やCDが瞬時に届けられる。古典的なアルバムなら無料でダウンロードできます。プライ...
デジタル文房具の基本はテキスト・エディタ。文章を書くツール。こだわりつつ、普遍性を求めてしまう。そういうシロモノなので好き勝手やってみました。
よく考えると定期的に同じことをしてますね。DarkRoomやらLeoやら組んできて今回はFirePad。反復のうちにコンセプトが整理されたように思います。KindleFireはOperaを推奨。ローカルのHTMLファイルをWebアプリとして扱えるので、理想的な環境と思ったり。
Amazonアプリストアの紹介カードをTextwellで作る
これまでAPKPureを使ってきました。別にGooglePlayが正規とは思ってないです。GooglePlayは一昔前の「窓の杜」の立ち位置でしょう。本来は作者の人が自分のサイトで配布すべき。でも広大なインターネットから見つけ出すのは困難。GooglePlayはそのためのディレクトリ・サービスだと思います。Fireから使えない理由がわかりません。
Amazonアプリストア
そうは言っても、Fire用のアプリはAmazonを通すのが筋ですね。たとえばJotaも、作者のサイトにあるバージョンよりAmazonのほうが新しいです。Fire用としてカスタマイズされたアプリは他にもある。Textwellでリンクカードとして取得してみます。
Import Textwell ActionAmazonApp
使い方
キーワードを書いてアクションを実行するとアマゾンでアプリを検索します。対象となるアプリを開き、内蔵ブラウザを閉じれば、紹介カードを生成します。
使用例
瞬間日記こんな感じのリンクカードになります。
まとめ
本当はKindleFire上でリンクカードを作るシステムが作りたい。下書きはJotaまわりを強化して、うまく行くようになりました。Simplenoteに入れておけば、iPhoneにも転送しやすい。でも「Textwell」がないんです。ブログ用のリンクカードを作る方略がまだない。Androidでモブログをしている人は、アプリの紹介やリンクの作成をどうクリアしているんだろうか。ノウハウがあると思うんだけどなあ。あとGyazoとの連携と。
JotaとEasyCopyでKindleFireを電房具にする
まず書く。それから何をするか決める。DraftPadのような執筆環境。そんなモードレス・ライティングを実現するデバイスを「電房具」と名づけてみました。
Jota Text Editor
Jota Text Editor 「設定」の「その他」で、ダイレクトインテントの送信先を Firefox Focus に、挿入の送信先を Simplenote に割り当てます。この設定だと、単語を選択し[Direct Intent]ボタンでネット検索できます。URLアドレスならそのサイトを開く。「外部アプリで検索」だとSilkしか選べないので、ダイレクトインテントを使うことにしました。
Firefox FocusはMozillaサイトからインストールします。待たせない。動作が軽い。URLアドレスを長押しするとコピーできる。Fireに最適なブラウザではないでしょうか。
EasyCopy
Easy Copy -The smart Clipboard テキストをコピーすると起動するクリップボード・アプリ。コピペ・メニューの拡張版で、転送先のリストが下段に現れます。しかもリスト右端にある「Add Custom」をタップすると、Fireに入っているアプリならどれでも追加できる。これが可能性を広げます。
使い方
Jotaで文章を書き、[Select All]してから[Copy]をタップ。するとEasyCopyが起動し、他のアプリにテキストを転送します。カレンダーに貼り付けたり、本文をクリップボードに入れてWorkFlowyを起動したりできる。すべてのテキスト系アプリのハブになります。
Jotaの「設定＞ツールバー設定」で「すべて選択」「段落選択」「コピー」の３つを選んでおくと便利です。範囲を決め「Copy」を押せば瞬時にEasyCopyが起動します。
転送用アプリ
「どうする」に当たる部分は、インストールしたアプリによって変わります。代表的なのは下記の通り。いずれもAmazonストアにあるので、そちらからダウンロードしてください。
JotterPad - 脚本や小説を執筆しよう Dropbox用エディタ。AmazonストアのDropboxアプリがログインで落ちてしまうので、読み書きするために導入しました。単体でも使いやすいエディタです。
SpeedyWrite Evernote投稿用。Evernoteアプリを直接呼び出すとタイトルがつきません。改行も反映しない。使いにくいのでSpeedyWriteを噛ませます。画像の添付も簡単にできます。
MemoFlowy （ WorkFlowy専用メモアプリ ） WorkFlowy投稿用。Amazonストアにあるのは現バージョンのWorkFlowyに対応していないので、APKPureからインストールします。
瞬間日記 純粋にメモを残すだけなら瞬間日記がおすすめです。タイムスタンプが付くし、全文コピーすればEasyCopyでJotaに戻すこともできます。
まとめ
Fire 7 「何を」「どうする」の語順で考える。アイデアは思いついた瞬間に文字にしないと消えてしまいます。Jotaを立ち上げ書き留める。それまでの文章を消す必要もありません。段落選択でカットすればEasyCopyが後の面倒を見てくれる。どこに転送するかは内容次第なので、まず書かなければ話は進みません。そのためのシステムが「電房具」です。
KindleFireはWebアプリをローカルに自作できます
プライム会員になって、Kindle読み放題、ジャズ聴き放題となりました。Fireは画期的です。田舎だと手に入らない専門書やCDが瞬時に届けられる。古典的なアルバムなら無料でダウンロードできます。プライム・リーディングで電子書籍の図書館にもなります。アニメも無料で視聴できます。日本の再販制度の裏をかき、商習慣を破壊しに来てるなあ。
Webアプリを作る
GooglePlayもAPKPureも経由しません。メーカーが自サイトに用意するものを厳選しました。探せばあるものですね。有名どころのWebブラウザばかりです。Beta版とNighty版がインストール...
さて、そんなKindleFireを触っていて、ローカルにあるHTMLファイルをOperaブラウザで開けることに気づきました。fileプロトコルが有効です。Silkでも閲覧できます。
すると、HTMLでWebアプリを作れば、ローカルで実行できるわけです。自分のほしいアプリを自分のために作ることができる。これがそれか。いま第三の目が開きました。
エディタの骨組み
まず手始めにエディタを組んでみます。基本形は下記のとおり。viewportをタブレットに合わせ、textareaの幅を100%にしているだけですけどね。これで字が書ける。<meta name=viewport content=initial-scale=1>
<style>
#editor{width:100%;height:100%;white-space:pre-wrap;}
</style>
<textarea id=editor></textarea>Jotaで登録
Jota text editorを起動し、上記スクリプトを貼り付けます。そしてメニューの「ファイル」から「他のアプリで開く」を選び、ブラウザを起動すれば出来上がり。最初はOperaをお使いください。ブックマークしておけば何度でも呼び出せます。
途中でファイル保存を尋ねてきます。そのときファイル名を editor.html にしてください。あとで使い回しします。わかりやすいよう Documentsフォルダに保存しましょう。
editor.html を改良
ただ字が書けるだけなら、わざわざ作ることはありません。このブログらしくスライドカーソルをつけてみます。スワイプするとそれに応じてカーソルが動く機能です。
あと、localStorageも使えることを発見しました。いろいろ応用できそうですが、とりあえず自動保存機能として実装。最後に閉じたときの状態を記憶します。
<meta name=viewport content=initial-scale=1,user-scalable=no>
<title>Editor</title>
<style>
body{color;black;background:ivory;}
#editor{font-size:20px;background:none;width:100%;height:100%;border:0;white-space:pre-wrap;}
</style>
<textarea id=editor></textarea><script>
editor.value = localStorage.editor || "";
editor.onblur=function(){
localStorage.editor = editor.value;
}
x0=0;
document.ontouchstart=function(e){
x0=e.touches[0].pageX;
};
document.ontouchmove=function(e){
x=e.touches[0].pageX;
d=document.getSelection();
if(x-x0>8){
d.modify("move","right","character");
x0=x;
}
if(x0-x>8){
d.modify("move","left","character");
x0=x;
}
}
</script>
まとめ
プライムデー 開催中のプライム会員限定キャンペーンなど
毎月プライムデーがあって、KindleFireが値引きされます。7月は16日。プライム会員に引き込む罠です。ここから逃れるのは困難を極める。石飛道子さんの『スッタニパータ』をオーナーライブラリ（月一冊UnlimitedのKindle本が対象）で借りてしまいました。うちは「ジャズと読書」なのに、どちらもFireがカバーしてしまう。
『スッタニパータ』と大乗への道
さらにプログラミングもできると「出口なし」です。この沼は深そうだ。
