Archive for the ‘その他’ Category

AsciiDocでbackendがHTMLかどうかを判定する

AsciiDocではHTMLも直接埋め込む事が出来ます。

++++
<iframe src="http://ghbtns.com/github-btn.html?user=azu&repo=promises-book&type=fork&count=true&size=large"
  allowtransparency="true" frameborder="0" scrolling="0" width="120" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=azu&repo=promises-book&type=watch&count=true&size=large"
  allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
++++

しかし、このHTMLの埋め込みはbackend(出力形式)がHTML以外の時にあると逆に困ってしまいます。 (PDFとかの場合パースエラーの原因になったりする)

そのため、backendに何が指定されたかを判定して埋め込む必要があります。

AsciidocにはSystem Macrosというものでif分岐が出来ます。

定義されてるかどうかの判定をするifdef

ifdef::<attribute>[]
trueの時
endif::</attribute><attribute>[]

変数の比較をして判定するifevalがあります。

rs458が2かどうか

ifeval::[{rs458}==2]
:
endif::[]

本題に戻ってifevalを使って--backendで指定されたものを判定すれば、 htmlに出力してるかがわかります。

ifeval::["{backend}" == "html5"]
++++
<a href="https://github.com/azu/promises-book/" style="position: fixed; top: 0; right: 0;border: 0;"><img style="border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" /></a>
++++
endif::[]

という感じで書いておけば、$ asciidoctor -b html5 index.adocでビルドした時だけ埋め込むことが出来ます。

WebStorm(JetBrains製IDE全て)が75%オフのセールをしていました[終了済]

マヤ暦の終わりのセールということでIntelliJ IDEAを始めWebStormAppCode等JetBrains製のIDEが全て75%オフになっています。

Read the rest of this entry »

私と電子書籍

おそらく始まりは2003年頃のJ-SH53で、青空文庫形式のテキストをルビあり、縦書き表示できるテキストビューアーを使って読んでいた

他にも端末としては802SH、V402SH等のシャープ系を使っていた。

2006年頃に携帯電話をW41CAに変えて、これにはテキストビューアーはないかわりにドキュメントビューアーはついてて、これは重たくてまともに使えなかった記憶がある。
Flash Liteを使って用意したテキストを動的に読み込んで読むテキストビューアーを作って使っていた。
縦書きは無理だったので、横書きでタイプライター的な表示をするようなFlashだった気がする。

2012 08 18 01 41 45

2007年頃にザウルス SL-C750(640×480 3.7”)をオークションで購入して結構使ってた。(この頃に既にザウルスは廃れ気味だったけど)
メインはaBookReader(画像ビューアー)とブンコビューア(青空文庫形式対応テキストビューアー)を使っていた。 (たまに文庫エディターも)

どちらのアプリもとてもいいできて、特にブンコビューアは挿絵記法とか対応してないのが少し残念だったけど完成度が高かった。
DF パブリフォントを使って、ザウルスのジョグダイアルでのページめくりも合わさってとても読みやすかった

NewImage

NewImage

ブンコビューアの今いるページの位置を四角で表示するルーラー機能などとても良く出来てた印象。
(また後の方で出てきますが、この機能はMeTilTran等で有名なNo.722氏に伝えて、MeTilTranなどにも実装したもらった)

処理ページ数に応じて、出力画像にページ位置を示すマークを出力
MeTilTran V0.8β: No.722

aBookReaderも色変換や先読みなどもできて、画像ビューアとして結構よくできていた。
SL-C750(640×480 3.7”)は解像度的にそのままスキャンしたものを見るには難しいので、MeTilTranを使って画像を再配置したりして読んでた。

NewImage

2009年頃にLOOX U/C30N(1280×800 5.6”)を買って、普通のPCなのでマンガミーヤとかビューアソフトウェアを使って見るようになった。
ちょっと重たかったけど(565gなのでiPadよりは軽い)、ビューアとしては十分な感じだったので、PCらしく読書記録を付ける所に色々手を入れていた。 
要はスクリーンショットを撮って記録を付けるという感じで、大体メディアマーカーで楽しく読書管理するで書いてる感じにしていた。
実装的にはNILScriptで範囲指定のスクリーンショットを撮って、自動でファイルを分類して、Dropboxに放り込んで参照できるようにするスクリプトを書いてた。

NewImageNewImage

2012年頃にPRS-T1(600×800 6”)を買って、Readerというデフォルトがビューアー(+管理)となってるけど、実体はAndroidなので、RootをとってAndroidとして利用してる。
Readerアプリもpdfやepubなら辞書付きで悪くは無いけど、画像ビューアーはしょぼいのでPerfect Viewerを使ってる(Sony Readerのキー配置に合わせたModified versionを利用)
LOOX Uみたいにスクリーンショットをガシガシとって分類する方法がわからないので、読書記録を付けるのはおろそかになったけど、
端末として軽いし電子ペーパーなのでバッテリーも長持ちするのは良い感じ。
(PRS-T2はハードキーが解像度がそのままなのと、ハードキーが微妙そうなので避ける予感がする)

読書端末以外だとパソコンで、主に技術書ぐらいしか読まないけど、物理本の技術書は殆ど買わないで、できるだけ電子書籍で販売してる物を買ってる。
海外の技術書だと電子書籍の方が先にでるし、情報的にも読みたいものが多い気がするので積極的に読もうとはする。
技術書で電子書籍を選ぶ理由は、電子書籍なら辞書引いたり検索できたりするので、基本的に電子書籍以外を避けるようにしてる。 
(電子版がでない事が予測されてどうしても欲しい場合妥協する…)

大体10年ぐらい、本といったら自分の中では電子書籍が中心となっています。

クリッカブルなボタンとWAI-ARIAのrole="button"について

前提知識として以下が必要です。

clickイベントに使うためだけに<a href=”#”>text</a>とか(下の例の1,2番目)やるのが嫌いで、どうやるのがスマートorシンプルなんだろと思って書き出したもの。input、button 要素がでてこないのはスタイルシート考えるのが面倒で何となくです。button要素をCSSでリンクのようなデザインにできるならそれでもいいじゃないでしょうか。

1番目は今時ない気がするし、1,2番目は状態が遷移しないのにhref指定してると、ミドルクリックなどで別のページとして開けたりしちゃうのでそれを抑制するコードも必要になるのが何か嫌で、3番目当たりが個人的には好きだった。(4番目は何か気持ちわるい)

<div><a href="javascript:void 0;">javscript:ボタン</a></div>
<div><a href="#">#なボタン</a></div>
<div><a role="button">hrefがないroleボタン</a></div>
<div><span role="button">リンクじゃないspanボタン</span></div>
動作的には問題ない気がするけど、ここで、A要素は元々nativeとして持っているroleがrole=”link”で、それをrole=”button”で上書きできるのかが気になった。
そもそも、role=”link”とrole=”button”の違いは何かというとlinkの項を見るとわかるように、押したことによりブラウザのフォーカスやlocationが変わらないなら、それはrole=”button”を使うべきだと書いてある。

Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0

そして、A要素のroleはnativeでlinkですが3.2.5 Content models — HTML Standardを見ると、 link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, treeitem のいずれかのroleであれば上書きすることができると書いてあります。(そう読み取れたんだけどあってるのかね)

image
なので、role=”button”なA要素は仕様に反していないはず。
<a role="button">hrefがないroleボタン</a>
WAI-ARIAの方にもいろいろ書いてあるんだけど、英語力不足で読み取れない…
日本語版は一個古い感じなので、内容も結構違う感じする。

何で、上書きできるかが気になったかというとjavascript scheme でボタンを作るのは ? | ヨモツネットのコメント欄で、できないかのように読み取れる内容があったため。多分多分、strong native semanticsというのはa要素が本来持っているのはlinkというroleの事で、<a role=”button” />のようにそれぞれのa要素におけるroleは上書きできるけど、a要素本来のlink(strong native semantics)というroleは上書きできないよって話なのかなーとか思った。(仕様読んでないので自信ない)

ちなみに、jQuery UIの$.button()は<button role=”button”>という感じでbutton要素を使用している。

他のUIライブラリも見てるみると、Extjs,Google Web Toolkit,Yahoo! User Interface Library (YUI)もbutton要素を使っていた。(role=”button”は省略してる感じのが多い)
UIライブラリはスタイルとかとセットなので、roleも意味がはっきりしたものとって後はスタイルやった方が良さそうだしね

WAI-ARIA対応のライブラリはこの辺を見た

というわけで、ここに書かれている内容はあまり自信がありません。以上

閲覧者が何をテキストコピーしていったか監視するスクリプト

サイトに訪れた人がどんな文章や単語をCtrl+Cや右クリックから選択してコピーしていったのかを調べるスクリプトです。

Webページ上のテキストコピーを監視し, 貼り付けにはリンクバックを付けるTyntが$8Mを調達
http://jp.techcrunch.com/archives/20100416tynt-gets-8-million-for-ctrl-c-action/

この記事を読んでどんなものをコピーしたのかを解析すれば面白いと思ったので、かなり適当にでっち上げてあります。
言語はJavaScript+PHPで結果をtxtファイルにするという適当な感じです。

上のファイルをダウンロードすると

copylogger
├──copylogger.js  
└──dataStorage.php

となっているので、二つのファイルを同じ場所において(もしくはフォルダごとアップして)、

<script type="text/javascript" src="http://example.com/lab/copylogger.js"></script>

みたいにjsファイルを読み込んでおくと、テキストコピーに反応して、log.txtに

コピーページのタイトル<>コピーページのURL<>コピーした文章<>コピーした時間

という感じで出力されていきます。

正直、見やすくもなく実用的でもないですが、コピーされてる文章からどういう行動をとってるのかが分かって面白いです。
例えば

「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>blogs.yahoo.co.jp<>2010/4/19 20:21
「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>fc2.com<>2010/4/19 20:22
「RefControl」でリファラを偽装しておくべきサイト | Web scratch<>http://efcl.info/2009/0923/res1352/<>plusd.itmedia.co.jp<>2010/4/19 20:22

という感じのlogがあると、このページには登録すべきサイトをまとめたテキストとインポート方法も書いてあるのに一個一個コピーしてるところを見ると、気づかなかったのかもしくはすべてを登録する必要はないからコピペしてるのかなーとか想像できます。

まあ、copyloggerって名前にしてるように閲覧者は気持ちよいものではないと思うので、お遊び程度にしてみた方がいいかもしれないです。(PHPファイルの方も作りが適当なので安全か怪しいし)

JavaScript部分の参考資料

<script>タグから読み込んだjsのディレクトリを取得 – prog*sig
http://efcl.info/adiary/%3cscript%3e%e3%82%bf%e3%82%b0%e3%81%8b%e3%82%89%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a0js%e3%81%ae%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e3%82%92%e5%8f%96%e5%be%97

TwitterのユーザーページからTwilogをチェックするGreasemonkey

TwilogというTwitterのつぶやきを日付毎に記録してくれるサービスが便利なので、
twitterのユーザーページ(https://twitter.com/azu_re )とかからそのユーザーがTwilogを利用してるかをチェックするGreasemonkeyを書きました。

large

ユーザー名の横にアイコンがでる

Twilogに登録していると、ユーザー名の隣にアイコンを表示します。


登録してるかを判定するAPIがないかなーってつぶやいた作ってくれたみたいなので、それを使わしてもらっています。

ユーザーが登録済みかを判定
true : 1
false: 0
e.g)http://twilog.org/user-exist.cgi?id=azu_re // 1

LDRではてなブックマーク拡張を通してはてブのコメントをみるTomblooパッチ

ややこしいタイトルになってますが、HatebuCommentなどのLDR上ではてブコメントをみる機能を
Tomblooはてなブックマーク拡張を使って同じ事をするTomblooパッチです。

  1. Tombloo
  2. はてなブックマーク拡張

をインストールしておく必要があります。 ((元々両方を使ってる人向けが前提だったり))

ここからインストール

リンク上で 1)右クリック 2)tombloo 3)tomblooパッチのインストール で簡単にインストールできると思います。
初期設定のショートカットキーはSHIFT + Dになってるので適当に変えて使ってください。

利点としてははてな公式の拡張を使ってるので仕様変更には強いぐらいだと思います。
何か落ちやすかったりするのでイマイチかも。

 

<a href=”http://d.hatena.ne.jp/ABCbo/20090727/1248697439″>HatebuComment</a>

iPhoneであとで読む&PCとも連携する

Instapaperというウェブサービスを使用する事で簡単にiPhoneでもあとで読むが実現できます。

iPhone用のアプリもあり、ブックマークレットで”あとで読む”サイトを追加していくことができる。
アカウントもユーザネームだけで使用する事ができるので、パスワードなどの登録手続きはありません。
iPhoneからの閲覧はアプリ上から行えて、safariで見ることもできる。

また応用すれば簡易的なTODOみたいなものも実現できます。
InstapaperにTODOを追加するブックマークレット書いた – anatoo勉強記

PCの連携が簡単なのでとても便利。

livedoor クリップのブックマークレットを新しいタブで開くようにする

最近livedoor クリップも使うようになった。
はてブみたいにGreasemonkeyなどがたくさんあるわけではないけど、基本的な機能ができていて使い分けすれば結構いけてるSBMだ。

登録方法が公式のブックマークレットしか見あたらないので、少しだけ改造して新しいタブで開くようにした。

clip!

上のリンクをブックマークツールバーにD&Dすればいいと思う。
Firefox3でしか動作確認はしてません。

Firefoxのタブをファビコンで見分けやすくするアドオン

大量のタブを開いているとタブの文字幅が小さくなったり、単純にごちゃごちゃして見づらくなる。
そんな時にタブをファビコンで見分けやすくするアドオン。
これとあわせて見ると面白いかも。

Firefoxでタブの使い勝手を大きく変える5つのアドオン – Web scratch
http://efcl.info/2008/0514/res182/

Faviconとはサイト毎のアイコンでアドレスバーのとこにでてる小さな画像の事です。
有名なサイトなんかだとファビコンをちゃんと設定してありますが、設定していないサイトも多いです。
ファビコンがあるサイトでないサイトがタブバー内に混在してると分かりづらくなるので、こちら側で適当なファビコンを作ってしまうアドオンを紹介。

  1. IdentFavIcon

IdentFavIconはサイトのドメインネームからCRC32でハッシュを作り、適当なファビコン画像を割り当てるアドオンです。

ハッシュで分けているので重複する事はほとんどないです。

  1. HashColouredTabs

HashColouredTabsはファビコンの部分に一色の画像を表示するアドオンで、元から表示してあるファビコンを上書きして表示する事もできます。

使ってるタブ関係のアドオンによってはファビコンがないとタブサイズに違いがでてしまうことがあるので、そういうのを防止する意味でも導入する価値はありそうです。

プロフィール: azu(アズ)
JavaScriptやObjective-CやWeb系色々について。
  • OS:Windows Vista, 7、Max OS X
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
  • azu_re
  • メールアドレス(Twitterの方が確実)
  • info@ドメイン名
リンク