#chiroruLab

趣味と日々の雑記録

iPadのSafariをメモ帳にする「Write Space」

JavaScript iPad mini iOS ブックマークレット Write Space

f:id:chiroru_27:20131110201406j:plain
ネットを見ている時、何かをメモしたくなることってありますよね。
ただわざわざアプリを立ち上げるのも面倒...
そんな時に便利なのが簡易メモ帳の「Write Space」

フォントやカラー、背景色、幅などなど...。「Write Space」ではエディタの多くの要素を自分好みに指定できます。
その変更は次回の起動時にも受け継がれるので変更は一度すればOK！

（Textwellにも転送できますよー）


chromeの拡張機能、Write Spaceと似たような機能をiPadでも使えるようにしてみました。
Chrome Web Store - Write Space

DEMOページを変更しました。

どうも、@chiroru_27 です
今回はSafariで使えるメモ帳を作ってみました〜
見た目に関しての自由度は結構高めな面白いやつ。「Write Space」といいます。
残念ながらブックマークレットには出来なかったので、オフラインで使いたい時はリーディングリストから起動して下さい。

Write Space

f:id:chiroru_27:20131110203749j:plain f:id:chiroru_27:20131110203748j:plain
例えばこんな感じ。デフォルト こっちは、ホワイトを基調としたデザイン

DL

(´；ω；｀) ブックマークレットには出来ませんでした・・・。無知って悲しい。
方法を知っている人がいたら、教えてもらえると嬉しいですm(_ _ )m

本体

Dropbox - index.html
ファイルをDropboxに置く場合は、Publicフォルダ内において使ってください。
上のDEMOもデータはlocalStorageに保存していますが、不安な人はこっちだけ使って下さい。

ブックマークレット

新規タブで「Write Space」を開きます。ファイルのURLにアップしたファイルのURLを入れて下さい。

javascript:window.open("ファイルのURL",null);

使い方は以下の通りです。

エディタ設定は画面を右にスワイプ（1本）

f:id:chiroru_27:20131110201406j:plain

複雑なことをするのが面倒だったので、コマンド形式にしました（笑）

[name],[value] という形で入力します。
例えば、幅を変更したいなら、”width,60%” こんな感じ。

設定画面でつかえるコマンドはこちら

  • clear

色々な情報を削除できます。使い方は clear,all など。

  • all
    • 全ての情報を削除。
  • text / color / bgcolor / font / fontsize / width / define
    • 指定したvalueのデータを削除
  • color

文字の色を変更できます。使い方は color,#ddd など。

  • #ddd / black など
    • cssで指定するように書けば使えます。ただrgbでの指定は「,」があるので使えません。
  • bgcolor

背景の色を変更できます。使い方は bgcolor,#ddd など。

  • #ddd / black など
    • cssで指定するように書けば使えます。ただrgbでの指定は「,」があるので使えません。
  • font

フォントを変更できます。使い方は font,Hiragino Kaku Gothic ProN など。

  • cssで指定するように書けば使えます。Monaco など
  • fontsize

フォントの大きさを変更できます。使い方は fontsize,20px など

  • cssで指定するように書けば使えます。18pxや1.5em、large、medium、10%など
  • width

幅を変更できます。使い方は width,60% など

  • cssで指定するように書けば使えます。600pxや100%など
  • help

使えるコマンドを確認できます。help で実行

  • data

設定してある情報を表示します。data で実行

転送設定は画面を左にスワイプ（1本）

f:id:chiroru_27:20131110211522j:plain
[option],[value] という形で入力します。例えば、Textwellへの転送方法を置き換えにしたいなら、”define,replace” こんな感じ。

設定画面でつかえるコマンドはこちら

  • define

転送の設定を変更します。使い方は define,add など

  • add / insert / replace で指定できます。
  • add

現在の転送設定を変更せずに、Write Spaceの全文をTextwellの末尾に追記します。
使い方は add で実行

  • insert

現在の転送設定を変更せずに、Write Spaceの全文をTextwellのカーソル位置に追加します。
使い方は insert で実行

  • replace

現在の転送設定を変更せずに、Write Spaceの全文をTextwellの内容と置き換えます。
使い方は replace で実行

  • help

使えるコマンドを確認できます。help で実行


本文転送は画面を上にスワイプ（2本）

f:id:chiroru_27:20131110215636j:plain

  • Textwellに送る
    • 設定したオプションでTextwellに送ります。オプションは上の設定で変更できます

本文クリアは画面を下にスワイプ（2本）

f:id:chiroru_27:20131110215635j:plain

  • クリア
    • 全文削除

スワイプカーソル

入力中、指をスライドするとカーソルが移動します。
2本指なら選択開始です。左右どちらにも好きなだけ移動できます。
範囲選択中、3本指（または1本指）でスワイプすると選択範囲を移動できます。

localStorage使いまくり。

テキストも設定も保存されるので、一つのアプリのような感じで使えます。ホーム画面に置いても便利かも。
続きから書けることのメリットってすごいですね。どんどん使い道が思いついちゃう。
chromeではテンプレート置き場として重宝しました〜。今回は何に使おうかな。

(´・ω・｀)以上、@chiroru_27 でした！

後談。
ブックマークレットに出来ると思って作ってたから、それが出来なかったのがショックでショックで・・・。
dateスキームとかそういうのにすれば簡単に動くと思ってたのに・・・orz