Keita です。 先日、enNetForumという所で、Wikiについてお話させていただきました。 僕は、どちらかというと、引きこもりたい人間で、人前で話しをするのは苦手です。 しかも、今回は、Wikipedia創始者 Jimmy Donal Wales氏 の後で話すということで大変緊張しました。 しかし、当日は、わりとちゃんと準備したおかげか、それなりに、ちゃんとお話できたかと思います。 そういうわけで、僕のような人見知りが、どのようにして、プレゼンを準備したかを今回はお話させていただこうと思います。 ネタを蓄積する 今回、僕は、自分のサーバのWikiにテーマである、Wikiの社内共有のネタを大量に蓄積しました。 この作業はお昼休みや帰宅したとき思いついたときにちょこちょこ書き足していました。 内容は、まとまっていなくてもとりあえず書いていくのがいいようです。 とにかく思いついた

JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」 2007年03月27日- ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。 同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつよ

ドットインストール代表のライフハックブログ

PHP In Action | Readable regular expressions It bothers me: I can dream up more ideas in one afternoon than I can write down in a week. PHPで正規表現を読みやすくする方法。 通常、PHPで正規表現を記述するとき、次のようにpreg_matchに直接渡して使う行うことが多いかと思います。 preg_match("/^[a-z]+$/", $str); 正規表現の内容が複雑になるにつれ、コードがよく分からなくなることはありがちですね。 そこで、次のようにコードを記述すると単位ごとにコメントが付けられて読みやすくなります。 $regex = '/(w+s+)'. // Word followed by spaces '{6}'. // Repeated six

以前ご紹介した Slider を利用して、ページのフォントサイズを変更するカスタマイズをご紹介します。 下のサンプルをクリックし、ページ左上にある Slider を操作すると、中央カラムおよびサイドバーにある文字のフォントサイズをダイナミックに変更することができます。 Slider は矢印キー・PageUp/PageDown・マウススクロール（これは IE のみ）でも操作可能です。IE より Firefox の方がよりスムーズに動きます。 フォントサイズ変更サンプル ここでは Movable Type 用公開テンプレートを用いて、フォントサイズ変更用 Slider の設定方法をご紹介します。Slider および本カスタマイズはブログツールやテンプレートに依存するものではありませんので、他のブログツールや異なるテンプレートでも利用可能です。 Slider のダウンロード・インストールについて

« back to inner.geek Parallax Backgrounds a multi–layered javascript experiment This work is licensed under a Creative Commons Attribution 3.0 License. First of all, try scrolling up and down thing page. Use your scroll wheel, use the scroll bar, use the arrow keys, page up, page down, space bar. Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll

willmayo.com CSS Speech Bubbles Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。 次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。 HTMLコードは次のようにクリーンにできます。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite> </div> 角丸部分にはCSSだけでなく、

Simple Round CSS Links ( Wii Buttons ) You may not get a Wii, but you can still get your own Wii Buttons with only 2 tags 1 image one CSS file . Wiiブラウザ風CSSボタンを作成「Wii Buttons」。 CSSと画像が配布されており、実装方法は次のように簡単かつクリーン。 しかし、class名に button はちょっと使い勝手が悪そうなので、別名に変更した方がよいかもしれませんね。 <!-- アンカータグの場合 --> <a class="button" href="?d=-1"><span>ボタンラベル</span></a> <!-- フォームボタン --> <span class="button"><input type="submit

pic2color 写真をカラーリストにする「pic2color」。 画像のURLを入力することで、画像によく使われている色味を抽出することが可能です。 色のクリックで、#abcdef のような、HTMLカラーとして取得でき、ページレイアウトを作成する際に役立てることが出来るでしょう。 美しい画像を見つけた際は、このツールにかけてみて、よい色合いがないか、試してみるとよいかもしれませんね。 関連エントリ オンラインで動く、色, CSS, robots.txt, .htaccess等のジェネレーター色々 PHPで画像に使われている色を簡単に抽出する方法 画像の色をWEB上で解析「Color Palette Generator」 HPとGDを使って色々作るサンプル Color Palette Generator - 画像からカラーパレットを作成

Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with various visual effects. CSSを使った透明角丸ブロック表現「Even More Rounded Corners」 次のような角丸かつ、光彩かつ、半透明なブロックを作成しているサンプル。 ＪａｖａＳｃｒｉｐｔは使っておらず、また、1個のＰＮＧ画像で表現しているそうです。 なかなか美しい表現なので、ページデザインのどこかに使えるかも。 尚、IE6では動かないようなので、注意。 関連エントリ Wii

JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Sucke... 次の記事 ≫：花火アニメーションをJavaScriptで実装「Fireworks.js」 Ajax Back Button Hack Ajaxなページで「戻るボタン」を機能させる方法。 Ajaxなページでは、ブラウザの「戻るボタン」を押すと、通常は、前に開いていたページに戻ってしまいます。 Ajaxでページを１，２，３と開いていって、２に戻りたいのに、前に開いていたページに戻るのは利用者としては不本意な動作です。 そこで、IFRAMEを使った、Ajaxでの「戻るボタン」実装ハック方法の紹介。 Ajaxで画面を切り替えた際に、IFRAMEのsrcも切り替えることで戻るボタンを動作させることが出来ます。 例えば、javascriptで次のようにIFRAMEのsrcを切り替えます。 <ifram

Fireworks.js: A DHTML fireworks effect 花火アニメーションをJavaScriptで実装「Fireworks.js」。 Fireworks.jsライブラリを読み込めば、以下のようなシンプルなAPIによって花火のアニメーションを表示することが出来ます(音も出るので注意)。 createFirework(79,19,1,3,null,null,null,null,false,true); サイトで何か嬉しい出来事が起こった際に、このアニメーションを表示することで、利用者に驚きを与えることが出来そうです。 これは楽しいですね。 関連エントリ JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」 JavaScriptでMP3を扱えるライブラリ「SoundManager 2」 JavaScriptによるモーショントゥイーンアニメーション実装

ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風ＵＩでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>

PHPプログラミングの基礎を学ぼう（1/2） − ＠IT 今回は、PHPによるWebプログラミングの基本と次回以降で作成する「簡易オンラインストア」の概要について説明します。 ＠ITの「今から始める MySQL入門」にてPHPプログラミング入門特集が公開されました。 画像付きで分かりやすい特集なので、PHPをオンラインで学んでみたいという方は参考にできるでしょう。 概要 - コードの埋め込み - フォームの記述 - エラー処理 - 簡易オンラインストアの構築 関連サイト ＰＨＰ入門＆ＴＩＰＳ

JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」 2007年02月27日- ModalBox ? An easy way to create popups and wizards JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」。 次のように、LightBox風に同一ページ内で動作するウィザードを作成することが出来ます。 動画が軽くてサクサク動くこのUI は使いどころによってはかなり便利なサイトであるという印象を与えることが出来そう。 実装方法は次の流れ 1) まず、JavaScriptファイルとCSSファイルを読み込みます。 <script type="text/javascript" src="includes/prototype.js"></script> <script type

注目！Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」 2007年02月27日- swfIR: swf Image Replacement When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」。 こういった仕組みで、久しぶりに感動させられました。 Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。 なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。 次の

Coming SoonGet ready, something cool is coming!

25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー

Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト

ITmedia エンタープライズ：第2回　Zend Frameworkの各コンポーネントを一気に制する (1/3) 前回は、Zend Frameworkの概要とその導入方法について説明しました。今回は、各コンポーネントの使用方法について紹介していきます。「Zend Frameworkの各コンポーネントを一気に制する」という記事の紹介。 Zend_Controller_Router、Zend_Controller_RewriteRouter、Action Controller、Zend_View、Zend_Dbなどの基本コンポーネントの紹介です。 ちなみに、2007年2月末のバージョンが最新となっており、Preview 0.8.0が最新バージョンです。 1.0が待ち遠しい感じですが、0.8.0ということで、公開されて丁度１年ほどになりますが、以前に比べるとだいぶバージョンアップされてるようで

Ten Javascript Tools Everyone Should Have Javascript frameworks have exploded on the scene over the last few years but they're no replacement for a good toolbox とても便利なJavaScript関数集。 次のような便利な関数が紹介されてます。 空白スペースを取り除く trim, ltrim, rtrim 関数 配列の数値ソート 番号フォーマット関数 配列検索 ＨＴＭＬのエスケープ関数 クッキー処理関数 getElementsByClassName Ajax機能提供 trim や HTMLのエスケープ なんかは、ブラウザで動くものは直接JavaScriptに実装してほしいですね。 prototype.jsなどのフレームワークを使わず、

50 sources for web design inspiration by Fuzzy Future When Fuzzy Future first got started, I said that our goal was to build content that other people can use to improve their own projects. WEBデザインの際に使える５０のソース。 当ブログでもいろいろと紹介してきましたが、カッコいいサイトをまとめているサイトがあったので紹介。 デザインに迷ったときはまず、他のデザインサイトを見ていろんなデザインを視覚に入れることが重要ですね。 The Best Designs Six Shooter Media’s Free Templates 2Advanced Studios Andreas Viklund Fre

Creating web sites for the Wii Opera browser Though it may be old news that Wiimote keycodes can be detected by JavaScript in the Wii Opera browser, I could not find a JavaScript library that facilitates handling these input events, so I created my own. Wii用のサイトを作る際に超便利なJavaScriptライブラリ「wii.js」 wii.jsをインクルードすると次のようなAPIを使うことが出来ます。 wii.isWiiOperaBrowser() - WIIで見ているかどうかを true/ false で返す wii.setupHand

Flash＆FlexからYahooのウェブAPIを利用できる公式ライブラリ「Yahoo! AS3 API Libraries」 2007年03月12日- Yahoo! AS3 API Libraries - Yahoo! Developer Network Yahoo! AS3 API libraries are a set of wrapper tools that facilitate access to Yahoo!'s Web APIs from Flex and Flash. Flash＆FlexからYahooのウェブAPIを利用できる公式ライブラリ「Yahoo! AS3 API Libraries」。 ActionScript3で記述されていて、Flex Builder2から使えるようです。 Flexとは、Flashによって、WEBアプリケーションのUI部分やフロント部分の機能

Ext Documentation Centor 超リッチJavaScriptコンポーネント集「Ext」がprototype.jsに対応。 以前、「Yahoo UI Libraryを拡張した超リッチなコンポーネント集」で紹介したリッチなコンポーネント集はYahoo UI Library 用のものでしたが、 なんと、prototype.js+script.aculo.usでも動作するようになりました。 尚、jQueryにも対応しているようです。 こうしたコンポーネントライブラリで、コアとなるライブラリを選択できるのはより多くの開発者が使えていいですね。 ライブラリだけではなく、テーマを切り替えることも出来て、自由度がいい感じです。 コアとなるライブラリを切り分ける、という、このライブラリ自体の設計部分にも注目したいですね。 コアライブラリの切り替え 画面内ウィンドウ データグリッド タブ風Ｕ

CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine Navigation menus have to be intuitive, precise and easy-to-use. CSSベースの超クールなナビゲーション集。 どんなサイトにでも必ず必要になってくるのがメニューナビゲーションです。 秀逸なデザインのナビゲーションを参考にすることで、よいページデザインが作れそうです。 53種類ほどのクールなナビゲーションが紹介されているので、これは知っておいて損はないでしょう。 他のナビゲーションも見る

MySQL FULLTEXT Ngram : LIKE検索より数十倍高速な、お手軽 日本語全文検索 について｜blog｜たたみラボ 前回の記事 - MySQLで全文検索 - FULLTEXTインデックスの基礎知識 - で触れた、FULLTEXTとNgramを駆使した日本語全文検索についてまとめてみました。 MySQLでLIKE検索より数十倍高速な、お手軽 日本語全文検索。 「別途Senna等のインストール／保守やMySQLの再コンパイルはしたくない、でも手軽に全文検索の仕組みを導入したい・・・そんな場合に有効な手法」だそうです。 利用するためのphp/perl モジュールも公開されているようです。 なかなか便利そうなので一度試しておきたいですね。

Devthought - Guillermo Rauch’s Blog CSS Javascript power. Fancy menu Let me introduce you to Fancy Menu CSSとJavaScriptによってFlashで作ったようなクールな動くメニューを作る。 マウスを合わせるとアニメーションしながらマウス位置にカーソルが移動するメニュー。一見、Ｆｌａｓｈだなと思ってみてみるとこれがCSSとJavaScriptで出来てます。 実装がやや難しいのですが、どうしてもCSSとJavaScriptでやりたいという場合は参考に出来ますね。 関連エントリ CSSベースの超クールなナビゲーション集

Tab Interface Scripts | Dr. Web Weblog タブ風ＵＩを実装するための色々。 標準的なタブＵＩから変り種タブＵＩまで、いろいろなタブ式ＵＩを実現するためのライブラリがまとまっています。 Javascript Tabs vom Stilbüro AJAX Tabs Content Script Tabmenu dhtmlxTabbar ActiveWidgets 2.0 続きをみる いろいろあって面白いですね。 関連エントリ クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」

インタラクションデザインパターン（2） アプリケーションロールデザイン、 基礎の10パターン ソシオメディア　上野 学 2007/3/19 前回の「80年代のAppleに学ぶUIの部品化とガイドライン」では、インタラクションデザインの作業にパターンを活用することの有用性について説明しましたが、今回からは、実際にどのようなデザインパターンがあるのかを考えていきたいと思います。 私はこれまでの連載（ユーザビリティのヒント、Webアプリケーションのユーザーインターフェイス）を通して、インタラクションやユーザーインターフェイスのデザインはプログラムが出来上がってしまってから最後に付け加えるというものではなく、システムの基本的な品質を決定する重要な要素として設計の初期段階から考えなければならないものであると主張してきました。なぜなら、そのシステムが提供しようとしている機能を、画面の見た目や操作の流れ

やろうやろうと思いつつ、やれる段になると何かと理由をつけて結局やらずに済ませてしまうことがあります。個人的なことであればともかく、仕事となると事態は深刻です。 『いまやろうと思ってたのに… かならず直る―そのグズな習慣』では、こういう状況を“偽善グズ”と呼んでいます。 グズはゲームです。先に延ばし、無視し、忘れ、やりたくないことは考えないようにするゲームです。そして、多くの人びとが加わるゲームのひとつを、わたしは“偽善グズ”と呼んでいます。この“偽善グズ”におちいるのは、とても重要な仕事があって、それをやる必要がある、どうしてもやらねばならない、やらないと大変困ったことになる、という場合です。 ところが、あなたはそれをやりたくない。 その仕事があまりにも重要なので、ただ先延ばしするわけにはいかない。これといった適当な理由もなく怠けていれば、あなた自身にもほかの人びとにも顔向けができません。

解説本以上の内容を教えてくれる場所がない。大人数、シアター形式のセミナーでは充実感が薄い。ロクナナワークショップではそんな方々のために、少人数制の講座を開設しました。 テーマは脱初級。講師の心意気・考え方を感じられる距離で、技術だけでなくものの見方・考え方を学習することができます。また、各講師独自の観点でより実践的な内容を学べます。 ROKUNANA WORKSHOP OF MEDIA DESIGN あなたの師匠を探しに来てください。

持たない暮らし 2007-03-19 原則を教えてくれる本は、スゴ本率が高いです。この「持たない暮らし」もそのひとつで、示唆に溢れた原則を教えてくれる本でした。さあ、長文いきますよ。 お部屋も心もすっきりする 持たない暮らし このサイトから -人 が購入しました 全体で -人 がクリック posted with amazlet on 07.03.18 金子 由紀子 アスペクト (2006/12/01) 売り上げランキング: 6977 おすすめ度の平均: とってもよかったです すばらしい!! モノを持たない気持ちよさ Amazon.co.jp で詳細を見る 目次 モノの多さは豊かさをあらわさない モノのない時代は、「たくさんあること＝豊かなこと」でした。 でも、モノが溢れている現代においては、たくさんあることは、むしろ暮らしの貧しさを表現している、といってもいいように思えます。モノがありすぎ

スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」 2007年03月16日- Scrollable HTML table This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」。 次のようなスクロールしてもカラム名が消えず、小さいスペースで配置できるテーブルを作成できます。 （※↓は画像です） 知っておくと、レイアウトを崩さないでテーブルのようなＵＩ が必要な部分で使えそうですね。 設置方法は次の様に簡単 １．ライブラリを読み込み <script type="text/javascript" src="webtoolkit