タグ

ブックマーク / hail2u.net (21)

  • たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net

    僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例

    たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
  • 結局どうすればいいの? - Dive Into HTML5

    Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で

  • Web開発周りのVimの設定

    HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ

    Web開発周りのVimの設定
  • Git Cheat Sheets JP

    設定 基ランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ

  • hail2u.net - Weblog - 詳細なテキスト サービスをオフにする

    PCの買い替えと共にWindows XPになってからけっこう経ちました。最近は弱めのClearTypeとかなかなか良いかもとか思いはじめてたりとか。ただ、ウィンドウを切り替える時とかフォルダを新しいウィンドウで開く時とかにつっかかる感じがたまに起こったりするのがなんだかなーとか思ってたら、どうやらctfmon.exeってーのが常駐していることに原因があることが多いらしいですよ。 ctfmon.exeは「詳細なテキスト サービス」というよくわからないものの実体のようで、 「コントロール パネル」を開く 「地域と言語のオプション」を開く 「言語」タブに切り替え 「詳細」ボタンを押す 「詳細設定」タブに切り替え 「詳細なテキスト サービスをオフにする」をチェック 「OK」ボタンを押す 「OK」ボタンを押す という手順で終了させることができます(Windows XP SP2ではこうですが、SP1以

    hail2u.net - Weblog - 詳細なテキスト サービスをオフにする
  • hail2u.net - Weblog - Simple Single Sign-on

    Microsoftの.Net Passportを初めとして、いわゆるシングル・サインオンという分野で大成功を収めたものはあまり聞かない(僕が知らないだけ説)わけですが、手軽にシングル・サインオン的なことを実現できるシステムをJavaScriptで実現してみたとかそんなものが、Simple Single Sign-onです(リンク先はFlashムービー)。 技術的には単純明快で、マスター・パスワードとサイトのURL(やドメイン)をコロン(:)で連結した文字列をMD5を利用して(デフォルトでは)8文字のパスワードを生成するというもの。つまり、あるURL(やドメイン)やドメインに対するパスワードを自動生成するシステムなわけです。 Bookmarkletという手軽な手段だけでも実現可能になっているので、パスワードが必要なあるサイトにアクセスした時、パスワード入力フォームにフォーカスをあわせてBoo

    hail2u.net - Weblog - Simple Single Sign-on
  • 正規表現のeオプションをJavaScriptでエミュレート

    Perlなどの置換系の正規表現ではeというオプション(フラグ)をつけると、置換後の文字列をプログラム・コードとみなしてくれるわけですが、JavaScriptのreplace()の第一引数で指定する正規表現にはeオプションなどというモノはありません。しかし、replace()の第二引数である置換後の文字列にはStringオブジェクトや文字列リテラル以外にも関数を指定することもできるので、事実上eオプション相当のことが実現できます。エミュレートというのは正確ではない気がするけど気にしない。 具体的には、 var s = "asdf123asdf123456asdf123asdf"; document.write( s.replace( /123/g, function (num, idx, old) { return parseInt(num) + 333; } ) ); という感じ。上記例で

    正規表現のeオプションをJavaScriptでエミュレート
  • Yahoo! Search Web ServicesのJSON(P)を利用したサイト内検索

    Yahoo! Search Web ServicesのJSON(P)を利用すれば、JavaScriptのみでサイト内検索が実現できる上、Ajax的にページ遷移無しで検索が実行できる。Google AJAX Searchが内部で利用しているJSONPらしきアレを利用するケースと違い、こちらは公式にアナウンスされているのでおおっぴらに利用できる。というわけで、ほとんど同じタイトルでほとんど同じネタを連続で書いてみる。 実装は、ひとつ前のエントリでもリンクを張っておいたサンプル・ページで利用しているJavaScriptファイルのような形になる。 Yahoo! Search Web ServicesのWeb Search APIへのリクエストは、 http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid={アプリケーションID}

    Yahoo! Search Web ServicesのJSON(P)を利用したサイト内検索
  • hail2u.net - Weblog - Google AJAX Search APIのJSONPを利用したサイト内検索

    Google AJAX Search APIは、動的にGoogle検索結果を自分のページに挿入することができるAPI(あまり使っているサイトを見ないけど)。Ajaxっつっても内部はJSONP(みたいなもの)だったりするので、普通にGwebSearchクラスのsetSiteRestriction()メソッドを使うのではなく、JSONPを直接叩いてサイト内検索を実装することもできる。もちろんサイト内検索に限った話ではないけど。 Google AJAX Search APIのGwebSearchクラスによる検索は、 http://www.google.com/uds/GwebSearch?callback={コールバック関数名}&context=0&lstkp=0&hl=ja&q={検索文字列}&key={Google AJAX Search API key}&v=0.1 というURLへリクエス

    hail2u.net - Weblog - Google AJAX Search APIのJSONPを利用したサイト内検索
  • JSONPに同期リクエスト

    コールバック関数を指定する形のJSONPへforループなどで複数回リクエストする場合、コールバック関数の実行される順はforループで回した順と一致するとは限らない(Opera除く)。そのため何番目にリクエストした結果に実行されたコールバック関数なのかといった処理状況をコールバック関数内で知ることが面倒だったりする(不可能というわけではない、多分)。それをあえて同期リクエストにすることでどうにかしてみようとかいう話。 同期リクエストするためには、forループなどでJSONPへのリクエストを一気に処理するのではなく、リクエストをひとつに留めてコールバック関数内で次に進むといった形で実装するが良さそう・・・とアイディアをバソキヤ求めて三千里の人に貰った。 つまり、 var urls = [ 'http://del.icio.us/feeds/json/cho45', 'http://del.ic

    JSONPに同期リクエスト
  • JSONScriptRequest

    動的にscript要素を追加してやることによってクロス・ドメインのJavaScriptファイルを読み込むというテクニック。Firefoxの場合は動的に追加するscript要素のonload属性で読み込んだJavaScriptファイルを処理するfunctionを指定してやれば問題ない。しかし、これをクロス・ブラウザで実現するには違ったアプローチが必要になる。そのひとつがJSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptで取り上げられているJSONScriptRequest。XmlHttpRequestと比較するとかなり機能が限定されたものだけど、扱いが手軽で限定された環境ではなかなか威力を発揮するっぽい。 JSONScriptRequestはどうやらJSONPと呼ばれている、JSONデータをc

    JSONScriptRequest
  • hail2u.net - Weblog - CSSで指定するフォント

    CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。 Core fonts for the Webに含まれる多くのフォントWindows 98以降では予めインストールされており、Mac OSでもInternet Ex

    hail2u.net - Weblog - CSSで指定するフォント
  • hail2u.net - Weblog - 圧縮フォルダを使わないようにするとエクスプローラがキビキビ動く

    Windows XPの圧縮フォルダというほとんどの人が使っていないと思われる機能(私見)を解除したら、エクスプローラがキビキビ動くようになった気がする。というようなことを某所で言ったら、試した人が「すげぇかるくなった kyo++」とかインクリメントしてくれたので、エントリにしておこうとか。 圧縮フォルダ機能の解除の方法は、コマンド プロンプトで、 regsvr32 /u zipfldr.dll regsvr32 /u cabview.dll と、入力してやるだけ。多分再起動は必要ない。 これにより特にエクスプローラのツリー表示なんかが高速化する気がする。エクスプローラ以外ではファイラーっぽいので特に高速化する感じで、僕の環境ではACDSeeのツリー表示がとんでもなく高速化した。 また、デフォルトの検索機能が圧縮フォルダ内を探さなくなるため高速化し、いつまでたっても終わらないということは少な

    hail2u.net - Weblog - 圧縮フォルダを使わないようにするとエクスプローラがキビキビ動く
  • JSONP

    前回のエントリで触れたJSONP。初出はRemote JSON - JSONPというMochiKitの中の人によるエントリ(多分。一言で言うなら「JSONデータを括弧でくくった上でこっちが指定した文字列を頭につけて返してね?」というもの。文章で説明するとわけわからん。 つまり、 http://example.com/data.json?jsonp=beverly_hills とリクエストしたら、 beverly_hills({ foo: 'This is foo.', bar: 'This is bar.', foobar: 'This is foobar.' }); と返す。また、 http://example.com/data.json?jsonp=beverly_hills%5B90210%5D とリクエストしたら、 beverly_hills[90210]({ foo: 'This

    JSONP
  • hail2u.net - Weblog - よく使うライセンス・フリーのフォント

    OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。 Lacuna Regular Italicの方がスタイリッシュで使いやすそうではあるけど、ところどころに独特の味があるRegularの方が好き。 MiloTF-Text 小さいサイズでもかなり使える。 Lexia Readable Comic Sans MSの系統だが、ふざけた感じが少ないため場所を選ばずに使える。 Fontin-Regular セリフのヒゲの部分のあしらい方がきれい。 Devroye スクリプト系ではあるけれどもしっかりした感じで使いやすい。 IdentifontのFree fontsとかライセンス・フリーのフォント

  • interpolate-fancy.js: JavaScriptのごく簡単なテンプレート・システム

    blosxomのプラグインにinterpolate_fancyというものがある。このプラグインは、あまり強力ではないblosxomのテンプレート・システムを強化するもので、ベーシックなif/unless系の分岐が可能になる(他にインストールしているプラグインのサブルーチンを呼べたりもする)。あまりややこしくない正規表現による置換で実装されている。というわけで、簡単なテンプレートシステムとして使うためにJavaScriptに移植してみた。 ベースになったのはprototype.jsの1.5.0_rc1に実装されているTemplateクラス。これのテンプレート変数の書き方をinterpolate_fancyに合わせた<foo/>という形固定にして、条件分岐の正規表現を付け加えるという形でライブラリにしてみた。 使い方は、interpolate-fancy.jsを読み込んでおいた上で、 var

    interpolate-fancy.js: JavaScriptのごく簡単なテンプレート・システム
  • JavaScriptで配列をシャッフル

    配列をシャッフル、つまりランダムに要素の位置を入れ替えるというのを、sortメソッドを使ってやってみたのだけど、明らかにダメダメなものになってしまった。その後、あーでもないこーでもないと考えたのだけど、算数が得意すぎて頭が痛くなった。ということを某所でぼやいたらはてのくんがコードを見つけてくれた。どうやらFisher-Yatesという有名なアルゴリズムでやると良いらしい。 最初に書いたコードは、 var a = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); a.sort( function (a, b) { return Math.ceil(Math.random() * 3) - 2; } ); というもの。sortメソッドは、パラメータに与えられた関数が負の値・0・正の値を返すことによって要素の順序を決定するので、その関数がランダムに値を返せばランダ

    JavaScriptで配列をシャッフル
  • CSSコーディング・スタイル

    「こういうスタイルがCSSを記述する時に便利だよ! コンセンサス(つづりは知らない)も取れるし!」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。 とりあえずスタイル指定を取っ払う 各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。 フォント・ファミリの指定は別ファイル 見出しはこのフォント文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。 様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こ

    CSSコーディング・スタイル
  • Amazon ECS 4.0のXMLからフィードやJSONに

    Amazon Web ServicesのE-Commerce Service 4.0ではクエリにStyleというパラメータでXSLTスタイルシートのURLを指定することによって返ってくる結果のXMLを整形することが可能です。前からありますけど。久々にAmazon熱が出たので、RSS 2.0とJSONに整形するXSLTスタイルシートを書いてみました。 RSS 2.0で整形(XSLTスタイルシート: ecs42rss20.xsl) JSONで整形(XSLTスタイルシート: ecs42json.xsl) JSONで出力する場合は、クエリにStyleと共にContentTypeというパラメータでtext/javascriptを指定してやると良さげです。あーあと最速の人に教えてもらって、Internet Explorer対策にnullとか仕込んでます。こうしないとカンマで終わってるところでエラーが出

    Amazon ECS 4.0のXMLからフィードやJSONに
  • hail2u.net - Weblog - FirefoxのuserContent.cssネタ

    Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family