タグ

ブックマーク / www.koikikukan.com (12)

  • 一時ファイル作成が不要になる「プロセス置換」

    LinuxMacなどで一時ファイル作成が不要になる「プロセス置換」の使い方について紹介します。 1.はじめに 2つのファイルを比較するときには、通常diffを利用します。 % diff foo.txt bar.txt ですが、一方または両方のファイルを加工してから比較したい場合、次のようなことを行うことがあります。 % grep -v hoge foo.txt > foo2.txt % grep -v hoge bar.txt > bar2.txt % diff foo2.txt bar2.txt 具体的な例として、5月9日と5月10日のウェブサイトへのページ別アクセス数のログ(CSVファイル)があるとします(Google AnalyticsからダウンロードしたCSVとか)。 % cat 0509.log aaa.html,300 bbb.html,20 ccc.html,156 ddd

    一時ファイル作成が不要になる「プロセス置換」
  • 入力フォームの全角・半角を勝手に変換してくれるJavaScript

    入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 1.発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを(多分)見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの?と思ったのが、作ったそもそもの発端です。 2.半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A

    入力フォームの全角・半角を勝手に変換してくれるJavaScript
  • IE6/IE7/IE8/IE9の共存まとめ

    Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用+IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview(「Internet Explorer 9 Platform Preview」)」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、

    IE6/IE7/IE8/IE9の共存まとめ
  • リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」

    XHTML の文法チェックには Another HTML-lint gateway や、The W3C Markup Validation Service が有名ですが、そのサイトに行かなければならないのがやや面倒という方に、リアルタイムに XHTML を検証できる Firefox 機能拡張「Html Validator」を紹介します。 「Html Validator」は、XHTML のバリデーション以外に、アクセシビリティのチェックや、ソースコードのクリーンアップ(ソースの自動修正)まで行ってくれるスグレモノで、Firefox ユーザにはポピュラーな機能拡張のひとつです。 すでにご利用の方も、記事後半にデフォルト設定以外の項目について詳細に記しておりますので、より活用できるのではないかと思います。 以下、Firefox をご利用でない方向けに、Html Validator のインストール

    リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」
  • 小粋空間: Lightbox JS で画像を表示する

    サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。 ということでこのエントリーにてご紹介したいと思います。 2006.10.10 追記:機能改善された Litebox 1.0 の記事「Litebox 1.0 をブログに適用する」を公開しています。 0.動作 公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。 表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。 以下、このスクリプトの設定方法です。 1.ファイルのダウンロード 動作に必要なファイル(スクリプト・スタイルシート・画像)をダウンロードします。 まず下記の

  • 小粋空間: はてなブックマークの「人気エントリー/注目エントリー」を Ajax Perl でブログに表示する

    はてなブックマークの「人気エントリー」や「注目エントリー」を Ajax + Perl を利用して、スクリーンショットのように「記事タイトル+被ブックマーク数」のフォーマットでブログ等に表示させるカスタマイズです。 他のサイトで同じようなリストを見かけたのですが、そのようなインタフェースあるいはツールを探し出せなかったので、自作しました(すでに同じものが提供されていたらお恥ずかしい限りですが)。 単に一覧を表示するのであれば、RSS + feed2JS でも可能ですが、被ブックマーク数まで表示することができないため、はてなブックマークで表示される HTML ファイルを Ajax + Perl で取得し、JavaScript で加工しています。 きめ細かいエラー処理等実装していないので、動作に不具合がございましたらご連絡ください。 なお、ここで紹介するカスタマイズは、アクセス毎に CGI が起

    小粋空間: はてなブックマークの「人気エントリー/注目エントリー」を Ajax Perl でブログに表示する
  • 小粋空間: Movable Type を始める前に設定しておきたい 10 の項目

    Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。1項から8項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 1.管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基モード」と「詳細モード」の2種類があり、デフォルトは「基モード」になっています。この状態では基設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と

    小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
  • JavaScript で文字をトリミングする(改善版)

    JavaScript を用いてエントリータイトル等の文字をトリミング(指定した文字数だけ表示する)するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字(2バイト)を1文字としてカウントします。 左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。 さらにスクリプトを修正すれば、特定の半角文字("M"とか"W"のような幅の広い文字)を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。 今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列を

    JavaScript で文字をトリミングする(改善版)
  • JavaScript で文字をトリミングする

    JavaScript を用いてエントリータイトル等の文字をトリミング(指定した文字数だけ表示する)するカスタマイズです。 以前、「Movable Type のようなトリミングを、他のブログで実現できないでしょうか」というご質問の回答です。大変遅くなりましたが、このエントリーで回答に替えさせて頂きます。 ここでは文字数でトリミングする方法を紹介していますが、半角・全角が混在している場合のサイズを調整したい場合は、下記のエントリーを参照ください。 JavaScript で文字をトリミングする(改善版) とりあえず「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列をトリミングする、簡単な JavaScript を書いてみました。 Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも1文字で計算してトリミングしてくれるようですが

    JavaScript で文字をトリミングする
  • 小粋空間: Internet Explorer 6 と Internet Explorer 7 を共存させる

    はてなブックマーク経由で「IE6 と IE7 の共存はできませんか?」という類の質問をいくつか頂きまして、ネットを検索してみたところ、簡単に共存できる方法が書かれたサイト(下記)をみつけましたので、エントリーにて IE6 と IE7 を共存する方法をご紹介します。 Tredosoft:Internet Explorer 7 running side by side with IE6. (standalone) 「共存」というのはやや誇張した表現ですが、IE7 Standalone 版を来の IE のインストールフォルダとは異なるフォルダにインストールするというものです。またインストーラを利用するので簡単にインストールできます。アンインストールも可能です。当然ながら対応 OS は Windows XPのみです。 上記のページには2つの方法が紹介されていて、このエントリーでは「インストーラ

    小粋空間: Internet Explorer 6 と Internet Explorer 7 を共存させる
  • CSS+JavaScript によるカラムレイアウト切り替え

    公開テンプレート(Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ)でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。 とりあえず、どのような動作になるかをサンプルでお試しください(中央上部のプルダウンメニューで操作できます)。 以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。 今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。 その理由は、現在公開しているテンプレートでは1つのスタイルシートに 3カラ

  • 小粋空間: ボタン・バナー・アイコン作成・配布サイト一覧

    クレジットバナー追加の流れで、ブログでよくみかけるボタン(バナー)・アイコンの関連サイトを紹介しておきます。 ここに掲載していないもので「もっと有名なサイトがあるよ」という場合、ご連絡頂ければ幸いです。 AntiPixel:Steal These Buttons http://www.antipixel.com/blog/archives/2002/10/22/steal_these_buttons.html 80x15のボタンを(多分)最初に作成したサイト。 GTMCKNIGHT:Buttons http://gtmcknight.com/buttons/ 上記の記事をきっかけに始まった 80x15 ボタン収集サイト。Upload Form から作成したボタンを登録することができ、このページ左側の Menu をクリックすると膨大な数のボタンが表示されます。 SUICAのバナーもありました

    小粋空間: ボタン・バナー・アイコン作成・配布サイト一覧
  • 1