サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
purpr.in
Facebook(フェイスブック)のいいね!ボタンとかシェアボタンのうち、よく使いそうなパターンの出力見本を出しただけのページシェア(Share)ボタンの挙動見本 Style:Button Counter:noneShare Style:Button Counter:inline with ButtonShare Style:Button Counter:Above ButtonShare Style:LinkShare シェア(Share)ボタンはここからゲット いいね!(Like)ボタンの挙動見本 Layout:standard Show Faces:on
Tag: Apache, mod_rewrite, MovableType, tag, URL TagwireとMT-XSearchによる動的タグアーカイブ - Ogawa::Memoranda に倣ってここのタグアーカイブもシンプルな URL でアクセスできるように変更するよう試みました。 より簡便なタグアーカイブリンク: 「http://my.host.tld/tag/Tag」のように簡便な形式のURLでタグアーカイブにアクセスできるようにするには、以下のように.htaccessに追加します。 RewriteEngine on RewriteRule ^tag/(.*)$ /mt/mt-xsearch.cgi?blog_id=1&search_key=Tagwire&search=$1 [QSA,L] TagwireとMT-XSearchによる動的タグアーカイブ - Ogawa::M
Tag: communication, web Webオタを自称する人に、Webの何が好きなのか聞いてみたい。 私にとってWebは道具とか手段でしかなくて、「好きになる対象」にならないんだよな。 好きになるのはWebを通じてであったものとか人なんだよなあ。私は。 tumblr を眺めながら、つい反応したくなり、勢い良く書いていたら長くなったので、ブログに書くことにしました。 Web オタを自称するべきかわかんないけど、Web で楽しいことをしたり、サービスを使ったり、作ったりしていたい人としての意見。 これはまったくおっしゃるとおりで、Web を通じて出会ったもの、人が楽しい。 では、「好きになる対象」かどうかという点について。手段として好きか嫌いかという話だと、例えば「電話は好きか」「メールは好きか」「手紙は好きか」という手段の種類同士の比較をすれば適切なのかもしれません。 (ちょっとず
手段先行にならず、本質的に情報の発信・受信を楽しめるようになりたい。 2007-05-10T00:25:48+09:00 Tag: (X)HTML, interface 私は HTML やら XHTML などのマークアップ言語が大好きです。 むしろ、人気の CSS よりもずっと大好きだと自負があります(いちおう、三度の飯よりは CSS のほうが好きなんだけれど)。 最初は意味づけすることの面白さに対する好奇心が強かったし、なにやらカッコでくくったものがウェブで出力されることの単純な喜びが大きかったです。 平たく言うと、見出しとなるべきところをちゃんと見出しだと意味づけ、大事なところは強調しようねと意味づける、いわゆる機械に対しても、私たち人間の文脈を理解してもらうための言葉とでもいいましょうか。 最初は Strict だと「なんとなくかっこがよい」という、どうしようもない動機で書いていた
XHTML 1.1 マークアップサンプル付リファレンス version 1.0.0 Last update: 2006-05-16T15:54:10+09:00 モジュール別 XHTML1.1 リファレンス XHTML1.0 Strict DTD をモジュールに分割して、必要な機能を選択できるように再形式したのが XHTML1.1 です。 HTML4.01 、 XHTML1.0 、 XHTML1.1 において、推奨される要素に違いはあるものの、要素の定義はほぼ変わっていません。 XHTML1.1 の仕様書(Abstract Modules)に記載の順番に記載したリファレンスを以下に作成しました。スタイルが適用され、見栄えが確認できるようにできる限り説明文に使用例を盛り込んであります。 非推奨とされる要素・モジュール(applet, flames, target, iframe, legac
Tag: (X)HTML, CSS, webdesign 最近正しくHTMLを書こうと心がけている人に5つの質問に回答している方が多くて、時間作って回答したいなと思いながらだいぶ日がたってしまいました。いまさらですが、書いてみます。 HTML文書を制作する際に使用しているプログラムをお答えください。(Webプログラムも含む) skEdit。サーバのデータにそのままアクセスできるところがステキ。タグ補完が便利なのが売り(?)なのにoffにしてしまっているので、体をタグ補完にならす訓練が必要な気がしてきました。 いやいや、一番肝心なの忘れていました。このブログにしても、CSS 管理ひとつとっても、 MovableType は自分の肌と同じような存在になっていて、うっかり書き忘れていました。ごめんなさい。ちなみに、テンプレートはプレーンテキストとしてサーバにおいて、そのテキストに対して skEd
Tag: CSS CSS Naked Day ってことで、4/5の1日だけCSSを切って素の(X)HTMLを晒してみようってイベントなのだけど、ブログにおいては、CSS レイアウトが主流になってきていることもあって、素の(X)HTML って「ソースを見る」ってやらないと気づかないかもしれませんね。 どれだけ多重に divで囲っていようが、いまいが、ブラウザのデフォルトスタイルでdivに何かしらわかりやすいスタイルでもあたっていない限り同じようにみえちゃうというか。 しかし脱いでみて自戒するところはたくさん。忙しさにかまけてソースのメンテもできていなくて悔しいですが、明らかにブログの個別記事のh1要素は記事のタイトルのほうがいいだろうと。ナビゲーションの出現位置もビミョーだろうと。 プログラミングにおけるリファクタリングの考え方をとりいれて、メンテの技術も向上させなければ、と思うこのごろです
「極力ハックしない CSS」動画 + リアルタイムプレゼンを公開しました (CSS Nite in Nagoya 2007) 2007-03-15T10:26:26+09:00 Tag: CSS, CSSNite, event, hack, presentation, seminar, video 前回の記事で CSS Nite in Nagoya 2007「極力ハックしない CSS」の pdf 資料を公開しましたが、いかんせん、フォントの埋め込みが影響しているのか、重すぎ。(51MB) 今回は、本番で実際に話した様子の映像と、リアルタイムでプレゼンテーションのページが移動するものを公開します。高速回線であれば、比較的臨場感を味わっていただけるかと思いますので興味のある方はご覧ください。 この、動画とプレゼンを連携する技術は、オオヒダさんが徹夜で実装してくれたみたいです。ありがとうござい
[CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました 2007-03-12T11:29:48+09:00 Tag: CSS, CSSNite, event, hack, presentation, seminar 去る2007年3月10日、CSS Nite in Nagoya 2007にて、「極力ハックしない CSS」というテーマでスピーカーとして参加させていただきました。 総勢282名という多くの方にご参加いただき、プレゼンターとしてだけではなく、参加者としても有意義に勉強させていただくことができました。 回想や反省を含めて、またあとで追記するか別エントリで書こうと思います。取り急ぎ pdf 版の資料を公開いたします。音声版は後日 CSS Nite 公式ページで公開される予定ですので、興味のある方はご覧ください。(追記)PDF 版に加え
こんにちは。以前から予告していましたとおり、1月11日にオオヒダさんと共に、新しい会社「エスカフラーチェLLC」を設立しました。1のゾロ目の日でした。 最近、海外ですすんでいるウェブ関連の会社がみんなエルエルシーってついているのをよくみかけます。今となってはとってもブレイクしたYoutubeも最初エルエルシーだったのが記憶に新しいところです。日本でも新・会社法が制定されてから日本版 LLC がつくれるようになって間もないですが、LLCの魅力を活かしてスピーディにアイデアを実現できる会社にすべく、努力していきたいと思います。 いつもペンギンアイコンでネット上をうろうろしている私ですが、エスカフラーチェのトップページでは、宇宙人を気取りながら仕事しているというよりもネットサーフィンのことで頭がいっぱいのようです。そこでオオヒダさんが監督しているような感じ。なんとなく仕事の構図と似ています(似て
POOKMARK Airlines にニックネームやアイコン画像を設定できるプロフィール機能追加 2007-01-30T22:23:39+09:00 今日の最高気温を見るととても1月下旬とは思えません。3月下旬くらいのあたたかさだとテレビでも放送していました。寒さに弱い冬生まれの私にとっては嬉しいけれど、くるべき季節がこないことによって自分のみえないところで商売に影響している方々もいらっしゃるでしょうし、もっと大規模な地球環境全体からすれば、私一人が寒がりどうのこうのはさておきやっぱり心配です。 時候の挨拶の定型文も役に立たないので、挨拶を考え直す意味では良いことなのですが・・・(前置きはこのへんにして)そんな晴れた日のティータイムあたりに、POOKMARK Airlines ではプロフィール機能がつきました。 ニックネームと、プロフィールアイコンと、簡単な自己紹介をインプットできるので
構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、本来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは本来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を使っていても設計ミスの建物では使い物になりません。文書でも同じことが言えるもので、プレーンに理解しやすい文
あけましておめでとうございます。 年末年始・・・本来であれば実家に帰ってのんびり過ごしたいところですが、今年のお正月は特別な予定(後述)を控えていることもあってそのまま都内の自宅で過ごしました。 コトノハでは、祝日や特別な日の日付変更時間あたりに毎回手動でロゴを差し替えていますが、ロゴのイラストを年賀状にしてみました(って、去年もそうでした)。 昔からの友人・知人はハガキでのコミュニケーションで慣れてきていましたが、最近お世話になっている方はほとんどメールが中心なので、こういう機会でもないとなかなか手書きのものが送れないですね。年賀状を送ってくださった方々、ありがとうございます。私の準備が悪くて元日に送ることができずすみません。 20代も終わりかけの私ですが、生まれてから今までに初日の出を拝んだことがありませんでした。 ペンギン大好きなくせに、冬生まれのくせに、ものすごい寒がり屋の私。毎年
Tag: moving この1ヶ月、私生活でバタバタしてろくにブログを書いていませんでした。 上京してきて1年もたたないうちに、近距離引っ越しをしました。今まで住んでいたところは都内でもかなり交通の便もよい上、都会にも近いのにほどよくのんびりした場所だったので気に入っていたのですが、問題はお部屋の狭さ。冷蔵庫は備え付けの1ドア、冷凍室が独立していないから冷凍食品も置けなければ、余ってしまったお米を保存することもできない。なにかと不経済だったし、マンションの1階でろくに窓もあけられない暗い場所。どうも体調も不調が続いたりしていて、あまりこのままではよくないと思い、住んで短いながらも引っ越しを決断しました。 田舎から上京してくると(以前から東京に旅行で何度も遊びにきていたのにもかかわらず)、あまり熟慮せず23区内にこだわるなど、無駄なこだわりがあるのは私だけでしょうか。 部屋に関しては住んでみ
分割した場合の CSS の種類 default.css 全ての文書に読み込ませる CSS。ブラウザごとに違うスタイルをリセットして要素別に見栄えを再定義します。汎用的なクラススタイルも含みます。 font.css フォントファミリを定義するための CSS です。 layout.css レイアウトの種類を定義するための CSS です。この CSS の中身で @import 規則を使い、個々のレイアウトを読み込みます。このファイル内では、読み込むファイル名の行のコメントを外して希望のレイアウトを読み込むようにします。 layout.css 内で @import 規則を使って読み込むスタイルの種類の例 fixed_2column_left_menu.css fixed_2column_right_menu.css liquid_2column_left_menu.css liquid_2colu
ちょっと遅めの夏休みを頂いて、特に遠くへ出かけるわけでもなくのんびり過ごしつつ、javascript の勉強にと、POOKMARK Airlines と del.icio.us の同時ポスト(クロスポスト)を実現したくて Greasemonkey スクリプトを作ってみました。 POOKMARK - del.icio.us クロスポスト用 Greasemonkey スクリプトをインストール 実は、作ってみたものの、早速動かなくていろいろと試行錯誤しました。夜な夜な作っていたところ、偶然にも夜遅く起きていた ZIGOROゥさんに助けを求めて動かして頂いたのです(ZIGOROゥさんほんとにありがとうございます!)。 私がつくったお粗末なのとはまったく違い、スクリプトの最後のほうで del.icio.us API を呼び出す感じのステキなものにしてくださいました(私も頑張って修行しなきゃ)。 PO
開発裏話〜POOKMARK Airlines(プックマークエアラインズ)就航 2006-10-05T04:04:49+09:00 ごぶさたしております。 2006年10月3日、paperboy&co. よりPOOKMARK Airlines(プックマークエアラインズ)が就航いたしました。 エアラインズとありますが、このサイトはいわゆる「ソーシャルブックマーク」のサービスです。インターネットのブラウジングを「旅」に見立てて、お気に入りのサイトを搭乗券のチケットの形をした「行き先」として保存して共有ができます。 それから、Internet Explorer や Mozilla Firefox からのインポートもできますし、 del.icio.us からもインポートできますよ!そんなわけで del.icio.us からのお引っ越しも簡単。ぜひ使ってみてくださいね。 同時に、開発支援制度「ペパ研
このページでは、コトノハで提供しているコトノハ Roll を CSS でカスタマイズしたサンプルを紹介しています。 コトノハ Roll って何? コトノハ でユーザ登録してお楽しみの方なら誰でも無料でお使いいただける、ブログやホームページなどに自分の○×やコメントを貼り付けるスクリプトです(別名、魔法の呪文。どうやら、このスクリプトを貼り付けると、渋谷あたりでモテモテになるという噂があるらしいですが、モテなかった場合の責任は負いません)。 コトノハにログインした状態で コトノハRoll のドキュメントをご覧いただくと、ブログなどに貼り付けるスクリプト(魔法の呪文)が出てきますので、そのスクリプトを貼付けたいページの HTML 上に貼り付けるだけで表示ができるようになります。 ▲ページのトップへ CSS って何? コトノハ Roll のスクリプトを貼り付ける、というだけでは、単にシンプルな
Tag: background, design, desktop, theme, W-ZERO3, W-ZERO3[es], wallpaper W-ZERO3[es]を購入してから、いろいろとソフトを試しながら入れたり消したりを繰り返し、Smart-PDA.net さんの記事を参考にしてフォントを変更したり、レジストリをいじったりしているうちに Opera Mobile におけるフォントの表示が指定どおりに反映されておらず、購入後わずか10日もたたない間にリカバリしたりと、一昔前のパソコンのようにカスタマイズを楽しんでいます。 結局フォントそのものの問題ではなくて、ClearType 指定を行うことで逆に Opera での見栄えでフォントジャギーがでてしまう、ということだったので一応解決。 リカバリ後は、せっかくなのでインストールするソフトも吟味して、本当に使うソフトにしぼりこんだものの
Tag: blogparts, CSS, design, kotonoha, コトノハ オオヒダさんがコトノハという○と×をつけて楽しむ Web サービスをつくりだして、もはや1年が経とうとしています。 私にとってこのコトノハは、趣味で Web デザインの勉強をしていたなかで、リニューアルデザインを携わることになったサービスでもあり、その思い入れは特別のものがあります。 「コトノハ - ○×ソーシャル」とは 人生の経験値というチェックリストをヒントにオオヒダさんがつくった、 ○と×をつけて遊ぶとても軽快なサービスです。 その軽快さゆえに、回答するときのコメントが誰にあてるわけでもなく、どこに文章を書くよりもふとした感情を出せる気がして、ひとつひとつの「コト」に対するコメントの欠片が集まった「コトリスト」こそ、とても素直な自己紹介になってしまっているように思います。 そんなコトリストの一部を
version 1.0.0 Last update: 2006-05-16T15:54:10+09:00 構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、本来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは本来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を
Tag: computer, display, DVI, Mac, PowerBook, VGA, Windows 某氏が最近、デュアルディスプレイにしたよと自慢ムービーを送りつけてきたので、私もうらやましくなってデュアルディスプレイにしてしまいました。 家では Windows ミドルタワーPC と PowerBook を使い分けているのですが、入っているアプリケーションやフォントなどの都合で、デザインなどの作業を行うときはもっぱら PowerBook 12inch をメインで使っています。 12inch なのでカフェに持ち出してネットをするには最適ですが(それでも重たいけど!)、小さなウインドウをたくさん開く Illustrator などのツールを使う時に作業領域が狭くなってやりにくいなぁ〜、と思いながらもずっと使ってきました。そんな感じで小さいディスプレイには慣れっ子だけれど、自慢ムー
MovableType 3.3 の Widget 機能で効率良くサイトを管理【その1】 2006-07-04T00:26:36+09:00 Tag: customize, MovableType, widget 以前のバージョンの Movable Type から、今回 MT3.3 にアップグレードして数日たちました。というわけで新しい機能をいろいろ試したくなってしまいます。 MT3.3 の管理画面では、(MT をカスタマイズしている方ならお馴染みの)「テンプレート」の項目の下の方に、プラグイン - Widget の管理という、今までのバージョンでは見たことのないリンクがあることに気づきます。 この機能を上手に使うと、サイトの管理や設計の効率が格段に上がるので、デフォルトのテンプレートでまずどのような挙動をするのか試したのち、実際にどのような使い方をすると効率が良くなるのか試してみました(
Tag: accessanalyzer, feed, RSS, XML 自分のサイトがどのような解像度のディスプレイで、どのようなブラウザを利用している方が多いのかを調べるためにアクセス解析サービスは欠かせません。 feed リーダー※や、あらゆる feed を活用したマッシュアップサイトの登場で、ページを通常の Web ブラウザで閲覧するとは限らない状況も増えてきました。feed が普及するにつれ、直接サイトを閲覧されない場合のアクセス数を知りたいときに、feed の購読状況を知ることができる FeedBurner のようなサービスを利用している方も多くいらっしゃるかと思います。 FeedBurner で feed のアクセス解析をする場合の問題 FeedBurner ではかなり詳細に解析できるようになっていますが、観測気球さんのエントリで そのまま FeedBurner の URI を
Tag: feed, lifehack, RSS 日頃の情報収集方法をもっとストレスなく効率よくできないものかと最近特に考えるようになりました。 ちょうど lomo さんやヤスヒサさんがとても興味深い記事を書いていらっしゃったこともあり、私もいろいろ見直してみることにしました。 体調をくずせば RSS は未読の山 最近頭痛に悩まされ体調が優れない日々が続いています。他の IT な方の中でも、座りっぱなしのデスクワークが続いて頭痛持ちな方がいらっしゃるという話をちらほらうかがいます。 lomo さんがおっしゃるように、風邪をひいたり寝込んだりしてしまっても未読Feedが溜まる現実は変わりません。私も頭痛のときは、大好きなパソコンを触ることすらできなくなるのでひたすら寝るしかできなくなってしまいます。 RSS リーダーはかかせない存在だった いままで情報収集には RSS リーダーはとても手放せ
マインドマップのようなインターフェースは、音楽を聴くというだけでなく視覚的にも心地よい感じです。次々と連想ゲームのように似た感じの曲調に繋がっていく姿はまさに「音楽を発掘( music + discovery の造語ですよね、おそらく)」する感覚にフィットします。 音楽を聴くという、あまりにも馴染みすぎた行動に対して新たな楽しみ方を見いだしたアイデアと美しさに感激です。おかげで家にいるときも仕事中もかけっぱなしになってしまいました。 興味深いことに、左側のスライダーで曲の年代を選択できるのですね。たとえば 80年代のディスコサウンドに浸りたいなあ〜、などと思えば、スライドを 80年代にチューニングすればたちまちその年代の曲がマッピングされてなんとも懐かしい感じがします。 アーティストやジャンルだけで選ぶのではなく、こうして「年代」「テンポ」「明るさ」「にぎやかさ」という新たなベクトルで音楽
MovableType 3.3 の Widget 機能で効率良くサイトを管理【その2】 2006-07-05T22:55:33+09:00 Tag: customize, MovableType, widget 前回のエントリでメモしたように Movable Type 3.3 では Widget Manager という便利な機能がつきました。 いままでのバージョンでは、テンプレートの中で共通で使う部品を「モジュール化」して管理する手法がポピュラーに使われてきたと思います。 このブログでもサイドバーの項目はセクションごとにモジュール化して管理していました。それだけでも十分に効率良く管理できますが、今回の Widget Manager 機能を使うと、テンプレートの種類ごとに表示・非表示を選択したり順序を変更したり、という煩雑な作業が直感的にできるようになるためさっそくこのブログでも導入しまし
Tag: event, javascript, Shibuya.JS 2006年 6月30日(金)に Shibuya.JS Technical Talk #2 へ参加しました。 JavaScript は、プログラミングをする人にもデザインをする人にも触れる機会のある言語ということもあり、他のプログラミング言語(また、その言語によって形成されるコミュニティ)とは異色の雰囲気も感じていてとても興味がありました。 JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。 Rediscover the JavaScript JavaScript にスポットをあてているこういった趣旨にも共感していて、第一回から注目していましたが、大人気の
microformats (hCalendar) から Google Calendar に楽々インポートする方法 2006-06-27T18:07:54+09:00 Tag: CSS, event, Google, hCalendar, microformats, seminar, webstandard 2006年7月15日(土)に CSS Nite & Web標準Blog presents Web標準の日という、とても興味深いイベントが開催されます。目標動員数が500人と大規模で、豪華な講師陣が並ぶイベントということで多くの Web 関係の方に注目されているイベントでもあります。早速このブログでも告知バナーを貼付けてみました。 Web標準の日 特設サイトの中で、注目していたのは イベント概要のページ内で microformats をさりげなく導入していることでした。 microfor
次のページ
このページを最初にブックマークしてみませんか?
『DOMAIN ERROR』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く