2011年5月30日月曜日

WebStormのカーソル位置の単語選択機能

ヘルプのSelecting Text in the Editorにいろいろな選択方法が載ってますが、Select Word at Caretのカーソル位置から単語レベルで選択範囲を広げていく機能が結構便利。

デフォルトだとCtrl+Wで選択範囲を広げる、逆にShift+Ctrl+Wで縮める。
HTMLならクオーテーションで囲まれた属性値とか、JavaScriptだと意味がある感じ(単純に対応する括弧とかそういうのではなくて)で選択範囲を広げてくれるので、意外と使えそう。

Vimとかはこれよりもっと細かな操作ができた気がする。
HTMLだと何か普通だからJavaScriptの場合で撮ればよかったか…

2011年5月29日日曜日

WebStormの自動整形で中括弧を強制的につける

JavaScriptのいろいろなコーディングルールをまとめてみた | Web scratchでちょろっと言ってたように、自分は中括弧(brace){}を省略しない主義なので、WebStormの自動整形(Reformat Code)で、自動的にbraceを強制させるようにしている。

File | Settings | Code Style - Wrapping and Braces
から設定をおこなう事ができて、if, for, while, do () に対して設定項目があって、いずれもForce brace という項目になってる。
設定内容は次の三つから選べる。

  • Do not force - 自動的にはつけない
  • When multiline - 中身が複数行ならbraceをつける
  • Always - 常にbraceをつける

設定で全部Force braceをAlwaysにすると

if(true)
dosomething();
while(true)
dosomething();
for (;;)
dosomething();
do
dosomething();
while(true);

というのが、Reformat Codeをおこなうと下のように整形される。

if (true) {
dosomething();
}
while (true) {
dosomething();
}
for (; ;) {
dosomething();
}
do{
dosomething();
}while (true);

こういう感じでbraceの忘れはなくなる(逆にbraceは常についてしまうわけだけど)
どうでもいいことだけどdo...whileってbraceを短縮して書くことできるんだなー

Google検索結果にサイトが表示されないのが直った

なぜかsite:www.memetodo.co.cc - Google 検索に全く表示されない状況が続いてて、ドメインとBloggerたてたばかりだから載ってないのかなとか思ってたけど、今日になって急に表示されるようになった。

Webmaster Toolsで見てた感じだとクロールはされているし、robot.txtとかクロール拒否にはなってなかったので、インデックス自体はされてて検索結果に出ない感じになってた。

で、やった事としては以下のような感じ

まあ多分再審査をリクエストしたのが、反映されたような気がする。

理由は適当に、検索結果に表示されないと書いただけだし、最初に言ってたように単に時限的な問題だったかも知れない。

2011年5月28日土曜日

WebStormでのvar, let, const変数宣言の扱い

Greasemonkeyもう無理。付いていけない - hogehoge @teramako

を見て、WebStormだとletとか普通に扱えてた気がするなーと思って少し調べてみた。

2011-05-28-ss1

letやconstも特にエラーは出さずに宣言できる。
varで宣言した変数と同様にオブジェクトもちゃんと認識して補完候補を出すようになってる。

image

constは、constであることを認識しているようで、constで宣言したものに代入しようとするとエラーになる。

image

letはブロックスコープの外からでもletで宣言したものが補完候補に出てくるので、実際にletのブロックスコープを認識してるわけじゃなくて、varに置き換えてエラーにしないようにしてるだけかもしれない。

分割代入をサポートされてないことが悔やまれる…
以前、最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratchで言っていたようにE4Xはサポートされています。(こう見るとFirefoxの独自機能が結構使えてる)

2011年5月27日金曜日

なんでjavascript:voidにvoidが必要なのか

ブックマークレットなどでjavascript:void 内容という感じでvoidが入ってる理由を考えたことなかったというか、Bookmarklet BuilderHatena::Letなどを使ってたり、普段の癖から無名関数で囲って書いてたりしてたので素でvoidと書いた記憶がなかった。

javascript:(function(){/*内容*/})();

The void operator in JavaScript という記事を見て、初めてvoidという存在がブックマークレットでどういう機能をしているかと言うことに気づいた。

void expr;// undefined

というようにvoid演算子で評価した式はundefinedを返す。
そのため、voidなしでブックマークレットを書いた場合は式の返り値がページのコンテンツに入れ替わってしまって、真っ白なページが表示されたりする。

javascript:window.open("http://efcl.info/");//[object Window]
上の例だと、別(タブ|ウィンドウ)でURLは開くけど、元のページは[object Window]などと表示される。
そこで、voidを使えば元のページには影響なしで、式の評価だけをすることができる訳だ。
javascript:void window.open("http://efcl.info/");// undefined

それだけなんだけど、へーと思った。

ブックマークレット書いたときはHatena::Letに置いておくと便利です。
(よくブックマークレットは出典不明になりがちなので)

2011年5月26日木曜日

UbuntuでRictyフォントを生成

Ricty (リクティ)フォントがライセンス的な問題で生成スクリプトのみの配布になったようなので、以前WindowsからVM上のLinuxをSSH経由で利用する開発環境の構築 | Web scratchで作ったUbuntu環境でRicty (リクティ)フォントを生成してみました。

Rictyフォント自動作成スクリプト - yukke.org Diaryというものが既にあったので、これを使用することにしました。このブログに書いてあるshスクリプトを適当な名前(ricty.sh)で保存しておきます。
最初に必要なものをインストールしてからshを実行すると、同じディレクトリにRicty-*.ttfが生成できる。

X / _ / X <  sudo apt-get install fontforge unzip
X / _ / X <  sh ricty.sh

手動でやる場合はhttp://d.hatena.ne.jp/It_lives_vainly/20110518/1305699387あたりが参考になる。
Windowsの場合はgdi++系を使わないとまともにみえないと思います

2011年5月25日水曜日

Evernote Chrome拡張の本文抽出にはhatena-extract-contentが使われている

新しくなったEvernote Google Chrome エクステンション « Evernote日本語版ブログ

記事クリップ機能にページの本文の判定をするようになったとのことで、何のライブラリ使ってるのだろうと中身を見てみました。

Chrome拡張の保存場所は以下の通り

Windows
C:\Users\(ユーザ)\AppData\Local\Google\Chrome\User Data\Default\Extensions
Mac
~/Library/Application Support/Google/Chrome/Default/Extensions

image

見て分かるようにlibフォルダにExtractContentJSが入ってたので、はてなのextract-content-javascriptが使用されているようです。

一応中身も見てみるとevernoteContentClipper.jsで以下のように本文を判定、抽出に使用されている。


Evernote.ContentClipper.prototype.getArticle = function() {
if (!this._article) {
var ex = new ExtractContentJS.LayeredExtractor();
ex.addHandler(ex.factory.getHandler('Heuristics'));
var res = ex.extract(window.document);
if (res.isSuccess) {
this._article = res;
}
}
return this._article;
};
自分もGreasemonkeyで使っていましたが、普通のブログ記事なら殆どの場合で大丈夫な感じだったと思います。(Twitterとかそういう感じのはちょっと苦手な感じだった気がする)

WebStormで関数、変数の宣言箇所&参照箇所を探す

関数宣言にジャンプするのはdeclaration(Ctrl+B or Ctrl+クリック)で行える。
keymap > Go to > declaration でショートカットを設定変更できる。

image

逆に、変数や関数が使われている場所を検索するのにはFind Usage(Alt+F7)で行える。
ちょっとデフォルトのショートカットがちぐはぐな感じがするけど、コードを読むときにものすごく便利。

image

検索の範囲(プロジェクト内や今開いてるファイルのみなど)の設定や検索結果をタブにして開く(エディタのタブではなくて、下のように検索結果内でタブ表示)などもできる。

image

JavaScriptなどはStructureと同じように構造毎にまとめて表示したりするので、単なる文字列検索で終わってないところもいい感じ。

ついでに移動した後に

  • (Ctrl)+Alt+← で戻る(移動のundo)
  • (Ctrl)+Alt+→ で進む(移動のredo)

などもできるので、これを知っておくと検索した後も元の位置に戻りやすい。
最後に編集した位置に戻るにはlast edit location(Ctrl+Shift+Backspace)を使う。

2011年5月24日火曜日

PropertyDescriptorと[[extensible]]属性の関係

PropertyDescriptor自体の説明はES5, Property Descriptor解説 - 枕を欹てて聴くを見るのがいい。
obj.testPropertyみたいにアクセスするとき、 key -> valueという率直な関係ではなくてES3では見えなかったPropertyDescriptorというものが間にあり

key -> Property Descriptor
| attributes
| value
というvalueへの紐付けがおこなわれている。
そしてPropertyDescriptorは6つのフィールドを持っていて、これをES5ではObject.definePropertyなどで設定できるという標準化がされている。
  • Enumerable
  • Configurable
  • Writable
  • Value
  • Get
  • Set

この辺の解説はES5, Property Descriptor解説 - 枕を欹てて聴くを見ましょう。

で、これとは別(とは言うけど一緒に紹介されてる事多い)にオブジェクトの[[extensible]]という属性値があり、その値はObject.seal / Object.freeze / Object.preventExtensionsで変更できる。
Object.freeze ではPropertyDescriptorのwritable:false, configurable:false と さきほどの[[extensible]]の値をfalse(オブジェクトを拡張できなくする)にする。

ここで疑問に思ったのが、Object.freezeみたいにPropertyDescriptorと[[extensible]]を一緒に変更したりしてるのに、なぜObject.defineProperty(など)で[[extensible]]は設定できないんだろ?とか思った。

PropertyDescriptor
あまり参考にならないイメージ図

よくよく考えれば当たり前で、Object.definePropertyはProperty(Descriptor)を操作するもので、PropertyDescriptor内に[[extensible]]があるわけではないので、そういうものなんだろなと。
[[extensible]]はプロパティではなくオブジェクトにあるというイメージで。(JavaScriptでは全てがオブジェクトというアレが、ちゃんと仕様を読んでない人にはややこしくさせてる気がする)

2011年5月23日月曜日

Linus Torvalds Interviewを読んだ

Linus Torvalds Interview, Part II : Open Voices: The Linux Foundation Podcastのインタビュー音声を翻訳したものを読んだ。

Shut the fuck up and write some code - 科学と非科学の迷宮の記事を見て、読んでみようと思ったら場所が移動してたので、ちょっと探すのに手間取った。

http://linuxjf.sourceforge.jp/JFdocs/Open-Voices-Linus-Torvalds-Part-I.txt より

議論とコード

これを見たかったので読み始めた。

Linus Torvalds:
だけど最終的には、唯一重要なものは現実のコードと技術そのものだよ。
向上心もなくコードも書こうとしない人でもコメントはできるし、
こうするべきだとかああするべきだとか、そうしちゃいけないとか言うことも
できるけど、結局はそういった声は問題にならない。唯一重要なものは
コードなんだ。

人ってのは結局怠け者だから、多くの人達は議論してるだけでハッピーになる。
それに議論をしても、案を実現するコードは大抵一つしかなく、実際に
選択可能な選択肢はあまりないんだよ。

コミュニティについて

Jim Zemlin: ではちょっとコミュニティについて話しましょう。こうした
信用という面からコミュニティという言葉それ自身について質問をしたいと
思います。人々はコミュニティという言葉を、「そんな風にするな、それは
『コミュニティ』を乱すから」とか、「『コミュニティ』はこのような特定の
慣習を受け入れない」のように言い放ちますよね。

何を、どうやってコミュニティを定義していますか? つまり、コミュニティを
どのように見ていますか?

Linus Torvalds: コミュニティという言葉を使うのは避けたいね。この言葉は
色んな形で誤解を生むからね。あるひとつのコミュニティってものがあるわけ
ではないから、誤解させてしまうんだ。

....

結局コミュニティは外部要素になるんだよ。本当の答えはいつだって
コミュニティと協力するんじゃなくて、単にこの存在しないコミュニティの
一員として活動することなんだ。協力するんじゃない、一部となるんだ。

言葉の壁と文化の壁

Linus Torvalds: ぼく達は少し調べてみたんだ。6年以上に渡って開発者の
出身地を見て、開発者は人口の多い国から来るんじゃなくて、非常に高密度の
インターネットアクセス環境のある国から来る傾向が明らかになったんだ。
それが理由の一つさ。

確かに、中国に10億人います、インドに10億人います、って言うのは
簡単なんだ。でも中国もインドも開発コミュニティではあまり存在感を
発揮していない。

....

Linus Torvalds: 他の問題もあるんだ。言葉の壁と文化の壁は明らかに大きな
問題の一つだ。教育と同じぐらい単純な問題で、明白な問題でもあるかも
しれない。

この言語の壁は巨大な問題になってしまいがちなんだ。実際のところ、
アジア圏でインターネットがよく浸透している国々でさえ、さらに多くの
文化的な違いの問題があるかもしれない。インターネットの使用が非常に広く
普及しているところもあるし、それらの人々は明らかに高度な教育を
受けていているけど、結局はあまりオープンソースに貢献しないんだ。
カーネルにも、一般的に他のプロジェクトにもね。

そして少なくとも問題の一部は文化に関するもののように見えるし、どうにも
否定のしようがない。こうした人達のうち何人かは、文化の壁や言語の壁が
あっても積極的に参加するようになる。確かにそうした人はいるけど、これで
なぜ西欧とアメリカが最大の開発エリアになっているかということの大半の
理由は確実に説明できるよ。

文化の壁は言語の壁より大きいか。

モバイル業界について

何かこれはあー…って思った。

こうしたモバイル機器製造業者の多くがやってることはというと、
あるバージョンをとりあげ、普通はその時の最新バージョンをとりあげて
こう言うんだ、「OK、こいつがベースだ」それから5~6年の間特定の
プラットフォームで彼らは同じバージョンに長く留まって、必要に応じて
機能強化するんだ。

で、彼らが次期バージョン、次世代ハードウェアを作ろうとするとき、彼らは
世界中がこの二、三年間何か別のもので動いているという状況に陥ってるんだ。
彼らがそのバージョンに加えた修正は今日世界中で使われているバージョンとは
何も関係がなくなっているんだ。そして彼らは以前やってたことをやめる。
彼らは自分達の作品を全て投げ出し、一から始めるんだよ。

技術的で文化的な問題で、技術的で商慣習的な文化的問題。

Part2へ

http://linuxjf.sourceforge.jp/JFdocs/Open-Voices-Linus-Torvalds-Part-II.txt

Open Solaris と Sun Microsystems について

ぼくが Linux 開発で最初の頃からやってきたことの一つは、誰かがパッチを
送ってくるとき、彼らはそれらのパッチに対する全著作権を保持するように
することだった。誰も、ぼくだって他の人と同様何も権利を持ってないんだ。
ぼくがほとんどの人よりも多くのコードを書いているという点を除いてはね。
でも、ぼくがほとんどの人に言いたいのは、みんなにじゃないけど、あなたが
Linux 開発に参加するときの権利は、あなたが Linux に入れたものに比例する
ってことだ。

その中での一番

Linus Torvalds: ぼくには結構競争意識あるよ。ぼくは競争の力を心から
信じてる。それは人々のやる気を出す方法として本当に重要だと思ってる。
ぼくは間違いなくやる気が出る。ていうか、それはぼくのやる気を出すものの
一つなんだ、わかる? ぼくは一番になりたいんだ。

そして、実は、外部との競争よりも内部での競争の方が興味があるんだ。
例えば、ぼくが一番になりたいって言ったとき、ぼくは Linux を
Solaris と比較するんじゃないんだ。それは外部との競争の一つだから
ぼくにとっては二次的なものなんだ。ぼくには全く興味がわかないね。

ぼくが一番になりたいというのは、Linux において一番になりたい
ということなんだ。もし他の誰かが来て、「おい、俺は Linus よりいい
メンテナをやれるぜ」なんて言うとしたら、ぼくのやる気は際限なく上がる
だろうね。そのときこそぼくはみんなに示したいんだよ、
「いいや、ぼくこそが最高のメンテナなんだ」ってね。

Linux デスクトップについて

人には人のdesktopがある。

Linus Torvalds: うーん、幅広く使われるかどうかわからないけど、Linux
デスクトップは最初にぼくが Linux に手をつけた理由なんだ。ぼくは決して
Linux デスクトップ以外に注意を払ってきたことはないんだ。

サーバ市場は参入するのにとても簡単だった。少ししか負荷がかからないし、
非常に単純でよく理解されていて、デスクトップに比べて人々はサーバを
アップグレードするのに抵抗が少ないんだ。しかしぼくは決して Linux サーバ
を動かすことはなかったし、そうしたいと思ったことはない。それはぼくの
興味の対象じゃないんだ。僕はデスクトップ使い以外の何者でもないんだ。
ぼくは常に Linux をワークステーションとして動かしてきたんだ。

だから、ぼくはサーバを自分とは関係ないものとして見てると思う。ぼくは
膨大な数の開発者が Linux を同じように見てると思う。なぜならそれが
教えてくれる、そう、サーバは巨大な市場かもしれないとはいえ、
実際に開発者を見てみたら、開発者がいつも付き合っている相手は自分の
ワークステーション、デスクトップであって、そここそが本当に自分の
ドッグフードを食べたり(*)結果的に自分の努力の結果が実る場所なんだ。

(*訳注 eat your own dog food:「自分で自分の作ったものを試す」の意。)

未来について

ぼくが言いたいのは、本当の変化とは新しい使い方から来るってことなんだ。
コンピュータの全く新しい使い方は多分出てくると思う。なぜなら
コンピュータは押し下げられて安くなり、いずれはオペレーティング
システムの全体像を変えていくからなんだ。

それだけじゃなく、新しい形の要素が新しい入出力デバイスにあると期待して
いるんだ。実際に携帯電話にプロジェクタがつくようになったら、そのことが
人々がハードウェアについて考え始める方法を変えるだろうし、一方で、
ぼく達が交流する方法やオペレーティングシステムを使う方法を変えると
思うんだ。

引用は以下より

Linux JF (Japanese FAQ) Project.

Bloggerの新しい機能を使うにはBlogger in Draft

BloggerにはBlogger in Draftというドラフト版の管理画面を提供するページがあるので、新しい機能とかは先にこっちにくるらしい。

image

今だとスマートフォンの表示に対応する設定があったりする。

ドラフトという割には日本語訳もちゃんと出たり、新しい機能についてちゃんとポップアップでメッセージを出してくれたり丁寧な気がする。

Blogger in Draftのブログで新しい機能を告知しているようだ

2011年5月22日日曜日

TwitterのPINコードがコピペできなくなった

image

Twitterの認証ページが新しくなった or DMのアクセス権を細分化 ぐらいのタイミングでPINコードのページが変わってたみたいだ。

PINコードのページを見てみるとCSSのuser-selectを使って選択できないようにしている。
選択できないというフィードバックがないから分かりづらい…

#oauth_pin p {
-moz-border-radius: 5px;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-border-radius: 5px;
-webkit-user-select: none;
background: #f4f4f4;
border-radius: 5px;
color: #333;
cursor: default;
margin: 10px 0px;
padding: 15px 15px 15px 15px;
user-select: none;
}
#oauth_pin code {
-ms-user-select: text -moz-user-select: text;
-o-user-select: text;
-webkit-user-select: text;
cursor: text;
display: block;
font: monospace;
font-size: 500%;
font-weight: bold;
margin: 10px 0px 0px;
text-align: center;
user-select: text;
}
-moz-user-selectとか-webkit-user-selectとかは実装されてた記憶あるけど、
全てのブラウザで-x-user-selectが有効かは知らない。
たまにiPhoneアプリでPINをコピペする前提(入力エリアなくてクリップボード監視してるタイプ)のとかあった気けど、そういうアプリはやり方変えないとダメそう。
PCのブラウザでも何か不便なのでusercssでどうにかするべきかなー。

Google ChromeのXSSフィルタを無効にする方法

Chromeには4ぐらいからXSSフィルター(WebkitではXSS auditorというのが正式名称っぽい)があって、Chrome11で作り直されたのがデフォルトでオンになっているようです。

で、このXSSフィルターはコンソールに"Refused to execute a JavaScript script. Source code of script found within request."と吐いて、他に視覚的なメッセージを出さないで止めるので、XSSの検証とかだと逆に邪魔くさい感じになります。

XSSフィルターをオフにするには起動引数に --disable-xss-auditor と付け加えればいいみたいです。 Chromeは起動引数がアホみたいにあるので…

まあ普通に使ってるならオフにする必要性はない

無料のCO.CCドメインをBloggerで使う

.Co.CCドメイン(無料で使えるサブドメインみたいなもの)をBloggerで使うのは次が参考になる。

ss-2011-05-22-1

簡単にまとめると

  1. www.CO.CC のZone Recordsの設定項目へ
  2. Hostにはwwwありのドメイン、TypeはCNAME、valueはghs.google.com
  3. 次はHostにwwwなしのドメイン、TypeはA、valueはBlogger ヘルプに書いてある4つのIPアドレスを一つづつやっていく
  4. Blogger の設定へ
  5. 設定→公開からカスタムドメインの設定をする
  6. wwwありのドメインを入力してCAPTCHAを入れて更新

というわけで、このブログは.Co.CC+Bloggerの提供でお贈りします。