2012年12月10日月曜日

6年目の朝


快晴の東京、おはようございます。
おかげさまで本日、株式会社ダイレクトサーチジャパンは5周年。
6年目を無事迎えることができました。

ここ1ヶ月ほど、事務所移転に伴う業務でいろいろとてんぱっていて、ほうぼうに迷惑をかけてしまっています。
本当に申し訳ありません。

おそらく今週を目処に移転先も確定し、諸々動き出すのではないかと思います。

というわけで今年度もよろしくお願いします。

代表取締役 田中弘治
投稿者 TANAKA Kohji
ラベル:

2012年11月23日金曜日

事務所移転の準備中

お久しぶりです。TANAKA Kohji です。
秋を飛び越して冬の気配になりましたね。

さてさて。
株式会社ダイレクトサーチジャパンは茅場町駅徒歩5分の場所にあるのですが、にわかに移転の計画が持ち上がりました。

場所は茅場町駅徒歩2分と、今よりも近くなる予定。
理由はいろいろありまして。

「業績好調のための業務拡大のため」だったら嬉しいのですが、明日のご飯を食べることもままならない中小企業ですから、そんなことはありません。

ただただ、いろいろな偶然が重なったからにすぎません。

いつもプロジェクトを一緒に組むパートナーの何人かと話しをしているうちに、一緒の場所に集まることになりました。
なんというか関係者の方向性の延長線上で交わった点が、たまたま事務所移転となったというか、そんな感じです。

新しい事務所は今のところよりも何倍も広く、弊社だけはもとより、我々パートナーだけで使っても使い切れません。

というわけで東京の山手線の東側ではまだまだ数が少ないコワーキングスペースとして利用してもらおうと目論んでいます。
CakePHPやWordPressやWebデザイン等が得意なパートナーが集まる素敵な場所になります。

興味のある方はぜひ一緒に働きましょう。
詳細はまた追って。
それでは。
投稿者 TANAKA Kohji

2012年7月4日水曜日

Bloggerで記事ごとのパーマリンク文字列を任意で指定可能に

昨日の記事で紹介した本(amazon)の出版についてお祝いのメッセージを多数いただきありがとうございます。TANAKA Kohji です。

記事を書いていて、Bloggerの新機能について気づきました。
Bloggerで記事ごとにパーマリンク文字列の指定が可能になっています。

設定箇所は右の画像の通り。
カスタムURLの箇所に入力できます。

パーマリンク(permalink)とは、固定のURLを指し、Bloggerの場合ドメインの後が
/year/month/example-entry.html
となります。

パーマリンクの価値はブログが広めたといっても決して過言ではないでしょう。

もともと一般的なURLは、ブログのような動的に生成されるwebページの場合
/?post_id=123456
のように、クエリーストリングという仕組みで表されるのが一般的でした。
（この場合は記事Noが123456という意味）

今日と違い、当時の検索エンジンは、パーマリンクとクエリーストリングを使用したURLに対し、ページの重み付けを大きく変えていたため、パーマリンク（型のURL）にすることで検索エンジンの上位に表示される機会が多かったのです。

MovableType等の優れたブログシステムは当初からパーマリンクの付与が可能で、書いた記事が上位表示しやすかったことが、ブログという仕組みが流行した一因でもあるでしょう。

Bloggerの場合

このブログは、Bloggerを利用しています。
Bloggerの場合、記事ごとのURLのうち、上述の例でexample-entryにあたる箇所については、記事タイトルから自動的に設定されていました。
たとえば「exampleなentryを書く」というようなタイトルにすると、日本語の箇所がカットされ残された文字列がURLとなります。

今後は、この新機能により、自由に設定が可能です。

ただし自由とはいっても、使用可能な文字には制限があります。

（すべて半角で）アルファベットの大文字小文字、数字、一部の記号  - _ .  です。

残念ながら日本語は使用できません、、、
URLエンコードしてくれたらどんなに嬉しいことか。
今後の改善に期待しています！

（追記）公開後は変更できないので気をつけましょう（笑）
投稿者 TANAKA Kohji
ラベル: ,

2012年7月3日火曜日

『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』発売！

というわけで執筆した原稿が本になりました。TANAKA Kohji です。
まずは、こちらをご覧ください。



本日、わたしが一部原稿を執筆した『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』が発売されました。

この本は、jQueryを使ってサイトのUIを向上させるのに有効なプラグインが、88種類掲載されています。
そのうちの半分以上は、導入に対しての詳しい解説やカスタマイズの案内付き。

どのプラグインも「仕事につかえる」という視点で厳選されていて、活用度の高いプラグインばかりです。

たとえば、先頭に紹介されている jQuery Masonry というプラグインを紹介している章では。
このプラグインは、タイル状に並べた矩形のボックスを、ブラウザの横幅にあわせて並び替えるというもの。パソコンの大きな画面では横に多数並び、スマートフォンなどの画面では横には少数で、その分縦が長くなる。このプラグインの面白いのは、スマートフォンを縦から横にしたときなど、画面の横幅が変わるとアニメーションをしながらボックスが並び変わるところです。
なかなか見ていて楽しいプラグインなのですが、この本では、jQuery Masonry を紹介したあと続けて、 Infinite Scroll という、いわゆる無限ページング（スクロールして画面最下部までくると自動的に次ページをその下に表示する）を紹介しています。

組み合わせて紹介することで、より実装イメージが湧きやすく、製作するサイトで利用しやすくなっています。

掲載されているプラグイン一覧

レイアウト

  • jQuery Masonry ・・・ウィンドウの幅にあわせて要素をアニメーションして配置
  • Modernizr ・・・HTML5やCSS3等の機能に対応しているかどうかを判別
  • Infinite Scroll ・・・無限ページング
  • jQuery UI Layout ・・・WebアプリのようなUIを実現
  • jQuery UI ・・・様々な便利UIのセット
  • jQuery Mobile ・・・スマートフォン用UIを実現
  • PageSlide ・・・ページを横へスライドさせ、ページ脇にコンテンツを表示
  • TwitterBootstrap ・・・CSSフレームワーク。jQueryを使用した機能も多い（本書内では、Modal/Alert/Tab/Collapse/Typeahead等を紹介）
  • FeedReader ・・・Google Ajax APIを使用し外部ドメインのRSSを取得
  • SNBinder ・・・Ajax等で取得したhtmlをテンプレートに流し込む
  • jQSlickWrap ・・・画像の形に合わせて、テキストを回りこませる
  • exValidation ・・・入力内容のバリデーション（チェック）を実施
  • Password Strength ・・・パスワードの強弱を判定し表示
  • ui.elements.js ・・・フォームの要素をキレイにデザイン
  • js-columns ・・・雑誌のような段組みレイアウト
  • jQuery Easy Pinned Footer ・・・ページ最下部にフッターを固定
  • Setting Equal Heights with jQuery ・・・カラム（列）の高さを揃える
  • jquery.vgrid.js ・・・ウィンドウの横幅が変更されたときに再レイアウトするグリッドレイアウト
  • Tiny Scrollbar ・・・スクロールバーのスタイルを変更
  • CrossTable.js ・・・表内でハイライトするセルを十字にフォーカス表示する
  • Noisy ・・・背景にノイズを加えテクスチャっぽくする
  • selectivizr ・・・IE6~IE8でCSS3セレクタを使用可能にする
  • Contactable ・・・ページ脇から問い合わせフォームをスライドして表示
  • filtrify ・・・タグ等によりコンテンツを種類別に絞り込み表示

ナビゲーション

エフェクト

  • parallaxSlider ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示
  • DD_belatedPNG ・・・IEで透過png
  • Cloud Zoom ・・・画像の一部をzoomして表示
  • MobilySlidy ・・・スライドUI
  • Quicksand ・・・アニメーションによる絞り込み・並び替えUI
  • html5.js ・・・IE等でもhtml5を利用
  • Roundabout ・・・回転して画像が入れ替わるギャラリー
  • Background-Position Animation Plugin ・・・任意の要素の背景を入れ替え
  • Foundation ・・・jQueryを利用した多機能UI集
  • Fisheye menu ・・・MacのDocメニュー風UI（天地配置）
  • jqDock ・・・MacのDocメニュー風UI（天地左右配置）
  • jQuery Reel Plugin ・・・360度画像を回転表示するUI（iPhone等にも対応）
  • youRhere ・・・文章にしおりをはさめる機能を実装
  • jquery.spritely ・・・CSSスプライトを使用しアニメーションを作成
  • jQuery Notify bar ・・・Twitter風の通知UIを画面上部からアニメーションして表示
  • jQuery Cycle Plugin ・・・いろんな種類のスライドショー
  • jQuery Peel Back Ad ・・・ページの隅をめくるUIによる（広告）リンク
  • jParallax ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示
  • Zoomooz.js ・・・ページ内の要素をアニメーションさせながら拡大表示
  • Animate CSS Rotation and Scale ・・・CSS3のtransformをjQueryで実装
  • jQzoom Evolution ・・・画像の一部を拡大表示
  • jQuery NiceScroll plugin ・・・iPhoneのような慣性スクロール

グラフィック


以上、総勢88種類のプラグインが紹介されています。
（導入が詳しく掲載されているのは太字のプラグインです）
（わたしが寄稿した記事はマーカーのプラグインです）

jQueryはどなたでも扱いやすいですが、解説が英語だったりして導入に苦労することもあるでしょう。
そんなときに実践的な内容でカスタマイズ方法も掲載されている本書は、きっとあなたの役に立ってくれるはずです。



本書に寄稿するにあたり執筆経験のないわたしにレクチャーをしてくださいましたMdN編集部のKさん、ありがとうございました。
また、Kさんにわたしをご紹介していただきました下北沢オープンソースカフェのマスターのKawamuraさんありがとうございます。2冊献本いただいているので1冊寄贈しますね。

これだけ豊富だと、ぱらぱら眺めているだけでもWebサイト構築時のUIのヒントが得られますよ。ぜひ1冊どうぞ。
投稿者 TANAKA Kohji
ラベル: , ,

2012年6月27日水曜日

CakePHP HTML Cache Plugin の2.x対応と追加機能とか

@mon_sat です。
CakePHP HTML Cache Plugin についてメモしておきます。

CakePHPにはキャッシュの機能がありますが、純粋な静的ファイルを書き出すもっと強力なキャッシュをおこなうためのプラグインがあります。
（symfonyでは sfSuperCache 、Fuel PHP ではfuel-pagecacheという同様のプラグイン等があるそうです）

仕組みは、mod_rewriteの機能を利用し、webroot/cache以下に、該当するhtmlやrss等のファイルがあれば、それを直接表示し、無ければ、CakePHPが通常の描画後、webroot/cache以下にページを書き出すというもの。

一度作成するとphpすら使われませんので当然速いわけです。

ただしそのファイルを消さないと永遠にCakePHPが再表示しませんので、以下のコマンドのようなことでファイルを消してあげる必要がありますが。

find /full/path/to/app/webroot/cache -mmin +360 | xargs rm -f

さてこのプラグイン、もともとはMatt Curry氏が作成したプラグインです。
その後CakePHP2.x系への対応がまだのようでしたので、forkして作成したのが、こちらです。

インストールと準備

ダウンロード後、APP/Plugin/HtmlCacheとなるように配置してください。
bootstrap.phpでPluginをloadします。

# APP/Config/bootstrap.php
CakePlugin::load('HtmlCache');

webroot/.htaccess を修正します。
（修正内容は extras/.htaccess のようにします）

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} ^GET$
    RewriteCond %{DOCUMENT_ROOT}/cache/$1/index.html -f
    RewriteRule ^(.*)$ /cache/$1/index.html [L]
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>

プラグインの使用

あとは、Controllerで $helpers = array('HtmlCache.HtmlCache'); のようにします。
ただ特定のactionだけ使用するというケースがほとんどでしょう。ですので。
viewファイル内で使用する場合は、次のようにします。

$this->Helpers->load('HtmlCache.HtmlCache');
$this->HtmlCache->options($options);    // 必要に応じて

オプションの指定

オプションは配列で指定します。
# view
$this->HtmlCache->options(array('cache_dir' => 'statics'));

オプション（デフォルト）
  • 'test_mode' => false,
    • trueにするとdebug level が1以上でもキャッシュファイルを書き出します
  • 'host' => null,
  • 'domain' => false,
    • trueにすると、複数ドメインで運用している場合にhostごとに書き出すことができます
    • $_SERVER['HTTP_HOST']もしくはhostオプションの値が使用されます
  • 'www_root' => APP . WEBROOT_DIR,
    • webルートのフォルダをフルパスで指定します
  • 'cache_dir' => 'cache',
    • デフォルトでは webroot/cache 以下にキャッシュファイルが作られます
    • ここを修正した場合は webroot/.htaccess も適宜修正しましょう
  • 'filename' => 'index.html',
    • 拡張子なしでCakePHPにアクセスしたときに書き出すファイル名です
    • index.htm や index.php を使用したいという場合はここを書き換えます
  • 'file_path' => null,
    • まったく別のURL（パス）で書き出したいという場合は、ここを編集します
    • 例） 'file_path' => $this->webroot . DS . $item['Item']['filename'],
というわけでRSS等の出力に絶大な効力を発揮する HtmlCache Plugin を紹介しました。

ぜひご活用ください

MontBlanc-Sucks/HtmlCache
ご意見・ご要望・ご質問は、 @mon_sat までお願いします。
投稿者 mon_sat
ラベル: , ,

2012年6月26日火曜日

CakePHP OGP Plugin つくりました

@mon_sat です。

OGPタグというものがあります。
facebookとかでシェアしたときに、任意のタイトルやdescription、画像等を設定するmetaタグです。
このブログの場合は、次のようになります。

さて、このOGPタグと、titleタグ、metaタグの一部（description）等は、内容が重なります。

これらを、view等から簡単に設定できると良いですね。
というわけで @yando さんのアドバイスを受け、プラグインにしてみました。

CakePHP OGP Plugin

インストールと設定

プラグインをダウンロードし、 APP/Plugin/Ogp となるように設置します。

git で clone / submodule add する場合は、次のような感じで
cd your_app
git clone git://github.com/monsat/Ogp.git Plugin/Ogp

CakePHP2.xではプラグインを明示的に読み出す必要があるので

# APP/Config/bootstrap.php
CakePlugin::load('Ogp');
とし、Controllerで、OgpHelperを読み出します。

# APP/Controller/AppController.php
public $helpers = array( 'Html', 'Form', 'Ogp.Ogp');
これで準備完了です。

次に、サイトの設定をします。
# APP/Config/bootstrap.php
Configure::write('Site', array(
  'site_name' => 'サイトのタイトル',
  'description' => 'サイトの説明',
  'image' => '/img/image.png',  // サイトの画像
  'type' => 'website',                 // サイトの種類（blog等）
  'separator' => ' - ',                 // ページタイトルとサイトタイトルの間の文字列
));
Configure::write('Ogp.settings', array(
  'base' => 'Site.',
  'autoKeys' => array('type', 'site_name', 'description', 'image'),   // viewで設定しなくても必ず書き出すOGPタグ
));

Configureで Ogp.settings.base で設定しているので、
Configure::read('Site.site_name') や Configure::read('Site.description') などが利用されます。

使い方

layoutファイルの次の記述の箇所に、他のmetaタグと一緒に書き出されます。

# layout
echo $this->fetch('meta');

viewファイルでは、以下のように使います。
# view
// <title>タグ($title_for_layout)も同時に設定されます。
$this->Ogp->title('ページのタイトル');
// フルURLで書き出されます。
$this->Ogp->image($post['Post']['author_image_url']);
// その他は、ogpタグのname（og:無し）とcontent
$this->Ogp->set(
  'description',
  "stripped \n and <b>tags</b>",
  // options
  array(
    'meta' => true,
  ),
);

contentに使用される文字列は、タブ・改行文字およびhtmlタグを除去します。
※ stripTagsオプションを false にすると、htmlタグの除去は行われません

metaオプションを true にすると、通常のmetaタグも同時に書き出されます。

この記事の例では、次のようなタグが出力されるでしょう。（順番は変えてあります）

<title>ページのタイトル - サイトのタイトル</title>
<meta property="og:title" content="ページのタイトル - サイトのタイトル" />
<meta property="og:site_name" content="サイトのタイトル" />';

<meta name="description" content="サイトの説明" />
<meta property="og:description" content="サイトの説明" />
<meta property="og:type" content="website" />

<meta property="og:image" content="http://example.com/img/author_image_example.png" />

という具合です。
$this->Ogp->title()を設定しなければ、Site.site_nameの値がtitleタグとog:titleに使用されます。

ぜひご活用ください

monsat/Ogp · GitHub
ご意見・ご要望・ご質問があれば、 @mon_sat までお願いいたします。
投稿者 mon_sat
ラベル: , ,

2012年6月25日月曜日

jQuery Link Box プラグイン作りました

@mon_sat です。
非常に車輪の再発明的ではありますが、jQuery Link Box プラグインを作りました。
（jquery 1.7以上に対応しています）


簡単に言うと、リンクの外側のボックス（div等）全体をクリック可能にするためのプラグインです。

使用例は以下およびsample/index.htmlをご覧ください

使い方


jqueryを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.linkbox.js"></script>
</body>の直前に記述するか、<head></head>内に記述してください。

クリック可能にするbox（div等）にdata-click="linkbox"を記述します

<div data-click="linkbox" class="sample">
    <p>sample <a href="/">最初のリンク</a> が使用されます。</p>
    <p>sample <a href="/p/blog-page.html">このリンク</a> は直接クリックする必要があります。</p>
</div>
[data-click="linkbox"]が書かれた属性内の最初のリンクが使用され、ボックスをクリックしたときに遷移します。

（オプション）必要に応じて、ボックスにスタイルを設定します

ボックスがクリック可能であることを示すようなstyleを記述しましょう。
.linkbox {
    background-color: #eee;
}
div.sample {
    cursor: pointer;
}
デフォルトでは .linkbox というクラスが使用されます。
※ 追記（2012-06-29）：iPad等で有効にするためには、cursor: pointer をあらかじめ指定しておく必要があります。

（オプション）任意のaタグのリンク先を使用したい場合

[data-linkbox="target"]という属性が存在するリンクは、優先して使用されます。
<div data-click="linkbox">
    <p>sample <a href="/">最初のリンク</a> ですが、直接クリックする必要があります。</p>
    <p>sample <a href="/p/blog-page.html" data-linkbox="target">このリンク</a> は優先して使用されます。</p>
</div>


デモ


サンプル1
https://github.com/monsat/jquery.linkbox
サンプル2
https://github.com/monsat/jquery.linkbox

<a href="/" data-linkbox="target">このようなリンク</a>の場合、優先して使用されます
https://github.com/monsat/

ぜひご活用ください

monsat/jquery.linkbox · GitHub
ご意見ご要望ご質問は、@mon_satまでお願いします。
投稿者 mon_sat
ラベル: , ,
登録: 投稿 (Atom)

Facebookへの「いいね！」ありがとうございます