2012年12月27日木曜日

ブックマークレットで iOS，Android 端末でも綺麗なアスキーアート（AA）を表示しよう！

このブログを開設する前に作成しました Kuma_Lite ブックマークレット（やる夫之書さん，ぶらりとやる夫さん他多数のブログでご紹介いただきました．ありがとうございます）でのアスキーアート表示のクォリティに不満があったため，今回ブックマークレット & フォントを一から作り直しました．フォントサイズは 650 KB 弱約 560 KB（2013 年 1 月 12 日現在）と Kuma_Lite の 140 KB より増えていますが，ブラウザ自体のキャッシュ機能 + 最近の通信事情を考えますと実用に耐える範囲内でしょう．


Android 端末でのブックマークレットの登録方法は
  1. 上記 “javascript:~” で始まる文字列をすべて選択してコピー
  2. 「お気に入り」登録画面を開き，1. でコピーした文字列を新規お気に入りのアドレス欄にペーストして保存
です（2013 年 1 月 4 日追記）．iOS 端末でのブックマークレットの登録方法はこちらのページをご覧ください（むぅもぉ.jp さんに感謝！）こちらのページの「ブックマークレットの登録方法」の項目を参考にしてください．

ブックマークレットを登録しましたら，
  1. 見たいサイトを開く
  2. 「お気に入り」を開き，先ほど登録したブックマークレットを起動
することにより処理が始まります．

使用前：
元  URL: http://www.twitaa.in/?v=pftf

使用後：


不具合報告，要望等はこの記事のコメント，もしくは Twitter の @keage までよろしくお願いします．

【2013 年 1 月 25 日追記】
現在までに動作確認のとれた OS・ブラウザ
  • iOS の Safari，UIWebView を用いたサードパーティ製ブラウザアプリ（Opera Mini は不可）
  • Android 4.x の Chrome
    （【2013 年 2 月 23 日追記】本記事のコメント欄にて Chrome では動作しない，との報告もございました）
  • Android 2.x の 標準ブラウザ，iLunascape，Dolphin Browser

【2014 年 1 月 18 日追記】
したらば掲示板が & を & にエスケープして数値参照文字を使った AA が崩れる問題に対応
【2015 年 4 月 24 日追記】
iOS での登録方法を紹介したページへのリンクが切れていたのを修正
投稿者 時刻:
ラベル: ,

12 件のコメント:

  1. 匿名2013年1月4日 13:48

    初めまして。
    iphone でkuma_liteブックマークレットを使い、やる夫スレを楽しませてもらっています。ありがとうございます。
    この度nexus7を購入しまして、こちらでもやる夫スレを見たいと思ってこの新しいブックマークレットを試してみたのですが、うまく表示されません。iphoneと同じやり方でやっているはずなのですが、 chrome、ドルフィン、sleipnir,operaどれもだめでした。iphone ではブックマークレット適用→一度文字が消える→変えるトが変わる という動試してみたところ、s7(android)だと適用してもなにも反応がないようです。ちなみに、urlをQRコードにかえるブックマークレットをためしてみたところ、正常に動きました。どのような原因がかんがえられるでしょうか？ご返事もらえたら嬉しいです。

    返信削除
  2. 匿名2013年1月4日 13:52

    すいません、文章がおかしくなりました。以下訂正です。
    iphone ではブックマークレット適用→一度文字が消える→フォントが変わる という動作なのですが、nexus7(android)だと適用してもなにも反応がないようです。

    返信削除
    返信
    1. Unknown2013年1月4日 22:51

      コメントありがとうございます．
      先ほど Android SDK のエミュレータでブックマークレットの挙動をテストしてみましたら，
      Android 端末のブラウザでは半角スペースや「{」などの文字にパーセントエンコードを施したブックマークレットが機能しないため，先に紹介したリンク経由での登録は駄目だということが分かりました．

      というわけで，この度はお手数ですが，記事内に Android 端末用として追記された手順に沿って改めて登録作業を行なっていただけますでしょうか？
      私の Android 4.0.1–4.2 のエミュ環境 + 標準ブラウザでは動作を確認しましたが，
      もしこれでも駄目，ということでしたら再度この記事のコメント欄にその旨を投稿して頂けましたら幸いです．

      削除
  3. 匿名2013年1月5日 9:11

    さっそくのご対応ありがとうございました！
    Android用手順で試してみたところ、正常に動作しました。
    (使用ブラウザはchromeです。他のブラウザも試してみる予定です)
    これで大きな画面で楽しめます！改めて、ありがとうございました！

    返信削除
  4. 匿名2013年2月17日 23:49

    このページを見つけて早速ブックマークレットを使ってみましたが上手く動作しません。
    上記の文字列をコピペしたのですが起動しても何も反応がないです。
    使用環境はAndroidのGoogle Chromeです。

    返信削除
    返信
    1. Unknown2013年2月23日 3:25

      コメントありがとうございます．
      そして 1 週間ほどコメントが投稿されたことに気が付かず放置してしまい，
      申し訳ありませんでした．

      現在のところ Chrome ではひとつ上のコメント以来 2 名の方から動作確認をいただいておりますが，
      うまく作動しない，というフィードバックは初めてでして，私のほうでも確認を急ぎたいのですが，
      あいにく手元には Chrome が動作する Android 端末がございませんので，
      原因特定にはしばし時間がかかりそうです．
      （原因が特定されるまで，Chrome の動作確認については但し書きを付記致します）

      それまでは弥縫策ではありますが，AA 閲覧の際には例えば iLunascape や Dolphin Browser など
      他のブラウザをお試し頂けますでしょうか？
      これらのブラウザにつきましては，Android OS 2.3.4，IS05 において動作確認を致しております．

      何か進捗がありましたら，こちらのコメント欄もしくは本ブログの新しい記事にて報告致します．
      今後ともよろしくお願いします．

      削除
    2. 匿名2013年2月24日 18:44

      ありがとうございます。
      他のブラウザで試してみて動作したら報告します。
      ところで上記のブックマークレットはPCでも動作しますか？

      削除
    3. Unknown2013年2月25日 1:50

      返信ありがとうございます．

      >上記のブックマークレットはPCでも動作しますか？

      手元に Windows がないので Windows でどうなるかは分かりかねますが，
      Mac でしたらば Opera，Safari，Chrome，Firefox それぞれの最新版で
      正常に作動することを確認致しました．
      （2013 年 2 月 25 日現在）

      そして Android の Chrome でブックマークレットが動作しない件ですが，
      先ほど「もしやこれが原因か？」と思われる箇所に修正を加えました．
      手元に実機がないのでこれでうまくいくかどうかテストしておらず申し訳ありませんが，
      もしよろしければ一旦 Chrome のキャッシュを消去した上で，
      再度どこか AA の存在するページ上でブックマークレットを作動させてみて頂けますでしょうか？
      （キャッシュの消し方は http://penchi.jp/archives/2028.html が参考になるかと思います）

      よろしくお願いします．

      削除
    4. 匿名2013年2月26日 11:31

      いくつかのサイトで使用してみたら使えました。
      ありがとうございます。
      文字数の多いサイトだと読み込みに時間がかかりますがこれは仕方ないですね。

      削除
  5. mine2014年1月25日 9:13

    今更のコメントですが、nexus7(2013)での起動方法がわかったので、記載します。
    Android4.4まで確認済です。
    デフォルトブラウザのChrome場合、ブックマークが新しいタブで開いてしまうため、上記のアドレスをブックマークで起動しても、AAは表示されません。上記のアドレスを起動させたいタブに直接アドレス入力するとことで、これを起動できました。
    しかし、これではあまりにも手間なので、Firefoxの方法も記載します。
    Firefoxの場合、起動させたいタブのアドレスバーをタップし、ブックマークを開きます。
    上記のアドレスのブックマークを開きますが、開いただけでは表示されません。
    ここで一回他のタブに移動し、再度、先のブックマークを起動したタブに戻ってくることでAAがきちんと表示されます。

    返信削除
  6. 匿名2015年3月24日 3:18

    android4.4 ブラウザはChromeを使用しています。
    記事のスクリプトをURLとするブックマークを作成して、ブックマーク一覧でタップしても画面が切り替わりません。
    標準ブラウザではこれで問題なくスクリプトが反映されました。

    しかし、ChromeのURL入力欄に作成したブックマークレットの名前を一部打ち込むことでずらずらと候補に出てくるので
    そこで作成したブックマークを選択するとスクリプトが反映されました。
    以上、報告でした。

    返信削除
  7. theateryaruo2016年3月8日 22:49

    初めまして。
    Saitamaarなら非Windowsでもとても綺麗にAAを表示できるので重宝しております。
    自分が運営するやる夫まとめブログでもSaitamaarを利用したいと思っているのですが、
    Saitamaarは自サイトにアップロードして利用してもいいのでしょうか？

    Data URIにしたSaitamaarをJavaScriptで読み込む形にすれば
    別ドメインのFC2ブログのサーバにSaitamaarをアップロードして利用できるので、
    その形でSaitamaarを使いたいのです。

    返信削除

登録: コメントの投稿 (Atom)