Syntaxhighlighter にも Solarized を!(あと Gist も)

Solarized とは各種ターミナルやエディタに使える目に優しいカラースキームです。なかでも vim 用のものは .vimrc を解析してみたサイトで圧倒的人気で 1 位を獲得するなど、利用者が多いことで知られています。

このカラースキームの設定方法は以前記事にもまとめました。

最強カラースキームと言えば Solarized だよね! | blog.remora.cx
http://blog.remora.cx/2012/10/let-us-use-solarized.html

今回はこれを Syntaxhighlighter や Gist で実現してみました。スタイルシート書いただけですけどね。

Continue reading

Javascript でニートな日付文字列を書く

ニートっていっても NEET じゃないですよ。neat です。こぎれいとか、さっぱりとか、そんな意味ですね。

そもそもは <ins> タグの datetime 属性を綺麗に見せたい! と思ったのが発端です。この辺 の記事を読みまして設定してみたのですが、日付文字列がそのままだといまいちわかりにくい。

<ins datetime="2012-01-23T12:34:56+09:00">さんぷる!</ins>

さんぷる!

そこで、最近の日付についてはもう少しわかりやすく出来ないか、Javascript でごにょごにょやってみました。こんな風に変わります。

さんぷる!

Continue reading

jQuery Mobile + iPhone で非同期にファイルをアップロードするサンプル

IMG_2891.png

iOS6 では Safari でファイルのアップロードか可能になったらしいのでサンプルを作ってみました。

単にアップロードできるサンプルではつまらないので、jQuery MobilejQuery.upload を使い、ファイルを非同期にアップロードするサンプルにしました。環境はこんな感じです。

  • クライアント
    • jQuery Mobile 1.1.1
    • jQuery.upload 1.0.2
  • サーバー
    • Amon2

Amon2は Perl の軽量フレームワークです。この環境で作ったサンプルを見ながら、ハマった点をまとめます。


Continue reading

iPhone で任意のサイトを全画面アプリっぽくできるツールを作りました

発端はこれ。

iOS6でGoogleMapsをフルスクリーン表示にしてみました – W&R : Jazzと読書の日々
http://d.hatena.ne.jp/wineroses/20120921/p1

上記サイトでは Google マップと YouTube が紹介されていますが、任意のサイトを作成するためのツールがあったら便利だよね。ってことで作成しました。

Web アプリアイコン作成ツール
http://waim.remora.cx/

Continue reading

JSONP で広告を供給するサーバーを書く

最近の話ですが、このサイトにも広告を載せるようになりました。

Google Adsense の方はタグ貼るだけで終わりの簡単なものなのですが、縁あってレバレジーズ株式会社の広告を載せることになり、これはこのサイトでバナーを供給しています。

このサイトは MovableType + DynamicMTML で運用していますので、普通に考えれば PHP で直接広告タグを書けばいいだけなのですが、サーバー負荷の観点からいまいちだし、第一余りおもしろくありません。

そこで、広告供給サーバーを別に立て、JSONP で供給するようにしてみました。

Continue reading

pjax(pushState + Ajax)で遷移するウェブページを作る

  • Ajax 使わずにページ全体を読み込ませるのが許されるのは小学生までだよねー!
  • でも、ハッシュフラグメント(#!)を使った方法はいろいろと問題がある ので使いたくない。
  • でもでも、pushState だって非対応ブラウザじゃだめなんでしょ?
  • そこで pjax ですよ!

Continue reading

【Javascript】外部リンクに target=_blank を付ける

external-link-orange-dark03-Shapes4FREE.png

リンクがブログの外のものだったら target=_blank を付けて新しいタブで開くようにする jQuery コード。


$('.entry-content a[href^=http]')
    .not('[href*="' + location.hostname + '"]')
    .prop({target: '_blank'})
    .addClass('exlink')
;

ついでに exlink なるクラスも付加しています。以下のサイトを参考にしましたが、そのままでは動きませんでした。jQuery のバージョンの違いかね?

外部サイトへのリンクに target=_blank 属性を追加(jQuery) – せんむの技術ブログ
http://www.shikidahironori.jp/music/2011/01/target-blankjquery.html

おまけ

そもそも HTML4 〜 XHTML1.0 の時代は リンクを開くとき新しいウィンドウ(タブ)を使うかどうか利用者が決めるべき なんて言って HTML の仕様から target 属性が消えたりしました。

それが HTML5 の仕様では復活してます。まあ今時タブブラウザを使ってない方が少数派(スマートフォンを含んだとしても)ですもんね。