tag:blogger.com,1999:blog-38353251204593442372024-03-14T06:39:31.503+09:00株式会社ダイレクトサーチジャパンOfficial Blog of Direct Search Japan Inc.TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comBlogger337125tag:blogger.com,1999:blog-3835325120459344237.post-30816047197602104222015-07-12T15:32:00.000+09:002015-07-12T15:32:05.684+09:00与えられた仕事と創りだされる仕事お久しぶりです。<a href="https://www.facebook.com/kohji.tanaka" target="_blank">TANAKA Kohji</a> です。<br />
ふと昔話を思い出したので、ブログを書いてみました。<br />
<br />
<h3>
「『顧客を喜ばせるために』仕事をしよう」</h3>
<br />
大学を卒業し入社したベンチャー企業で、あるときのボーナスが少なかったことがあります。<br />
営業成績からするともっと評価されるはずなのにと思っていたら、社長から謝罪とともに訂正のメールが送られてきました。<br />
<br />
それがもとで、社長とメールをするようになったので、なにがきっかけとなるかは分かりません。<br />
<br />
「最近どうですか?」という質問に、当時自分としては珍しく仕事に苦痛を感じていたこともあり、そのことを伝え、最後は「自分の頭で考えて仕事ができていないというのが原因と考えているので、試行錯誤しているところです」というような内容を伝えました。<br />
<br />
それに対する返信は今でも覚えています。<br />
<br />
要約すると「それが今の状況を改善することに繋がるでしょうか?それよりも『顧客を喜ばせるために』仕事をしよう」というものでした。<br />
<br />
なるほど。そういう視点もあるのかと勉強になっただけでなく、実際に苦痛を感じる状況からは徐々に改善されていきました。<br />
<br />
<h3>
「自分の頭で考えて仕事をしよう」</h3>
<br />
一方で「仕事とは自分の頭で考えて行うもの」というのは、仕事をしているときに常に意識する必要があるポイントなのかなと(今でも)思っています。<br />
<br />
仕事にはやりがいが必要だったり、つらい状況でモチベーションを保つ必要があったりするわけですが、仕事を「与えられた」ものとしてとらえていたり、仕事を「やらされている」と認識していると、つらく感じることが増えてしまうのです。<br />
<br />
一方で、仕事を「自ら産みだすもの」ととらえている場合、それは<b>前向きな生産活動</b>に一変します。<br />
<br />
今日の仕事の多くは単純作業ではありません。<br />
<b>すべてはサービスになっていく</b>なか、仕事は「自分の頭で考えて」行う必要がでてきました。<br />
<br />
たとえ「マニュアル」が整備されていても、今この状況がマニュアル通りに行動するべきなのかどうかは「自分の頭で考えて」行う必要があるのです。<br />
<br />
人生の貴重な時間の多くを、仕事に費やすことになるでしょう。<br />
与えられた仕事を与えられたままこなすというのは、なんてもったいない時間の使い方なんだろうと思うのです。<br />
時間はお金では買えませんから。<br />
<br />
<b>昨日と今日で、ほんの少しやり方を変えてみる。</b><br />
ただそれだけで、仕事は与えられたものではなくなります。<br />
<br />
人生につかれていたらぜひどうぞ。<br />
<div>
<br /></div>
TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-85498352149799066032014-01-31T17:39:00.001+09:002014-01-31T17:56:03.738+09:00https://stackedit.io/ を試してみました<p><a href="https://stackedit.io/">https://stackedit.io/</a> <br>
というmarkdownでブログ記事が書けるWebアプリケーションを見つけました。</p>
<p><strong>Bloggerへの投稿</strong>もできるとのことで、ちょっと試してみたいと思います。</p>
<p>日本語への<strong>対応</strong>問題もありますよね。 <br>
<a href="http://markdown.jp/">日本語markdownユーザー会</a>というのもありますし。 <br>
半角スペースを開けないと太字対応しないmarkdownパーサーもありますが、これは問題ないようです。素敵。</p>
<p>今後は常用利用することになりそうです。 <br>
みなさんもぜひどうぞ。</p>
<ul>
<li><a href="https://stackedit.io/">https://stackedit.io/</a></li>
</ul>
<hr><div class="se-section-delimiter"></div>
<h2 id="isdraft-true">isDraft: true</h2>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-62581755056959870262014-01-03T02:03:00.000+09:002014-01-03T09:17:23.227+09:00布団のなかで考えた、年齢別アドバイス(男子編)2014年になりました。<br />
あけましておめでとうございます。<a href="https://www.facebook.com/kohji.tanaka" target="_blank">TANAKA Kohji</a>です。<br />
<br />
夜、急に目が覚めてしまい、ひとり考えごとをしていたら記事に残したくなりました。<br />
あまり深く考えずに書いているので多少上から目線になったりするかもしれませんが、そのへんは何卒ご容赦をば。<br />
<br />
<a href="http://www.coworking.tokyo.jp/" target="_blank">コワーキングスペース茅場町 Co-Edo</a>を始めたことで2013年は、例年より、年下の人と接する機会が増えました。<br />
なかには絶賛「人生について迷い中」という方もいたりして、そういう人と話をする機会が増えてきて、おじいちゃん的アドバイスもたまには良いかなと思ったり。<br />
<br />
基本的に世代論みたいのは信用していないのですが、年齢の重ね方というのはある程度似ているところも出てくるかもしれないので、その限りでお話したいと思います。<br />
<br />
また、インターネットや携帯電話をはじめ、ツールの有無で考え方や生き方というのは変わったりすると思うのですが、そういう要素を極力とりのぞいた、なるべく普遍的な内容になるように努めます。<br />
<br />
<h3>
20歳〜25歳くらいの君へ</h3>
本を読みましょう。それも自己啓発系の本を。<br />
そこにはたくさんの「どう生きるか」が書かれています。多くの「どう生きるか」を目にし、<b>自分の資産にしておく</b>ことが大切です。<br />
<br />
「どう生きるか」がわかるのであれば、好きな作家や有名人のエッセイでも構いません。<br />
その場合は心酔している誰かの書籍を読みあさりましょう。<br />
<br />
ここで大事なことは「ああ、どれも一緒だな」と思えるくらいになることです。つまりそれはあなたが<b>シンプルな答えをひとつ導き出したということ</b>だからです。<br />
<br />
どんなに頑固なあなたやわたしも、人生において<b>最も柔軟にものごとを判断できるのがこの頃</b>だと思います。頭が固くなってからでは遅いので、今すぐ試してみてください。<br />
<br />
<h3>
25歳〜30歳くらいの君へ</h3>
<div>
チャレンジしましょう。そして勉強しましょう。</div>
<div>
人生で最もパフォーマンスを発揮できるときかもしれません。10代〜20代で得たものをフル活用して、全速力で勝負してください。</div>
<div>
勝負といっても(必ずしも)「独立する」とか<b>人生の転機という話ではありません</b>。あくまで全力疾走しましょうという話です。</div>
<div>
<br /></div>
<div>
今いる環境が心地よい方は、その環境のまま走り続けましょう。今いる環境を変えたいという方は、環境を変えても良いかもしれません。</div>
<div>
環境はどこでも良いのです。大事なことは、全速力で勝負することです。</div>
<div>
車で言えば、ギアをMaxまであげて走るということです。</div>
<div>
<br /></div>
<div>
そしてもうひとつ。スキルアップに努めましょう。</div>
<div>
このさき何をするとしても自分自身のスキル以上のことはできません。今やるべきことは貯金を使い果たすことではなく、貯金をしつつ消費していくことです。</div>
<div>
半年前の自分を振り返り「あのころは今と比べて何もできていなかったな」と思えるくらいになりましょう。</div>
<br />
<h3>
30歳〜35歳くらいの君へ</h3>
<div>
手を抜きながら仕事をしましょう。</div>
<div>
たまにはあえて全力を出すことをやめましょう。大丈夫。それでも充分パフォーマンスを発揮できるでしょうから。</div>
<div>
<br /></div>
<div>
20代のころと比べると脳や体力に衰えが始まるころです。重要なことは、<b>そのことをあらかじめ意識して行動する</b>ということです。</div>
<div>
もしあなたが、全速力で走っているにもかかわらず、なかなか思うように成果が上がらなくなったと感じたときは、まさに今、次の段階に来ている証です。</div>
<div>
<br /></div>
<div>
イメージ的には車でサードギアくらいでアクセルをベタ踏みしている状態なのです。</div>
<div>
ちょっとアクセルをゆるめたくらいでは、スピードは変わりません。</div>
<div>
ガソリン(体力)も大切なリソースです。大事に使いましょう。</div>
<div>
<br /></div>
<div>
そしてその分、空いた時間を使っていろいろなことを試行錯誤するというのも良いですね。</div>
<div>
<br /></div>
<h3>
35歳〜40歳くらいの君へ</h3>
<div>
足を前に踏みだそう。</div>
<div>
もしかしたら人生に迷う人が多いのが男性の場合は30代中盤くらいかもしれません。</div>
<div>
ですが、もう迷う必要はありません。</div>
<div>
<br /></div>
<div>
今までの経験や知識を活かし、あなたの思うままに進みましょう。</div>
<div>
20代のころとても大事にしていた何かを、失っても困らないということに気づくのはこのころかもしれません。</div>
<div>
ゼロになってもともとです。</div>
<div>
<br /></div>
<div>
月並みな良い方ですが「やって後悔することとやらないで後悔すること」どちらを選ぶかを考えましょう。両者の違いを本当に理解できるようになるのはこの時期のような気がします。</div>
<div>
<br /></div>
<h3>
40歳〜それ以上のあなたへ</h3>
<div>
若い人にアドバイスを送りましょう。</div>
<div>
とくに来月30代が終わるわたしに対し(笑)</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
それでは。</div>
<div>
昨年11月くらいのつらい時期を先月乗り越えさせてくれた親愛なる友人たちに感謝の意味をこめて。</div>
TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-24827392467097093562013-08-14T13:49:00.001+09:002013-08-14T13:54:11.322+09:00Chromeを他人に貸す時や画面キャプチャをとるときに便利なあれの話暑い日が続きますね。みなさんあけましておめでとうございます。<br />
<div>
TANAKA Kohjiです。</div>
<div>
<a href="http://blog.coworking.tokyo.jp/" target="_blank">コワーキングスペース茅場町 Co-Edoのブログ</a>を始めてから、すっかり更新が滞ってしまいましたので、一応新年の挨拶をしてみました。</div>
<div>
<br /></div>
<div>
<h2>
最近話題のGoogle Chromeのパスワード管理のお話</h2>
<div>
話題になったのはいつからでしたね。<br />
たぶんわたしが知ったのはこの辺の記事だったはずです。<br />
<a href="http://www.itmedia.co.jp/news/articles/1308/08/news033.html?utm_source=dlvr.it&utm_medium=twitter" target="_blank">Google Chromeに保存したパスワードが丸見えに、開発者が問題指摘 - ITmedia ニュース</a><br />
<br />
「ほおほお。パスワードが丸見えなんだ」と思ったものの、あまり他人にパソコンを貸すということのないわたしはあまり気に留めていませんでした。<br />
それどころか「確認できたんだ!」という驚きのほうが強く、実に便利だなあと(笑)<br />
<br />
さて、この後、ユーザー側とGoogleの開発者とで若干論戦になったようですが、まあ根本的にセキュリティに対する考え方が違うので、水掛け論も仕方ないような気がします。<br />
<br />
<h3>
ユーザー側でどうやって対処したら良いの?</h3>
この件は端的に言うと「他人にパソコンを一時的に操作してもらうとき、簡単に確認できちゃうからそれは困る」ということかなあと思います。<br />
<br />
ではユーザー側はどうしたら良いんでしょうね。<br />
というわけで現実的に一番簡単な、根本的な解決策を。<br />
<br />
Google Chromeには、<a href="http://japan.internet.com/webtech/20111214/9.html" target="_blank">2011年12月にリリースしたバージョン16から、複数ユーザー設定の切り替えができる</a>ようになっています。<br />
<br />
この機能は、ひとりのユーザーで使用する場合でも、複数のGoogleアカウントをログアウトすることなく使い分けることができたりと、非常に使い勝手が良い機能です。<br />
わたしの場合、常にふたつのユーザーを使用し<b>Google Appsアカウントで使用するもの</b>と、<b>gmailアカウントで使用するもの</b>と使い分けています。<br />
<br />
他にもお勧めな利用シーンとしては次の2つ<br />
<br />
<ul>
<li>プレゼン用</li>
<li>画面キャプチャ用</li>
</ul>
<br />
いずれも<b>ブックマークや拡張機能を入れていないユーザーを作成</b>しています。<br />
これで、<b>あなたの恥ずかしいブックマーク等が晒されることはなくなります</b>ね!<br />
<br />
というわけでとてもお勧めな複数ユーザー設定の機能ですが、当然に、<b>パスワード管理も別々</b>になります。<br />
<br />
一時的にパソコン操作を他の人に代わってもらう場合は、そのようなユーザーを用意しておくと良いと思います。<br />
<br />
<br />
<h2>
複数ユーザーを使用する設定方法</h2>
ただこの機能、デフォルトではオンになっていないため、設定が必要です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4>
環境設定( chrome://settings/ )</h4>
<div>
左側のタブの「設定」を選択し、「ユーザー」という項目より。</div>
<div>
<b>新しいユーザーを追加</b>を選択します。</div>
<div>
chrome://settings/createProfile</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-2okwOQJz3c8/UgsG1uUItOI/AAAAAAAAA10/HJ19MEJFjlk/s1600/chrome_start.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="http://3.bp.blogspot.com/-2okwOQJz3c8/UgsG1uUItOI/AAAAAAAAA10/HJ19MEJFjlk/s320/chrome_start.png" width="320" /></a></div>
<div>
<br /></div>
<div>
つぎに、<b>適当なアイコンの選択</b>と、<b>ユーザー名の設定</b>をします。</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-sv-7pRScsBg/Ugr_oAeiLeI/AAAAAAAAA1U/kKdWiAsQ2D0/s1600/chrome_user.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="http://1.bp.blogspot.com/-sv-7pRScsBg/Ugr_oAeiLeI/AAAAAAAAA1U/kKdWiAsQ2D0/s320/chrome_user.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
そうすると、2つ目のユーザーが作成されます。</div>
<div class="separator" style="clear: both; text-align: left;">
アイコンは選択したものが使用されますので、気に入らなければ適当に変えておきましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-d30ZQ4kFf8A/Ugr_oBnZObI/AAAAAAAAA1c/V_vEEm_P8aU/s1600/chrome_double.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="234" src="http://4.bp.blogspot.com/-d30ZQ4kFf8A/Ugr_oBnZObI/AAAAAAAAA1c/V_vEEm_P8aU/s320/chrome_double.png" width="320" /></a></div>
<br />
あとは、メニューバーに追加された「ユーザー」より、そのユーザーを選択するだけです。<br />
<br />
<h2>
自分でできることは自分でしよう</h2>
</div>
<div>
たとえば外出時、自分の家の鍵は自分でかけるように、最低限しなければならないこともあります。</div>
<div>
<br /></div>
<div>
職場やコワーキングスペース等、いろんな人が集まる環境では、一瞬でもパソコンから離れる時は、(MacBookを閉じたりして)パスワードロックすることが大切です。</div>
<div>
たとえ知っている人しかいない環境であっても。</div>
<div>
<br /></div>
<div>
自分のパソコンの中には大切なデータが保存されているんだということを、ぜひ意識しましょう。</div>
<div>
今後もインターネットの世界はどんどん便利になっていくことでしょう。</div>
<div>
そのとき、最低限自分の家の鍵も閉めないようなことでは、不正利用されても仕方がありません。</div>
<div>
<br /></div>
<div>
こんな便利な機能を用意してくれているのですから、活用してみてはいかがでしょうか。</div>
TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-62167075987041586472012-12-10T10:00:00.000+09:002012-12-10T10:00:03.532+09:006年目の朝<div class="separator" style="clear: both; text-align: center;">
<a href="http://openclipart.org/image/800px/svg_to_png/166360/Champagne_Showers_1_by_Merlin2525.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="http://openclipart.org/image/800px/svg_to_png/166360/Champagne_Showers_1_by_Merlin2525.png" width="229" /></a></div>
<br />
快晴の東京、おはようございます。<br />
おかげさまで本日、株式会社ダイレクトサーチジャパンは5周年。<br />
6年目を無事迎えることができました。<br />
<br />
ここ1ヶ月ほど、事務所移転に伴う業務でいろいろとてんぱっていて、ほうぼうに迷惑をかけてしまっています。<br />
本当に申し訳ありません。<br />
<br />
おそらく今週を目処に移転先も確定し、諸々動き出すのではないかと思います。<br />
<br />
というわけで今年度もよろしくお願いします。<br />
<br />
<div style="text-align: right;">
代表取締役 田中弘治</div>
TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-4796758837150501452012-11-23T15:12:00.000+09:002012-11-23T15:13:21.543+09:00事務所移転の準備中お久しぶりです。TANAKA Kohji です。<br />
秋を飛び越して冬の気配になりましたね。<br />
<br />
さてさて。<br />
株式会社ダイレクトサーチジャパンは茅場町駅徒歩5分の場所にあるのですが、にわかに移転の計画が持ち上がりました。<br />
<br />
場所は茅場町駅徒歩2分と、今よりも近くなる予定。<br />
理由はいろいろありまして。<br />
<br />
「業績好調のための業務拡大のため」だったら嬉しいのですが、明日のご飯を食べることもままならない中小企業ですから、そんなことはありません。<br />
<br />
ただただ、いろいろな偶然が重なったからにすぎません。<br />
<br />
いつもプロジェクトを一緒に組むパートナーの何人かと話しをしているうちに、一緒の場所に集まることになりました。<br />
なんというか関係者の方向性の延長線上で交わった点が、たまたま事務所移転となったというか、そんな感じです。<br />
<br />
新しい事務所は今のところよりも何倍も広く、弊社だけはもとより、我々パートナーだけで使っても使い切れません。<br />
<br />
というわけで東京の山手線の東側ではまだまだ数が少ないコワーキングスペースとして利用してもらおうと目論んでいます。<br />
CakePHPやWordPressやWebデザイン等が得意なパートナーが集まる素敵な場所になります。<br />
<br />
興味のある方はぜひ一緒に働きましょう。<br />
詳細はまた追って。<br />
それでは。TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-7123787372439415352012-07-04T10:06:00.000+09:002012-07-04T10:09:16.605+09:00Bloggerで記事ごとのパーマリンク文字列を任意で指定可能に<a href="http://blog.direct-search.jp/2012/07/jquery-plugin.html" target="_blank">昨日の記事</a>で紹介した本(<a href="http://www.amazon.co.jp/gp/product/4844362720/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4844362720&linkCode=as2&tag=tinianwinds-22&l=as2&o=9&a=4844362720" target="_blank">amazon</a>)の出版についてお祝いのメッセージを多数いただきありがとうございます。TANAKA Kohji です。<br />
<br />
記事を書いていて、Bloggerの新機能について気づきました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2m8S7fmjjQo/T_OSMfKovQI/AAAAAAAAAr0/3xslY3g7eHg/s1600/ss_permalink.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/-2m8S7fmjjQo/T_OSMfKovQI/AAAAAAAAAr0/3xslY3g7eHg/s1600/ss_permalink.png" /></a></div>
Bloggerで記事ごとに<b>パーマリンク文字列の指定が可能に</b>なっています。<br />
<br />
設定箇所は右の画像の通り。<br />
カスタムURLの箇所に入力できます。<br />
<br />
パーマリンク(permalink)とは、固定のURLを指し、Bloggerの場合ドメインの後が<br />
<b>/year/month/example-entry.html</b><br />
となります。<br />
<br />
パーマリンクの価値はブログが広めたといっても決して過言ではないでしょう。<br />
<br />
もともと一般的なURLは、ブログのような動的に生成されるwebページの場合<br />
<b>/?post_id=123456</b><br />
のように、クエリーストリングという仕組みで表されるのが一般的でした。<br />
(この場合は記事Noが123456という意味)<br />
<br />
今日と違い、当時の検索エンジンは、パーマリンクとクエリーストリングを使用したURLに対し、ページの重み付けを大きく変えていたため、パーマリンク(型のURL)にすることで検索エンジンの上位に表示される機会が多かったのです。<br />
<br />
MovableType等の優れたブログシステムは当初からパーマリンクの付与が可能で、書いた記事が上位表示しやすかったことが、<b>ブログという仕組みが流行した一因でもある</b>でしょう。<br />
<br />
<h4>
Bloggerの場合</h4>
このブログは、Bloggerを利用しています。<br />
Bloggerの場合、記事ごとのURLのうち、上述の例でexample-entryにあたる箇所については、記事タイトルから自動的に設定されていました。<br />
たとえば「exampleなentryを書く」というようなタイトルにすると、日本語の箇所がカットされ残された文字列がURLとなります。<br />
<br />
今後は、この新機能により、自由に設定が可能です。<br />
<br />
ただし自由とはいっても、使用可能な文字には制限があります。<br />
<br />
<b>(すべて半角で)アルファベットの大文字小文字、数字、一部の記号 - _ . です。</b><br />
<br />
残念ながら日本語は使用できません、、、<br />
URLエンコードしてくれたらどんなに嬉しいことか。<br />
今後の改善に期待しています!<br />
<br />
(追記)公開後は変更できないので気をつけましょう(笑)TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-9686000157631906292012-07-03T23:12:00.001+09:002012-07-04T09:36:00.911+09:00『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』発売!というわけで執筆した原稿が本になりました。TANAKA Kohji です。<br />
まずは、こちらをご覧ください。<br />
<br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tinianwinds-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4844362720" style="height: 240px; width: 120px;"></iframe><br />
<br />
本日、わたしが一部原稿を執筆した『<a href="http://www.amazon.co.jp/gp/product/4844362720/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4844362720&linkCode=as2&tag=tinianwinds-22&l=as2&o=9&a=4844362720" target="_blank">jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック</a>』が発売されました。<br />
<br />
この本は、jQueryを使ってサイトのUIを向上させるのに有効なプラグインが、<b>88種類掲載</b>されています。<br />
<b>そのうちの半分以上は、導入に対しての詳しい解説やカスタマイズの案内付き。</b><br />
<br />
どのプラグインも「仕事につかえる」という視点で厳選されていて、<b>活用度の高いプラグインばかり</b>です。<br />
<br />
たとえば、先頭に紹介されている<a href="http://masonry.desandro.com/" target="_blank"> jQuery Masonry</a> というプラグインを紹介している章では。<br />
このプラグインは、タイル状に並べた矩形のボックスを、ブラウザの横幅にあわせて並び替えるというもの。パソコンの大きな画面では横に多数並び、スマートフォンなどの画面では横には少数で、その分縦が長くなる。このプラグインの面白いのは、スマートフォンを縦から横にしたときなど、<b>画面の横幅が変わるとアニメーションをしながらボックスが並び変わる</b>ところです。<br />
なかなか見ていて楽しいプラグインなのですが、この本では、jQuery Masonry を紹介したあと<b>続けて</b>、 <a href="https://github.com/paulirish/infinite-scroll/" target="_blank">Infinite Scroll</a> という、いわゆる無限ページング(スクロールして画面最下部までくると自動的に次ページをその下に表示する)を紹介しています。<br />
<br />
組み合わせて紹介することで、<b>より実装イメージが湧きやすく、製作するサイトで利用しやすく</b>なっています。<br />
<br />
<h3>
掲載されているプラグイン一覧</h3>
<div>
<h4>
レイアウト</h4>
<ul>
<li><a href="http://masonry.desandro.com/" target="_blank">jQuery Masonry</a> ・・・ウィンドウの幅にあわせて要素をアニメーションして配置</li>
<li><a href="http://modernizr.com/" target="_blank"><b>Modernizr</b></a> ・・・HTML5やCSS3等の機能に対応しているかどうかを判別</li>
<li><a href="https://github.com/paulirish/infinite-scroll/" target="_blank"><b>Infinite Scroll</b></a> ・・・無限ページング</li>
<li><a href="http://layout.jquery-dev.net/" target="_blank"><b>jQuery UI Layout</b></a> ・・・WebアプリのようなUIを実現</li>
<li><a href="http://jqueryui.com/" target="_blank"><b>jQuery UI</b></a> ・・・様々な便利UIのセット</li>
<li><b><a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a></b> ・・・スマートフォン用UIを実現</li>
<li><a href="http://srobbin.com/jquery-plugins/pageslide/" target="_blank"><b>PageSlide</b></a> ・・・ページを横へスライドさせ、ページ脇にコンテンツを表示</li>
<li><span style="background-color: #fff2cc;"><b><a href="http://twitter.github.com/bootstrap/" target="_blank">TwitterBootstrap</a></b> ・・・CSSフレームワーク。jQueryを使用した機能も多い(本書内では、Modal/Alert/Tab/Collapse/Typeahead等を紹介)</span></li>
<li><span style="background-color: #fff2cc;"><b><a href="https://github.com/monsat/FeedReader" target="_blank">FeedReader</a></b> ・・・Google Ajax APIを使用し外部ドメインのRSSを取得</span></li>
<li><span style="background-color: #fff2cc;"><b><a href="https://github.com/snakajima/SNBinder" target="_blank">SNBinder</a></b> ・・・Ajax等で取得したhtmlをテンプレートに流し込む</span></li>
<li><a href="http://www.jwf.us/projects/jQSlickWrap/" target="_blank"><b>jQSlickWrap</b></a> ・・・画像の形に合わせて、テキストを回りこませる</li>
<li><a href="http://5509.me/log/exvalidation" target="_blank"><b>exValidation</b></a> ・・・入力内容のバリデーション(チェック)を実施</li>
<li><a href="http://labs.rnzmedia.co.za/password-strength" target="_blank"><b>Password Strength</b></a> ・・・パスワードの強弱を判定し表示</li>
<li><a href="https://github.com/5509/ui.elements" target="_blank"><b>ui.elements.js</b></a> ・・・フォームの要素をキレイにデザイン</li>
<li><a href="http://code.google.com/p/js-columns/" target="_blank">js-columns</a> ・・・雑誌のような段組みレイアウト</li>
<li><a href="http://johnpatrickgiven.com/jquery/pinned-footer/" target="_blank">jQuery Easy Pinned Footer</a> ・・・ページ最下部にフッターを固定</li>
<li><a href="http://filamentgroup.com/lab/setting_equal_heights_with_jquery/" target="_blank">Setting Equal Heights with jQuery</a> ・・・カラム(列)の高さを揃える</li>
<li><a href="http://blog.xlune.com/2009/09/jqueryvgrid.html" target="_blank">jquery.vgrid.js</a> ・・・ウィンドウの横幅が変更されたときに再レイアウトするグリッドレイアウト</li>
<li><a href="http://baijs.nl/tinyscrollbar/" target="_blank">Tiny Scrollbar</a> ・・・スクロールバーのスタイルを変更</li>
<li><a href="http://creatorish.com/lab/1505" target="_blank">CrossTable.js</a> ・・・表内でハイライトするセルを十字にフォーカス表示する</li>
<li><a href="https://github.com/DanielRapp/Noisy" target="_blank">Noisy</a> ・・・背景にノイズを加えテクスチャっぽくする</li>
<li><a href="http://selectivizr.com/" target="_blank">selectivizr</a> ・・・IE6~IE8でCSS3セレクタを使用可能にする</li>
<li><a href="http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html" target="_blank">Contactable</a> ・・・ページ脇から問い合わせフォームをスライドして表示</li>
<li><a href="http://luis-almeida.github.com/filtrify/" target="_blank">filtrify</a> ・・・タグ等によりコンテンツを種類別に絞り込み表示</li>
</ul>
<h4>
ナビゲーション</h4>
</div>
<div>
<ul>
<li><a href="http://www.geektantra.com/2010/05/jquery-megamenu-2/" target="_blank"><b>jQuery MegaMenu 2</b></a> ・・・メインメニューにマウスカーソルをあわせると子孫メニューをドロップダウンするUI</li>
<li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/" target="_blank"><b>Superfish</b></a> ・・・ドロップダウンメニュー</li>
<li><a href="http://www.sunsean.com/idTabs/" target="_blank"><b>idTabs</b></a> ・・・タブUI</li>
<li><a href="http://itra.jp/jquery_socialbutton_plugin/" target="_blank"><b>jquery.socialbutton</b></a> ・・・各種ソーシャルサイトのシェアボタンを表示</li>
<li><a href="http://jqueryui.com/demos/accordion/" target="_blank"><b>jQuery UI Accordion</b></a> ・・・縦に開閉するアコーディオンUI</li>
<li><a href="http://jqueryui.com/demos/tabs/" target="_blank"><b>jQuery UI Tabs</b></a> ・・・タブUI</li>
<li><a href="http://manos.malihu.gr/jquery-custom-content-scroller" target="_blank"><b>jquery custom content scroller</b></a> ・・・スクロールバーのスタイルを変更</li>
<li><a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank"><b>jQuery Easing Plugin</b></a> ・・・スムーズなアニメーションを実現</li>
<li><a href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/" target="_blank"><b>Awesome Bubble Navigation</b></a> ・・・円形のメニュー</li>
<li><span style="background-color: #fff2cc;"><b><a href="http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html" target="_blank">jBreadCrumb</a></b> ・・・アニメーションするパンくずリスト</span></li>
<li><span style="background-color: #fff2cc;"><b><a href="http://onehackoranother.com/projects/jquery/tipsy/" target="_blank">tipsy</a></b> ・・・ツールチップ</span></li>
<li><span style="background-color: #fff2cc;"><b><a href="https://github.com/wormracer08/Font-Sizer" target="_blank">Font Sizer</a></b> ・・・文字サイズ変更</span></li>
<ul>
<li><span style="background-color: #fff2cc;"><b><a href="https://github.com/monsat/Font-Sizer" target="_blank">Font Sizer 拡張版</a></b> ・・・Font Sizer の拡張版</span></li>
</ul>
<li><span style="background-color: #fff2cc;"><b><a href="http://code.google.com/p/cookies/" target="_blank">Javascript Cookie Library with jQuery bindings and JSON support</a></b> ・・・JSON形式で保存可能なCookieライブラリ</span></li>
<li><a href="http://onehackoranother.com/projects/jquery/droppy/" target="_blank">droppy</a> ・・・深い階層に対応したドロップダウンメニュー</li>
<li><a href="http://jbaron.gr/jquery/" target="_blank">Highliner jQuery Plugin</a> ・・・コンテンツの一部をハイライト表示する</li>
<li><a href="http://draft.blogger.com/"><span id="goog_434037292"></span>jQuery Radmenu Plugin<span id="goog_434037293"></span></a> ・・・円形のセレクトメニュー(ナビゲーション)</li>
<li><a href="http://lagoscript.org/jquery/autopager" target="_blank">jQuery.autopager</a> ・・・オートページングを実装</li>
<li><a href="http://imakewebthings.com/jquery-waypoints/" target="_blank">jQuery Waypoints</a> ・・・スクロールUI。無限スクロールやScrollSpy等</li>
<li><a href="https://github.com/brandonaaron/jquery-mousewheel/" target="_blank">jQuery Mouse Wheel Plugin</a> ・・・マウスホイールのイベントを捕捉</li>
<li><a href="http://www.ajike.co.jp/2011/11/hashchangetab/" target="_blank">hashchangeTab.js</a> ・・・戻る・進むボタンに対応したタブUI</li>
<li><a href="http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin" target="_blank">jQuery Joyride Feature Tour Plugin</a> ・・・サイトの機能ツアー</li>
<li><a href="http://luis-almeida.github.com/jPages/" target="_blank">jPages</a> ・・・アニメーションを使用したページング</li>
<li><a href="http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/docs/" target="_blank">FerroSlider</a> ・・・矢印キーに対応したページング</li>
</ul>
<h4>
エフェクト</h4>
</div>
<div>
<ul>
<li><a href="http://tympanus.net/codrops/2011/01/03/parallax-slider/" target="_blank"><b>parallaxSlider</b></a> ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示</li>
<li><a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/" target="_blank"><b>DD_belatedPNG</b></a> ・・・IEで透過png</li>
<li><a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm" target="_blank"><b>Cloud Zoom</b></a> ・・・画像の一部をzoomして表示</li>
<li><a href="http://playground.mobily.pl/jquery/mobily-slider.html" target="_blank"><b>MobilySlidy</b></a> ・・・スライドUI</li>
<li><a href="http://razorjack.net/quicksand/" target="_blank"><b>Quicksand</b></a> ・・・アニメーションによる絞り込み・並び替えUI</li>
<li><a href="http://code.google.com/p/html5shiv/" target="_blank"><b>html5.js</b></a> ・・・IE等でもhtml5を利用</li>
<li><a href="http://fredhq.com/projects/roundabout/" target="_blank"><b>Roundabout</b></a> ・・・回転して画像が入れ替わるギャラリー</li>
<li><b>Background-Position Animation Plugin</b> ・・・任意の要素の背景を入れ替え</li>
<li><a href="http://foundation.zurb.com/" target="_blank"><b>Foundation</b></a> ・・・jQueryを利用した多機能UI集</li>
<li><a href="http://interface.eyecon.ro/docs/fisheye" target="_blank"><b>Fisheye menu</b></a> ・・・MacのDocメニュー風UI(天地配置)</li>
<li><a href="http://www.wizzud.com/jqdock/" target="_blank"><b>jqDock</b></a> ・・・MacのDocメニュー風UI(天地左右配置)</li>
<li><a href="http://jquery.vostrel.cz/reel" target="_blank"><b>jQuery Reel Plugin</b></a> ・・・360度画像を回転表示するUI(iPhone等にも対応)</li>
<li><a href="https://github.com/fastrd/youRhere" target="_blank">youRhere</a> ・・・文章にしおりをはさめる機能を実装</li>
<li><a href="http://spritely.net/" target="_blank">jquery.spritely</a> ・・・CSSスプライトを使用しアニメーションを作成</li>
<li><a href="https://github.com/dknight/jQuery-Notify-bar" target="_blank">jQuery Notify bar</a> ・・・Twitter風の通知UIを画面上部からアニメーションして表示</li>
<li><a href="http://jquery.malsup.com/cycle/" target="_blank">jQuery Cycle Plugin</a> ・・・いろんな種類のスライドショー</li>
<li><a href="http://www.htmldrive.net/items/show/1092/Useful-Peel-Back-With-jQuery" target="_blank">jQuery Peel Back Ad</a> ・・・ページの隅をめくるUIによる(広告)リンク</li>
<li><a href="http://stephband.info/jparallax/" target="_blank">jParallax</a> ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示</li>
<li><a href="http://janne.aukia.com/zoomooz/" target="_blank">Zoomooz.js</a> ・・・ページ内の要素をアニメーションさせながら拡大表示</li>
<li><a href="http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html" target="_blank">Animate CSS Rotation and Scale</a> ・・・CSS3のtransformをjQueryで実装</li>
<li><a href="http://www.mind-projects.it/projects/jqzoom/" target="_blank">jQzoom Evolution</a> ・・・画像の一部を拡大表示</li>
<li><a href="http://areaaperta.com/nicescroll/" target="_blank">jQuery NiceScroll plugin</a> ・・・iPhoneのような慣性スクロール</li>
</ul>
<h4>
グラフィック</h4>
</div>
<div>
<ul>
<li><a href="http://caroufredsel.frebsite.nl/" target="_blank"><b>carouFredSel</b></a> ・・・カルーセル</li>
<li><a href="https://github.com/pupunzi/jquery.mb.YTPlayer" target="_blank"><b>jquery.mb.YTPlayer</b></a> ・・・YouTubeプレーヤーを背景全体に表示</li>
<li><a href="https://github.com/jquery/jquery-metadata/" target="_blank"><b>jquery.metadata.js</b></a> ・・・html要素のclass内にデータを埋め込める</li>
<li><a href="http://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/" target="_blank"><b>Circle Navigation Effect with CSS3</b></a> ・・・円形のサムネイルが飛び出すUI</li>
<li><a href="http://www.neosmart.de/social-media/facebook-wall/" target="_blank"><b>fb.wall</b></a> ・・・サイト内にfacebookのWallを埋め込む</li>
<li><a href="http://code.google.com/p/jquery-ui-map/" target="_blank"><b>Google maps v3 plugin for jQuery and jQuery Mobile</b></a> ・・・Googleマップを埋め込みマーカー等を追加</li>
<li><a href="https://github.com/filamentgroup/jQuery-Visualize" target="_blank"><b>jQuery-Visualize</b></a> ・・・グラフを作成</li>
<li><a href="http://excanvas.sourceforge.net/" target="_blank"><b>ExplorerCanvas</b></a> ・・・IE等でcanvasを利用</li>
<li><a href="http://fancyapps.com/fancybox/" target="_blank"><b>fancyBox</b></a> ・・・Light Box風のポップアップUI</li>
<li><a href="http://www.pixedelic.com/plugins/camera/" target="_blank"><b>Camera slideshow</b></a> ・・・多彩なアニメーションのスライドショー</li>
<li><a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" target="_blank">jQuery Before/After plugin</a> ・・・画像加工前後などの複数の画像をスライダーを使用して比較するUI</li>
<li><a href="http://nivo.dev7studios.com/" target="_blank">Nivo Slider</a> ・・・多彩なアニメーションのスライドショー</li>
<li><a href="http://www.jacklmoore.com/colorbox" target="_blank">ColorBox</a> ・・・アニメーションの種類が豊富なLightBox風UI</li>
<li><a href="http://buildinternet.com/project/supersized/" target="_blank">SuperSized</a> ・・・ウィンドウにあわせて背景画像を画面いっぱいに表示</li>
<li><a href="http://tympanus.net/Development/Slicebox/" target="_blank">Slicebox</a> ・・・3Dアニメーションによるスライドショー</li>
<li><a href="http://www.zurb.com/playground/jquery-text-change-custom-event" target="_blank">jQuery Text Change Event</a> ・・・テキスト入力のイベントを捕捉する</li>
<li><a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/" target="_blank">Elastislide</a> ・・・ウィンドウサイズによって画像サイズや枚数が変わるカルーセル</li>
<li><a href="http://creatorish.com/lab/1463" target="_blank">jQuery Shuffle Text</a> ・・・テキストをシャッフルする演出</li>
</ul>
<div>
<br /></div>
</div>
<div>
以上、総勢<b>88種類のプラグイン</b>が紹介されています。</div>
<div>
(導入が詳しく掲載されているのは<b>太字</b>のプラグインです)<br />
(わたしが寄稿した記事は<span style="background-color: #fff2cc;"><b>マーカー</b></span>のプラグインです)</div>
<div>
<br /></div>
<div>
jQueryはどなたでも扱いやすいですが、解説が英語だったりして導入に苦労することもあるでしょう。</div>
<div>
そんなときに実践的な内容でカスタマイズ方法も掲載されている本書は、きっとあなたの役に立ってくれるはずです。</div>
<br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tinianwinds-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4844362720" style="height: 240px; width: 120px;"></iframe><br />
<br />
<div>
本書に寄稿するにあたり執筆経験のないわたしにレクチャーをしてくださいましたMdN編集部のKさん、ありがとうございました。</div>
<div>
また、Kさんにわたしをご紹介していただきました<a href="http://www.osscafe.net/ja/" target="_blank">下北沢オープンソースカフェ</a>のマスターの<a href="https://twitter.com/#!/cognitom" target="_blank">Kawamuraさん</a>ありがとうございます。2冊献本いただいているので1冊寄贈しますね。<br />
<br />
これだけ豊富だと、ぱらぱら眺めているだけでもWebサイト構築時のUIのヒントが得られますよ。ぜひ1冊どうぞ。</div>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-88695144850063041152012-06-27T11:30:00.000+09:002012-06-27T11:30:00.721+09:00CakePHP HTML Cache Plugin の2.x対応と追加機能とか<a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> です。<br />
CakePHP HTML Cache Plugin についてメモしておきます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/MontBlanc-Sucks/HtmlCache" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="468" src="http://4.bp.blogspot.com/-qlzAR6tINok/T-baCz1MufI/AAAAAAAAAro/P5Ds-wtJEvk/s640/html_cache.png" width="640" /></a></div>
<br />
CakePHPにはキャッシュの機能がありますが、純粋な静的ファイルを書き出すもっと強力なキャッシュをおこなうためのプラグインがあります。<br />
(symfonyでは sfSuperCache 、Fuel PHP ではfuel-pagecacheという同様のプラグイン等があるそうです)<br />
<br />
仕組みは、mod_rewriteの機能を利用し、webroot/cache以下に、該当するhtmlやrss等のファイルがあれば、それを直接表示し、無ければ、CakePHPが通常の描画後、webroot/cache以下にページを書き出すというもの。<br />
<br />
一度作成するとphpすら使われませんので当然速いわけです。<br />
<br />
ただしそのファイルを消さないと永遠にCakePHPが再表示しませんので、以下のコマンドのようなことでファイルを消してあげる必要がありますが。<br />
<br />
<pre class="code">find /full/path/to/app/webroot/cache -mmin +360 | xargs rm -f
</pre>
<br />
さてこのプラグイン、もともとはMatt Curry氏が作成したプラグインです。<br />
その後CakePHP2.x系への対応がまだのようでしたので、forkして作成したのが、こちらです。<br />
<ul>
<li><a href="https://github.com/MontBlanc-Sucks/HtmlCache" target="_blank">MontBlanc-Sucks/HtmlCache</a><br />
</li>
</ul>
<div>
<br /></div>
<h3>
インストールと準備</h3>
<div>
<a href="https://github.com/MontBlanc-Sucks/HtmlCache/downloads" target="_blank">ダウンロード</a>後、APP/Plugin/HtmlCacheとなるように配置してください。</div>
<div>
bootstrap.phpでPluginをloadします。</div>
<div>
<br /></div>
<pre class="code"># APP/Config/bootstrap.php
CakePlugin::load('HtmlCache');</pre>
<div>
<br />
webroot/.htaccess を修正します。<br />
(修正内容は extras/.htaccess のようにします)<br />
<br />
<pre class="code"><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></pre>
<h3>
プラグインの使用</h3>
</div>
<div>
あとは、Controllerで $helpers = array('HtmlCache.HtmlCache'); のようにします。</div>
<div>
ただ特定のactionだけ使用するというケースがほとんどでしょう。ですので。</div>
<div>
viewファイル内で使用する場合は、次のようにします。</div>
<br />
<div>
<pre class="code">$this->Helpers->load('HtmlCache.HtmlCache');
$this->HtmlCache->options($options); // 必要に応じて</pre>
<div>
<br />
<h4>
オプションの指定</h4>
オプションは配列で指定します。<br />
<pre class="code"># view
$this->HtmlCache->options(array('cache_dir' => 'statics'));</pre>
<br />
オプション(デフォルト)<br />
<ul>
<li>'test_mode' => false,</li>
<ul>
<li>trueにするとdebug level が1以上でもキャッシュファイルを書き出します</li>
</ul>
<li>'host' => null,</li>
<li>'domain' => false,</li>
<ul>
<li>trueにすると、複数ドメインで運用している場合にhostごとに書き出すことができます</li>
<li>$_SERVER['HTTP_HOST']もしくはhostオプションの値が使用されます</li>
</ul>
<li><span style="background-color: white;">'www_root' => </span>APP . WEBROOT_DIR,</li>
<ul>
<li>webルートのフォルダをフルパスで指定します</li>
</ul>
<li>'cache_dir' => 'cache',</li>
<ul>
<li>デフォルトでは webroot/cache 以下にキャッシュファイルが作られます</li>
<li>ここを修正した場合は webroot/.htaccess も適宜修正しましょう</li>
</ul>
<li>'filename' => 'index.html',</li>
<ul>
<li>拡張子なしでCakePHPにアクセスしたときに書き出すファイル名です</li>
<li>index.htm や index.php を使用したいという場合はここを書き換えます</li>
</ul>
<li>'file_path' => null,</li>
<ul>
<li>まったく別のURL(パス)で書き出したいという場合は、ここを編集します</li>
<li>例) 'file_path' => $this->webroot . DS . $item['Item']['filename'],</li>
</ul>
</ul>
<div>
というわけでRSS等の出力に絶大な効力を発揮する HtmlCache Plugin を紹介しました。<br />
<br /></div>
</div>
</div>
<h4>
ぜひご活用ください</h4>
<div>
<a href="https://github.com/MontBlanc-Sucks/HtmlCache" target="_blank">MontBlanc-Sucks/HtmlCache</a><br />
ご意見・ご要望・ご質問は、 <a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> までお願いします。</div>mon_sathttp://www.blogger.com/profile/01900839852348670904noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-31399429734408255262012-06-26T11:30:00.000+09:002012-06-26T14:05:06.121+09:00CakePHP OGP Plugin つくりました<a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> です。<br />
<br />
OGPタグというものがあります。<br />
facebookとかでシェアしたときに、任意のタイトルやdescription、画像等を設定するmetaタグです。<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/-px4Xda_kUN4/T-aKjdnS5_I/AAAAAAAAAqg/RmY0BNSTBfo/s1600/ogp.png" /></div>
このブログの場合は、次のようになります。<br />
<br />
さて、このOGPタグと、titleタグ、metaタグの一部(description)等は、内容が重なります。<br />
<br />
これらを、view等から簡単に設定できると良いですね。<br />
というわけで <a href="http://twitter.com/yando" target="_blank">@yando</a> さんのアドバイスを受け、プラグインにしてみました。<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://github.com/monsat/Ogp" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img border="0" height="488" src="http://1.bp.blogspot.com/--5Ok5VtJPlY/T-aLrEmx8QI/AAAAAAAAAqo/vdj4SZKsvtk/s640/github-ogp.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">CakePHP OGP Plugin</td></tr>
</tbody></table>
<h3>
インストールと設定</h3>
<div>
<a href="https://github.com/monsat/Ogp/downloads" target="_blank">プラグインをダウンロード</a>し、 APP/Plugin/<b>Ogp</b> となるように設置します。</div>
<div>
<br /></div>
<div>
git で clone / submodule add する場合は、次のような感じで</div>
<div>
<pre class="code">cd your_app
git clone git://github.com/monsat/Ogp.git Plugin/Ogp</pre>
</div>
<div>
<br />
CakePHP2.xではプラグインを明示的に読み出す必要があるので<br />
<br />
<pre class="code"># APP/Config/bootstrap.php
CakePlugin::load('Ogp');</pre>
とし、Controllerで、OgpHelperを読み出します。<br />
<br />
<pre class="code"># APP/Controller/AppController.php
public $helpers = array( 'Html', 'Form', 'Ogp.Ogp');</pre>
これで準備完了です。<br />
<br />
次に、サイトの設定をします。<br />
<pre class="code"># 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タグ
));</pre>
<br />
Configureで Ogp.settings.base で設定しているので、<br />
Configure::read('Site.site_name') や <span style="background-color: white;">Configure::read('Site.description') などが利用されます。</span><br />
<h3>
使い方</h3>
layoutファイルの次の記述の箇所に、他のmetaタグと一緒に書き出されます。<br />
<br />
<pre class="code"># layout
echo $this->fetch('meta');</pre>
<br />
viewファイルでは、以下のように使います。<br />
<pre class="code"># 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,
),
);</pre>
<br />
contentに使用される文字列は、タブ・改行文字およびhtmlタグを除去します。<br />
※ stripTagsオプションを false にすると、htmlタグの除去は行われません<br />
<br />
metaオプションを true にすると、通常のmetaタグも同時に書き出されます。<br />
<br />
この記事の例では、次のようなタグが出力されるでしょう。(順番は変えてあります)<br />
<br />
<pre class="code"><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" /></pre>
<br />
という具合です。<br />
$this->Ogp->title()を設定しなければ、Site.site_nameの値がtitleタグとog:titleに使用されます。<br />
<h3>
ぜひご活用ください</h3>
</div>
<div>
<a href="https://github.com/monsat/Ogp" target="_blank">monsat/Ogp · GitHub</a><br />
ご意見・ご要望・ご質問があれば、 <a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> までお願いいたします。</div>mon_sathttp://www.blogger.com/profile/01900839852348670904noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-43314927144544297692012-06-25T11:30:00.000+09:002012-06-29T21:02:31.192+09:00jQuery Link Box プラグイン作りました<a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> です。<br />
非常に車輪の再発明的ではありますが、jQuery Link Box プラグインを作りました。<br />
(jquery 1.7以上に対応しています)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/monsat/jquery.linkbox" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="305" src="http://2.bp.blogspot.com/-GylqkJlEEaI/T-ZqLSK6vsI/AAAAAAAAABw/jB2nj57vxEg/s400/ss_github.png" width="400" /></a></div>
<br />
簡単に言うと、<b>リンクの外側のボックス(div等)全体をクリック可能にする</b>ためのプラグインです。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-59p8wGsdHr4/T-ZrnX6qcnI/AAAAAAAAAqU/yesdKRmNdu4/s1600/ss_sample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="488" src="http://3.bp.blogspot.com/-59p8wGsdHr4/T-ZrnX6qcnI/AAAAAAAAAqU/yesdKRmNdu4/s640/ss_sample.png" width="640" /></a></div>
<a href="https://github.com/monsat/jquery.linkbox/blob/master/sample/index.html" target="_blank">使用例は以下およびsample/index.htmlをご覧ください</a><br />
<h3>
使い方</h3>
<script src="https://raw.github.com/monsat/jquery.linkbox/master/jquery.linkbox.js" type="text/javascript">
</script><br />
<h4>
<span style="background-color: white;">jqueryを読み込みます</span></h4>
<div>
<pre class="code"><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></pre>
</div>
</body>の直前に記述するか、<head></head>内に記述してください。<br />
<h4>
クリック可能にするbox(div等)にdata-click="linkbox"を記述します</h4>
<pre class="code"><div data-click="linkbox" class="sample">
<p>sample <a href="/">最初のリンク</a> が使用されます。</p>
<p>sample <a href="/p/blog-page.html">このリンク</a> は直接クリックする必要があります。</p>
</div></pre>
<b>[data-click="linkbox"]が書かれた属性</b>内の<b><span style="color: red;">最初のリンク</span></b>が使用され、ボックスをクリックしたときに遷移します。<br />
<h4>
<span style="background-color: white;">(オプション)必要に応じて、ボックスにスタイルを設定します</span></h4>
<div>
ボックスがクリック可能であることを示すようなstyleを記述しましょう。</div>
<pre class="code">.linkbox {
background-color: #eee;
}
div.sample {
cursor: pointer;
}
</pre>
デフォルトでは .linkbox というクラスが使用されます。<br />
※ 追記(2012-06-29):iPad等で有効にするためには、cursor: pointer をあらかじめ指定しておく必要があります。<br />
<br />
<h4>
(オプション)任意のaタグのリンク先を使用したい場合</h4>
<b>[data-linkbox="target"]</b>という属性が存在するリンクは、優先して使用されます。<br />
<div>
<pre class="code"><div data-click="linkbox">
<p>sample <a href="/">最初のリンク</a> ですが、直接クリックする必要があります。</p>
<p>sample <a href="/p/blog-page.html"<b> data-linkbox="target"</b>>このリンク</a> は優先して使用されます。</p>
</div></pre>
</div>
<div>
<br /></div>
<br />
<h4>
デモ</h4>
<div style="overflow: hidden;">
<style type="text/css">
.linkbox {
background-color: #eee;
}
.sample {
border: 1px solid #ccc;
cursor: pointer;
float: left;
margin: 10px;
padding: 10px;
width: 380px;
}
.dummy {
color: #999;
}
</style><br />
<div class="sample" data-click="linkbox">
<div class="dummy">
サンプル1</div>
<a href="https://github.com/monsat/jquery.linkbox">https://github.com/monsat/jquery.linkbox</a></div>
<div class="sample" data-click="linkbox">
<div class="dummy">
サンプル2</div>
<a href="https://github.com/monsat/jquery.linkbox">https://github.com/monsat/jquery.linkbox</a><br />
<br />
<div class="dummy">
<a href="/" <b>data-linkbox="target"</b>>このようなリンク</a>の場合、優先して使用されます</div>
<a data-linkbox="target" href="https://github.com/monsat/">https://github.com/monsat/</a></div>
</div>
<br />
<h4>
ぜひご活用ください</h4>
<div>
<a href="https://github.com/monsat/jquery.linkbox" target="_blank">monsat/jquery.linkbox · GitHub</a><br />
ご意見ご要望ご質問は、<a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a>までお願いします。</div>mon_sathttp://www.blogger.com/profile/01900839852348670904noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-90235293043755434002012-06-24T06:30:00.000+09:002012-06-24T18:16:55.284+09:00Webデベロッパ ハッカソン at PoRTAL Shibuya に参加してきました<a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> です。<br />
金曜日から土曜日にかけて行われた <a href="http://www.meetup.com/%E6%9D%B1%E4%BA%AC%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3/events/64975922/" target="_blank">Webデベロッパ ハッカソン at PoRTAL Shibuya</a> というイベントに参加してきました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-bTlQG5uMiOk/T-bMGHw7kJI/AAAAAAAAArc/UmfRouk8rpo/s1600/hackathon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="http://2.bp.blogspot.com/-bTlQG5uMiOk/T-bMGHw7kJI/AAAAAAAAArc/UmfRouk8rpo/s640/hackathon.png" width="640" /></a></div>
<br />
金曜日の夜に開始し、翌午前中まで開発そして成果発表をして終了という、比較的負担の少ないハッカソンです。<br />
<br />
ちなみにハッカソンとは <a href="http://en.wikipedia.org/wiki/Hackathon" target="_blank">hack + marathon</a> ということで、<span style="background-color: white;">各自が開発をしつづけるというイベントです。</span><span style="background-color: white;">たいていは夜通しおこなわれるところがマラソンっぽく体力勝負なわけです。</span><br />
<br />
デザイナー向けCakePHP勉強会でも使わせていただいた <a href="http://www.hituji.jp/portal/" target="_blank">PoRTAL Shibuya</a> に10名以上の開発者が集まり、それぞれ普段ではなかなかできないようなことを中心に開発してました。<br />
CakePHPの勉強会等で知り合った方も何人か参加していて、CakePHPに関する質問をしあったりする光景も。<br />
<br />
わたしも前日から開発していた <a href="https://github.com/monsat/jquery.linkbox" target="_blank">monsat/jquery.linkbox</a> に加え <a href="https://github.com/monsat/Ogp" target="_blank">monsat/Ogp · GitHub</a> と、 <a href="https://github.com/MontBlanc-Sucks/HtmlCache" target="_blank">MontBlanc-Sucks/HtmlCache</a> の追加機能を作りました。じつは来週の仕事の準備なんですけど(笑)<br />
<br />
HtmlCacheは、もともとMatt Curry氏が作成したHTML等の静的ページを書き出すためのプラグインです。<br />
その後 <a href="https://github.com/sams" target="_blank">sams</a> 氏がCakePHP2.0対応を試みていたようなので、forkしてその続きをすでに開発していたのですが。<br />
この日は「任意のディレクトリやファイルを削除する機能」を実装しました。<br />
これによりサイト全体のキャッシュを削除したり、任意のフォルダ以下のキャッシュを削除というような利用が可能になります。<br />
<br />
詳しくは別途ブログにまとめたいと思いますが。<br />
<br />
話をハッカソンに戻し。<br />
やはり、こういうイベントで他の方と開発をおこなうというのは、非常に刺激になります。<br />
詰まったときに他の方と話をすることで解決の糸口を見つけたりもできますし。<br />
<br />
そして、成果発表する時間があるので、「何かしら作る」というモチベーションも高まることでしょう。<br />
<b>どんなに些細なことでも、それが自分にとって有益であれば良いのだと思います。</b><br />
こういうイベントに積極的に参加することで、開発スキルや、開発の基礎体力がついていくのかもしれません。<br />
<br />
まだ参加されてない方は、<a href="http://www.meetup.com/%E6%9D%B1%E4%BA%AC%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3/" target="_blank">事前に登録しておくと良い</a>ですね。<br />
というわけで次回のイベントでお会いしましょう。<br />
<br />
<h4>
他の参加者のブログ記事</h4>
<div>
<ul>
<li><a href="http://ja.naoko.cc/2012/06/23/web-developer-hackathon-at-portal-shibuya/" target="_blank">Webデベロッパ ハッカソン at PoRTAL Shibuya に参加してきました – ja.naoko.cc</a><br />(今回の記事は、↑の記事からタイトルを拝借してしました)
</li>
</ul>
</div>mon_sathttp://www.blogger.com/profile/01900839852348670904noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-37592979602709610092012-06-24T04:00:00.000+09:002012-06-24T16:27:09.943+09:00BloggerでOGPタグを出力する設定方法というわけで TANAKA Kohji です。<br />
Blogger の記事を facebook でシェアしようとすると、HTMLの先頭にある JavaScript が本文の代わりに読み込まれて困っていました。<br />
<br />
そこで、OGPタグを出力するように変更してみました。<br />
<h3>
検索設定でメタタグ(description)を設定する</h3>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="282" src="http://1.bp.blogspot.com/-VT7fTYxxew8/T-a6JM8wotI/AAAAAAAAAq0/UmIeShtFJhk/s400/blogger-meta.png" width="400" /></div>
<div>
<b>設定</b>ー<b>検索設定</b>より、メタタグの設定を行います。</div>
<div>
この部分は、ブログのトップページ等をシェアした場合等に使用される<b>説明文</b>です。</div>
<div>
(metaタグのdescriptionや、og:descriptionに使用されます)<br />
<h3>
テンプレートのHTMLを修正する</h3>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-GWc76GweY3A/T-a8FMmxciI/AAAAAAAAArE/SXh0f1L9QKA/s1600/blogger-template.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="164" src="http://2.bp.blogspot.com/-GWc76GweY3A/T-a8FMmxciI/AAAAAAAAArE/SXh0f1L9QKA/s320/blogger-template.png" width="320" /></a></div>
<div>
ここは多少専門的な知識が必要になります。</div>
<div>
<b>テンプレート</b>ー<b>HTML</b>の編集より、テンプレートを編集します。</div>
<div>
<br /></div>
<div>
(事前にページ右上の<b>『バックアップ/復元』</b>より現在のテンプレートのバックアップをとっておくと安全です)</div>
<div>
<br /></div>
<div>
以下を参考に、修正してください。</div>
<div>
<div>
<br />
修正する前のコード(ctrl+f 等で該当箇所を探してください)<br />
<pre class="code"> <title><data:blog.pageTitle/></title></pre>
修正後のコード<br />
<pre class="code"> <b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> | </b:if><data:blog.title/></title>
</b:if>
<meta expr:content='data:blog.title' name='og:site_name'/>
<meta expr:content='data:blog.pageTitle' name='og:title'/>
<meta content='blog' name='og:type'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if></pre>
</div>
<div>
修正したら保存しましょう。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-S23z90hZCoA/T-a7XvI-qkI/AAAAAAAAAq8/BaUf-ywEpts/s1600/blogger-search.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-S23z90hZCoA/T-a7XvI-qkI/AAAAAAAAAq8/BaUf-ywEpts/s320/blogger-search.png" width="225" /></a></div>
<h3>
記事投稿時に『検索向け説明』を設定する</h3>
<div>
これはちょっと冗長なのですが、記事投稿時に、検索向け説明を設定する必要があります。</div>
<div>
(投稿画面の右側)<br />
<br />
ここは記事本文から自動的に設定してほしいところですが、いたしかたありません。<br />
<h3 style="clear: both;">
facebookでシェアする</h3>
</div>
</div>
<div>
あとは、記事公開後に、facebookでシェアすれば終了です。</div>
<div>
<br /></div>
<div>
というわけで設定していない方は、お試しください。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/kohji.tanaka/posts/453874917956406" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-Rp5n8OopdvI/T-bBJm5TxUI/AAAAAAAAArQ/DgDJdtH-5_0/s1600/blogger-share.png" /></a></div>
<br /></div>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-30538399951666560882012-06-19T09:15:00.000+09:002012-06-24T12:18:31.462+09:00今年は閏秒の挿入年最近は減りましたが、2度寝が大好きな TANAKA Kohji です。<br />
今年は<a href="http://blog.direct-search.jp/2012/02/blog-post.html" target="_blank">約4年に1度</a>の閏年ですね。<br />
2月29日があり、通常の年よりも1日長いのはご存知の通り。<br />
<br />
それにたいし、閏秒というものがあります。<br />
<blockquote class="tr_bq">
閏秒(うるうびょう、英: leap second)は、現行の協定世界時 (UTC) において、UT1との差を調整するために追加または削除される1秒である[1][2]。1972年以来、これまでに閏秒の挿入が24回実施されている(2011年末現在)。<br />
(中略)<br />
地球の自転に基づく世界時は、太陽が朝に出て夕方に沈むといった、日常生活に関係する時間観念からすれば便利である。しかし、月による潮汐摩擦や地球内部の核、海水や氷河の分布変化など、さまざまな原因により地球の自転運動は一定の速さではない[6]。ゆえに UT1 は1秒の長さが一定せず、時の標準を学術的に正確に定めるのに向いていない。この点では1秒の長さが一定である国際原子時は便利である。しかし国際原子時は地球の自転に従わないため、やがて両者のずれは拡大し、理論上は時間観念とも食い違うことになる。<br />
<a href="http://ja.wikipedia.org/wiki/%E9%96%8F%E7%A7%92" target="_blank">閏秒 - Wikipedia</a></blockquote>
というわけで、地球の自転によるずれを修正するために、閏秒という「1秒」をどこかに挿入することがあるのですね。<br />
<br />
これは不定期に行われ、大体6月末か12月末のUTC深夜24時直前に挿入されることが慣例です。<br />
世界標準時との時差は9時間ですから、日本では7月1日か1月1日の9時直前になります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-GliEObfgvk4/T9_HujfINOI/AAAAAAAAAqA/gI2ekHtLm8g/s1600/roman-clock-new.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-GliEObfgvk4/T9_HujfINOI/AAAAAAAAAqA/gI2ekHtLm8g/s320/roman-clock-new.png" width="320" /></a></div>
今年は、3年半ぶりに閏秒が挿入されます。<br />
<b>7月1日は、他の日よりも1秒長い</b>のです。<br />
<br />
9時直前は、117で時報を聞くというのも面白いかもしれません。<br />
記憶が定かではありませんが、たしか、通常より、プップップポーンの始まりが1秒遅れるはず・・・<br />
(追記 <a href="http://news.mynavi.jp/news/2012/06/16/007/" target="_blank">NTTからの発表</a>でもそうでした)<br />
<br />
<span style="background-color: white;"><b>「1秒を大切に」ということを考える1日</b>にしても良いかもしれません。</span><br />
<span style="background-color: white;"><br /></span><br />
<span style="background-color: white;">2度寝に気をつけて過ごしたいものですね(笑)</span>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-29143008580726964912012-06-18T11:30:00.000+09:002012-06-19T09:30:19.100+09:00WindowsユーザーがMacに移行して買うべきたったひとつのアプリ新しいMacBook Air や Proが発表されても、ずっと我慢の子を続ける TANAKA Kohji です。<br />
<br />
この機会にmacユーザーになるという方も多いのではないでしょうか。<br />
もしくは、この機会にmacにしたいんだけど、ExcelやらIllustratorやら現状の環境からの移行が大変そうで二の足を踏んでいる方も多いでしょう。<br />
<br />
そういったかたが買うべき<b>たったひとつのソフト</b>をご紹介します。<br />
それが <a href="http://www.parallels.com/jp/" target="_blank">Parallels Desktop</a> です。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.parallels.com/jp/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="492" src="http://1.bp.blogspot.com/-nZW8Ps0wt0k/T9wwcIoAqrI/AAAAAAAAAps/t__SqesAdTc/s640/ss_parallels.png" width="640" /></a></div>
このソフトが無ければ、わたしはiMacを買わなかったといえるほど<b>強力なソフト</b>です。<br />
<br />
基本的には、Mac OS X 上で windowsを動かすためのソフトなのですが、<a href="http://www.parallels.com/jp/products/desktop/switchtomac/" target="_blank">Switch to Mac Edition</a> というのを利用すると、<b>現在のwindowsの環境をそっくりそのままMacの中に持ってこれる</b>のです!<br />
<br />
どういうことか。<br />
つまり、これを利用することで、現在windowsで使用していた<b>すべてのソフト</b>、そして<b>すべてのデータ</b>をMacの中にとりこめ、Macを使いながらにして、同時に従来のwindowsのパソコンを使用するというような芸当が可能になります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fAWqIbISIts/T9_IEBIjxbI/AAAAAAAAAqI/ojpx6zEs3Ys/s1600/MoonBook.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="http://2.bp.blogspot.com/-fAWqIbISIts/T9_IEBIjxbI/AAAAAAAAAqI/ojpx6zEs3Ys/s320/MoonBook.png" width="320" /></a></div>
Spacesという機能を使い、複数のデスクトップを使うことがMacではできるのですが、そのひとつにwindowsを当てるということもできます。<br />
また、Parallelsの<b>Coherence</b>というモードを使用すると、windowsのデスクトップは無くなり、スタートメニューのみが残ります。あとは、wordやexcelといったソフトを立ち上げるたびに、Mac上で立ち上がったかのように、別々のwindowのなかでそれらのソフトが動くのです。ここまでくると、<b>仮想かソフトを使用している感覚ではなく、本当にMacの中で旧PCが動いているかのような錯覚に陥ります</b>。<br />
<br />
注意点としては、windowsに充分なメモリを与えること。<br />
最近はメモリも安くなってきました。<br />
わたしは当時最安iMac標準の4GB(2GB x 2)のほか空きスロット2つに4GBを差し、合計12GBとしています。<br />
これだけあると、windowsの2GBをまるまる当てても、充分にMac側に余裕ができます。<br />
MBPなら最大16GBです。windows7だろうが割り当てられることでしょう。<br />
<br />
わたしはいまだにMac版のIllustratorを買わずに済んでいます。<br />
これはwindows時代に清水の舞台を飛び降りる気持ちで購入したIllustratorCS3が現役という理由が大きいです。<br />
古いphotoshopも同様に現役です。<br />
<br />
Macがwindowsと比較して優位と言えないのが、ソフトの豊富さです。とくにフリーウェアの多さはwindowsには敵いません。<br />
<br />
後悔せずに移行するために買うべきたったひとつのソフトは、<a href="http://www.parallels.com/jp/" target="_blank">Parallels Desktop</a>のほかはありません。<br />
とってもおすすめですから是非どうぞ。TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-26151945097351636692012-06-16T10:00:00.000+09:002012-06-16T10:15:54.053+09:00Yahoo!ミュージックのサービス終了まずはこちらをご覧ください。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://music.yahoo.co.jp/close" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="492" src="http://1.bp.blogspot.com/-uXbYsx8voY0/T9vUoYh9V_I/AAAAAAAAApQ/0C8RChFPdQk/s640/ss_close.png" width="640" /></a></div>
というわけで、Yahoo!ミュージックのサービスが2012年8月27日で終了するそうです。<br />
投稿したコンテンツも削除されるとのことで完全な終了ですね。<br />
<br />
まさか<a href="http://www.gizmodo.jp/2012/06/pingwsj.html" target="_blank">Ping今秋終了のお知らせ...WSJ報道 : ギズモード・ジャパン</a>や<a href="http://news.mynavi.jp/news/2012/06/15/138/" target="_blank">DVDリッピング違法化・違法ダウンロード刑罰化の著作権法改正が衆院で可決 | 家電 | マイナビニュース</a>を受けてサービス終了するわけではないと思いますが、非常に寂しい限りですね。<br />
<br />
Yahoo!ミュージックのトップページでも掲載されているのかな?と思ったら<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-W8TYNRTn-2g/T9vUpCmujPI/AAAAAAAAApU/YxEKSk91bpg/s1600/ss_music.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="http://4.bp.blogspot.com/-W8TYNRTn-2g/T9vUpCmujPI/AAAAAAAAApU/YxEKSk91bpg/s320/ss_music.png" width="320" /></a></div>
ん???<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-rVLo04KOxDs/T9vWBYBonNI/AAAAAAAAApg/XbP6J3l_rN0/s1600/ss_music_info.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="http://1.bp.blogspot.com/-rVLo04KOxDs/T9vWBYBonNI/AAAAAAAAApg/XbP6J3l_rN0/s320/ss_music_info.png" width="320" /></a></div>
<b>Yahoo!ミュージックからご利用の皆様へ大切なお知らせ</b>というわけで、人によってはスルーされそうです。もしかしたら直前になって知る人も多いかもしれません。<br />
<br />
Xデーは8月27日。<br />
わたしはほとんど音楽を聴かないので影響は皆無ですが、これまで愛用してきたユーザーも多いはず。そういう方々へ最後のサービスがあっても良いかもしれませんがいかがでしょうかね。TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-42071974849509076922012-06-16T08:30:00.000+09:002012-06-16T11:38:59.618+09:00Yahoo!ニュースの閲覧履歴をfacebookに投稿できるという新機能を爆速で試してみたfacebookから名前を「漢字で登録してね」と言われる TANAKA Kohji です。<br />
Yahoo!ニュースの新機能のニュース見ましたでしょうか?<br />
<blockquote class="tr_bq">
<b><a href="http://japan.cnet.com/news/service/35018188/" target="_blank">Yahoo!ニュース、読んだ記事をFacebookに自動配信できる新機能</a></b><br />
ヤフーは6月14日、「Yahoo!ニュース」で<b>Facebookへのアクティビティの自動投稿</b>が可能になったことを発表した。この機能を利用することで、<b>Yahoo!ニュースの記事を表示させるだけで</b>「Yahoo!ニュースの○○の記事を読んだ」という自身のアクティビティが、<b>自動的にFacebook上の友人のウォールに表示されるようになる</b>という。<br />
Facebookアカウントでログインしている状態で、Yahoo!ニュースの記事詳細ページなどに表示される<b>「Facebookの友達に記事を知らせよう」枠の「利用開始」ボタンをクリックし、Facebookと連携する</b>ことで利用できる。<b>あらかじめ公開範囲を設定することも可能</b>だ。<br />
アクティビティとして自動投稿されたくないときは、<b>一時的に自動投稿を停止することもできる</b>。また、<b>自動投稿されてしまった場合も、あとから削除できる</b>。なお、ブログ/意見、企業トレンド、リサーチ、ランキングは、アクティビティ自動投稿の対象外となる。</blockquote>
<br />
という<a href="http://japan.cnet.com/" target="_blank">CNET</a>の記事。<br />
<br />
なんかネガティブな反応のTweetとともに知ったのですが、なかなか物議を醸しそうな新機能ですね(笑)<br />
<br />
というわけで試してみましたよ。<br />
<br />
<h4>
Yahoo!ニュースで記事を閲覧し、自動配信の設定</h4>
Yahoo!ニュースの記事個別ページに移動すると、記事および配信元リンクの下に、当機能の表示が確認できます。<br />
(ただしその時点でfacebookにログインしている必要があります)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-1vTg6AEMQxk/T9uw7L9w62I/AAAAAAAAAoM/F3U3ColvB9Q/s1600/ss_facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="http://1.bp.blogspot.com/-1vTg6AEMQxk/T9uw7L9w62I/AAAAAAAAAoM/F3U3ColvB9Q/s320/ss_facebook.png" width="320" /></a></div>
まず、利用開始ボタンをクリックし、facebookとの連携を行います。<br />
<br />
<h4>
facebookでアプリの設定をする</h4>
facebookに移動しアプリの承認を行う画面となります。(1の枠)<br />
(なお、この時点でキャンセルを行えば何も設定されません)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-sTHXWoZ-QF4/T9u0DSnpY0I/AAAAAAAAAoc/fzZsPQjk7PE/s1600/ss_fb_start.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://2.bp.blogspot.com/-sTHXWoZ-QF4/T9u0DSnpY0I/AAAAAAAAAoc/fzZsPQjk7PE/s320/ss_fb_start.png" width="320" /></a></div>
facebookアプリを承認する場合はこの画面に記載された情報を良く読まなければなりません。<br />
2の枠の位置に書かれた内容を見ることで、<b>このアプリがfacebookで何ができるか</b>を確認することが可能。<br />
この場合は、あなたのfacebookに<b>登録した情報のうち最も基本的なもの</b>へのアクセスとともに、<b>あなたにかわって投稿する機能</b>への承認確認です。<br />
(前者はどのアプリでも表示されます。その他の情報をアプリが使用する場合は、この欄がずらずらと増えていきます)<br />
<br />
<div style="color: #666666; font-size: 85%;">
自分の意図に反して自動的に投稿されるスパム系のアプリもありますが、必ずこの画面での承認を必要とします。スパムと言われたからスパムアプリだと決めつけるのではなく、何をするアプリで、何ができるのかを確認し、承認するか承認しないかを決めましょう。思考停止はよくありませんね。</div>
<br />
Yahoo!ニュースのアプリの場合、自動投稿以上のことはできないようですので承認してすすむのですが、その前に、3の枠の箇所で、自動投稿されるニュースの閲覧履歴の公開範囲を指定できます。<br />
<br />
このアプリの使い方を、自分の閲覧履歴としてのみ利用する場合は、ここを<b>自分のみ</b>などに変えると良いでしょう。<br />
すべてのユーザーにすると、<b>Yahoo!ニュースを閲覧するたびに、あなたのアクティビティとして表示</b>されます。<br />
<a href="http://takagi-hiromitsu.jp/diary/20120504.html" target="_blank">図書館の貸し出し情報</a>も、Yahoo!ニュースの閲覧履歴も個人情報ですから気をつけなくてはなりませんね(笑)<br />
<br />
<h4>
自動投稿の設定</h4>
Yahoo!ニュースの閲覧が自動投稿されるのにはもう1ステップあるようです。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-4OPWuI9AB18/T9uw6dvHdlI/AAAAAAAAAoI/a9KPOEHnCPw/s1600/ss_before_using.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://4.bp.blogspot.com/-4OPWuI9AB18/T9uw6dvHdlI/AAAAAAAAAoI/a9KPOEHnCPw/s320/ss_before_using.png" width="320" /></a></div>
ふたたび記事ページを表示し、<b>開始リンクをクリックして開始</b>されます。<br />
<br />
<h4>
facebook内での表示のされ方</h4>
その後Yahoo!ニュースの記事ページを閲覧するたびに、facebookへ自動投稿されるわけですが、facebook上ではどのように表示されるのでしょうか。<br />
facebookの場合、自分の投稿がどう表示されているかは分かりづらいのですが、もっとも簡単に確認するのは、<a href="https://www.facebook.com/me" target="_blank">自分のページ</a>から、<a href="https://www.facebook.com/me/allactivity" target="_blank">アクティビティを確認</a>することでしょう。<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-a2gOFojIPlA/T9u_fORNMOI/AAAAAAAAAos/WRs0Z3b2NuA/s1600/ss_timeline.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="http://4.bp.blogspot.com/-a2gOFojIPlA/T9u_fORNMOI/AAAAAAAAAos/WRs0Z3b2NuA/s320/ss_timeline.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">タイムライン</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-qQH-qIjpVO0/T9u_eDjFcTI/AAAAAAAAAoo/QORNYk3okzI/s1600/ss_activity_log.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="85" src="http://3.bp.blogspot.com/-qQH-qIjpVO0/T9u_eDjFcTI/AAAAAAAAAoo/QORNYk3okzI/s320/ss_activity_log.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">アクティビティログ</td></tr>
</tbody></table>
他の人のウォールからも同様に確認できることと想像できます。<br />
(まだ実際には確認できてないので分かりません)<br />
<br />
<h4>
自動投稿を中断する・履歴を削除する</h4>
自動投稿を中断するには、Yahoo!ニュースの記事ページより中断リンクをクリックすることで行えます。<br />
また、個別に閲覧履歴の投稿を削除するのも、右上の×削除のリンクで行えます。(facebook上のアクティビティログからももちろん可能)<br />
<br />
<h4>
アプリの使用をやめる</h4>
アプリの使用自体をやめ、使用開始前の状態に戻すことも可能です。(なお一度投稿したものは、アクティビティログから削除する必要はあります)<br />
<a href="https://www.facebook.com/settings/?tab=applications" target="_blank">プライバシー設定のアプリの設定</a>から行えますので、facebookのヘッダーの右端の▼から<b>プライバシー設定</b>をクリックし表示されるページで、<b>広告、アプリ、ウェブサイト</b>の<b>設定の編集</b>リンクをクリックします。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-7SlJ5XWsMIQ/T9vDZ2rqRAI/AAAAAAAAApA/jnNl1Rpcp_4/s1600/ss_edit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://1.bp.blogspot.com/-7SlJ5XWsMIQ/T9vDZ2rqRAI/AAAAAAAAApA/jnNl1Rpcp_4/s320/ss_edit.png" width="320" /></a></div>
こんな画面になりますので<b>利用しているアプリ</b>の<b>設定の編集</b>から<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-GL1LeBKMVEw/T9vDZJwQCQI/AAAAAAAAAo8/9wiT2EaqnHw/s1600/ss_app_edit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="http://1.bp.blogspot.com/-GL1LeBKMVEw/T9vDZJwQCQI/AAAAAAAAAo8/9wiT2EaqnHw/s320/ss_app_edit.png" width="320" /></a></div>
アプリを指定し<b>編集</b>もしくは<b>×リンク</b>から連携の削除(使用の中止)ができます。<br />
<br />
<h3>
新機能についての所感</h3>
おおまかな使い方は以上です。あとは自動的に投稿されますので、個人情報のだだ漏れに気をつけつつ使っていきましょう。<br />
<br />
さて、この新機能ですが。<br />
いまいち理解しづらいのは、どのような利用シーンを想定しているかということ。<br />
<br />
Yahoo! JAPANにとっての狙いは、facebook上に多くの記事を投稿してもらい、Yahoo!ニュースの閲覧数を高めること(および広告を多く見てもらうこと)ということになるでしょう。<br />
<br />
しかし同様の機能を実装しているサイトをわたしはあまり聞いたことがありません。<br />
<br />
ユーザーにとって閲覧履歴としての役割は果たすでしょうが、その場合自動投稿する必要性を感じません。<br />
<br />
<b>この機能を使うことにより、良い記事がシェアしやすくなるわけではない</b>ため、どうしてもサービス提供側がひとりよがりな機能を実装したという感が否めないのです。<br />
もしfacebook上に多くの投稿を流すことが目的であれば、よりクリックしやすい、目立つシェアボタンを使用することのほうが効果があるような気がします。<br />
<br />
アプリの使用を承諾させる上に、その後自動投稿のリンクをクリックさせるのは、ややSTEP数が多いですし。<br />
<br />
スタートしたばかりでしょうから、意見を聞きつつ改善を図ろうという意図なのかも知れません。もしそうだとすると以前のYahoo! JAPANのやり方からの脱却であり歓迎するべきことですが。<br />
<br />
この機能単体の評価は置いておくとして。<br />
もし変わりつつあるというのであれば、今後も新しい機能が追加されていくということですから、今後の機能追加も注目したいところです。<br />
<br />
<div style="color: #666666; font-size: 85%;">
タイトルで爆速とあるけど<b>とくに爆速ではない</b>という意見がありそうですが、まああまり意味は無いです。はい。</div>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-24964638100202083172012-06-07T07:55:00.001+09:002012-06-07T07:58:02.389+09:00虚構新聞がまた誤報、もとい正報。おーぷん2ちゃんねるオープンまずは<a href="http://kyoko-np.net/" target="_blank">虚構新聞</a>のこちらの記事<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://kyoko-np.net/2012060501.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="408" src="http://2.bp.blogspot.com/-ILnvPICEmfg/T8_axlmBVkI/AAAAAAAAAns/Z_ZNejTy3qE/s640/ss_kyoko.png" width="640" /></a></div>
<blockquote class="tr_bq">
<b><a href="http://kyoko-np.net/2012060501.html" target="_blank">転載自由の匿名掲示板「転載ちゃんねる」がオープン</a></b><br />
匿名掲示板のコメントを抽出・編集した「まとめサイト」向けに、書き込みの著作権を放棄し「転載自由」をうたった新しい匿名掲示板「転載ちゃんねる」が5日オープンした。「村八分SNS」などで知られる、管理人の「ひらゆき」氏は「昨日の2ちゃんねる騒動で『転載禁止』と名指しされたブログ管理人も気軽に利用してほしい」と話す。</blockquote>
先日突然大手2chまとめサイトが相次いで休止や方向転換を発表。<br />
その裏には2ch運営者の側から<a href="http://2ch.net/warn.txt" target="_blank">名指しで転載禁止の通達を受けた</a>という経緯があります。<br />
<br />
そこで虚構新聞がそのことをネタにしているわけですね。<br />
ただそこは、新聞記事に<b>現実が追いつくことで有名な虚構新聞</b>。<br />
またまた<b>単に他社よりちょっと早く記事がでただけという結果</b>になってしまった模様。<br />
(最近は<a href="http://www.nikkei.com/article/DGXNZO42206210V00C12A6TJ0000/" target="_blank">日経新聞も頑張っています</a>ね)<br />
<br />
<b>転載自由な2ch風掲示板が実際にオープンしたようです。</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://open2ch.net/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="436" src="http://1.bp.blogspot.com/-wxvsTgioNuU/T8_ayow75pI/AAAAAAAAAnw/UV48J2_0nhk/s640/ss_open2ch.png" width="640" /></a></div>
一見して2chと見紛うデザイン。<br />
それどころか<b>掲示板としての機能もほぼ同一</b>です。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://open.open2ch.net/open2ch/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="436" src="http://1.bp.blogspot.com/-f11r7JBxHNg/T8_azbSgKJI/AAAAAAAAAn4/sHPp5CBw1dk/s640/ss_open2ch_thread.png" width="640" /></a></div>
メインページには次のような記載が。<br />
<blockquote class="tr_bq">
<b>■open2chって?</b><br />
open2chは転載自由な2ちゃんねる風掲示板ですよ。。。<br />
すべての投稿はクリエイティブ・コモンズライセンスの元に<br />
コピペブログ等で商用、非商用問わず自由に利用できます。<br />
<b>■2chに完全対応!</b><br />
open2chはすべての2chの板に完全対応しています。。<br />
2ch.netのドメインの前にopenを付けるだけで簡単に open2chにアクセスできます。</blockquote>
掲示板に投稿された記事は、自由に転載可能で、「コピペブログ等で商用、非商用問わず自由に利用でき」るとのこと。<br />
これなら安心ですね!<br />
<br />
それどころかドメインの前にopenをつけるだけでアクセスできるらしいです。<br />
<a href="http://uni.2ch.net/newsplus/" target="_blank">http://uni.2ch.net/newsplus/</a> (ニュース速報+@2ch掲示板)<br />
の場合は<br />
<a href="http://uni.open2ch.net/newsplus/" target="_blank">http://uni.<b>open</b>2ch.net/newsplus/</a><br />
になる模様<br />
分かりやすいですね。<br />
<br />
<blockquote class="twitter-tweet tw-align-center" lang="ja">
<a href="http://t.co/0arak22p" title="http://open2ch.net/">open2ch.net</a> 虚構新聞にすっぱ抜かれたけど 『オープン2ちゃんねる』はじめてみました。転載自由な2ちゃん風掲示板です。 <a href="https://twitter.com/search/%25232ch">#2ch</a><br />
— satoru.netさん (@satorunet) <a data-datetime="2012-06-06T21:11:13+00:00" href="https://twitter.com/satorunet/status/210478976311885825">6月 6, 2012</a></blockquote>
<script charset="utf-8" src="//platform.twitter.com/widgets.js">
</script><br />
作成したのは <a href="http://satoru.net/" target="_blank">satoru.net</a> さんでした。<br />
どうりで素早いわけですね。TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-13045203909864100352012-06-05T09:44:00.004+09:002012-06-05T09:46:34.232+09:00プレゼン資料の作成やサイト製作で使うアイコンを探せる「Open Clip Art Library」いっつも自分で使うのを忘れてしまいがちだけど便利なサイトをご紹介します。<br />
<br />
プレゼン資料などで写真やアイコンを使用したいときは多いと思います。<br />
前者はGoogleの画像検索やFlickrなどで再使用OKな写真を探すことでかないますが、アイコンやイラストはなかなか使いたいものはありません。<br />
<br />
そこでこの <a href="http://openclipart.org/" target="_blank">OpenClipArt</a> です。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://openclipart.org/" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" height="474" src="http://4.bp.blogspot.com/-pFsKEb1DwCg/T81RgmZUivI/AAAAAAAAAnE/EFDof-q3Ong/s640/ss_ocal.png" width="640" /></a></div>
このサイトは、再使用可能なクリップアートが多数掲載されています。<br />
主な特徴としては<br />
<br />
<ul>
<li>パブリックドメインで提供され再使用が可能(無料・修正可能)</li>
<li>ベクター形式でも配布されているので加工が簡単</li>
<li>オンラインで画像の加工が可能</li>
</ul>
<div>
という感じです。</div>
<div>
<br /></div>
<div>
使い方も簡単です。</div>
<div>
画像をクリックすると下のような画面になり、View Imageボタンでsvg形式で表示(ダウンロード)、PNGボタンでpng形式で表示(ダウンロード)できます。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://openclipart.org/detail/5012/laptop-by-metalmarious" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="474" src="http://1.bp.blogspot.com/-0AllDkqFSk0/T81STphDkgI/AAAAAAAAAnM/p_M08ouZwo8/s640/ss_ocal_view.png" width="640" /></a></div>
<div>
svgファイルは、Illustrator等で加工しても良いですが、凝ったことをしないのであれば、Edit Imageボタンで画像エディタを使えます。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.flamingtext.com/imagebot/editor?ref=ocal&svgurl=http://openclipart.org/people/metalmarious/metalmarious_Laptop.svg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="474" src="http://1.bp.blogspot.com/-AV8eAxnDFKo/T81VMZNeEKI/AAAAAAAAAnY/3bOeU3f8mN0/s640/ss_ocal_edit.png" width="640" /></a></div>
<div>
また、たとえば <a href="http://openclipart.org/search/?query=iphone" target="_blank">iPhoneと検索</a> すると</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-mv3pzN_UCro/T81V_e8N-SI/AAAAAAAAAng/yVO13rsby8E/s1600/ss_iphone.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="474" src="http://1.bp.blogspot.com/-mv3pzN_UCro/T81V_e8N-SI/AAAAAAAAAng/yVO13rsby8E/s640/ss_iphone.png" width="640" /></a></div>
<div>
このように80以上出てきました。</div>
<div>
これらがすべてベクター画像で配布されているのです。</div>
<div>
<br /></div>
<div>
プレゼン資料やWebサイトのアクセントとして、ぜひ活用したいですね!</div>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-69969948923063630882012-06-04T09:00:00.000+09:002012-06-04T09:52:30.334+09:00豊洲新市場についてのニュースサイト「豊洲新市場ニュース」を開設しました株式会社ダイレクトサーチジャパンは、2015年3月までの開場をめざし計画が進んでいる「豊洲新市場(仮)」およびその周辺地域の情報をまとめたニュースサイトをリリースいたしました。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://news.toyosu-market.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="428" src="http://4.bp.blogspot.com/-ekFk2_QiiJM/T8sr5Qh8EpI/AAAAAAAAAmw/fMS8MUGVkXI/s640/ss_toyosuma.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://news.toyosu-market.com/" target="_blank"><b>豊洲新市場ニュース</b></a></div>
<br />
どうぞよろしくお願いします。TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-9912880005072129352012-05-31T14:14:00.000+09:002012-06-07T10:03:11.805+09:00Yahoo! JAPAN のシークレットIDが素晴らしいので今すぐ使おう今日も順調にお腹がいたい <a href="http://www.facebook.com/kohji.tanaka" target="_blank">TANAKA Kohji</a> です。<br />
ニュースでではなく、たまたま知ったYahoo! JAPANの新しい機能、シークレットIDを試してみました。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ReVg-zeO_Ig/T8b21ziRdVI/AAAAAAAAAjA/3lsReDOuLNQ/s1600/ss_secret_id.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="443" src="http://1.bp.blogspot.com/-ReVg-zeO_Ig/T8b21ziRdVI/AAAAAAAAAjA/3lsReDOuLNQ/s640/ss_secret_id.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://techblog.yahoo.co.jp/topics/secret_id_release/" target="_blank">新機能「シークレットID」を使ってみよう (Yahoo! JAPAN Tech Blog)</a></div>
<br />
この機能は簡単にいうと<br />
<br />
<ul>
<li>ログインIDを変更できる</li>
</ul>
<div>
という機能。簡単すぎて一行でした。</div>
<div>
<br /></div>
<div>
Yahoo! JAPAN のようにIDがサービス内で表示される場合、ログインIDが既知なのでパスワードのみ何らかの手段で入手されるとIDを乗っ取られてしまいます。</div>
<div>
パスワードを総当たりで攻撃するとか、破られやすいパスワードを利用している場合もありますね。</div>
<div>
<br /></div>
<div>
大抵の場合、複雑で、長い(たとえば20文字程度の)パスワードを使用することで防衛するわけですが、それでもIDが知られているので相対的にはリスクは高くなります。</div>
<div>
<br /></div>
<div>
そこで、シークレットIDで、ログイン用のIDを別にしてしまおうという発想ですね。</div>
<div>
これ素晴らしいと思います。</div>
<div>
<br /></div>
<div>
思いつく限りで</div>
<div>
<ul>
<li>(当然のことながら)アカウントを乗っ取られる危険性が減る</li>
<li>既存の仕組み(通常のID)と共存できる</li>
<li>システム的に実装難易度が高くない</li>
<li>より重要なサービスの場合、シークレットID必須というようなことが将来的に可能になる</li>
</ul>
<div>
という感じ。</div>
</div>
<div>
<br /></div>
<div>
ひとつめはいわずもがな。</div>
<div>
わたしも早速パスワード管理ソフトのパスワード生成機能で、パスワード以上に堅牢なIDに変更しました。(そこまでする必要はないかもしれませんが、せっかくなので)</div>
<div>
<br /></div>
<div>
ふたつめの共存というのはYahoo! JAPANのようなサービスには絶対に必要でしょう。</div>
<div>
ユーザーを啓蒙しながら、徐々に移行させるということも可能なので、意識の高いユーザーから移行していけます。</div>
<div>
利用を休止しているユーザーの存在を考えると移行率が100%になることはありませんが、逆に言えば100%にする必要がありません。</div>
<div>
<br /></div>
<div>
3つ目の実装難易度が低いというのもポイントです。</div>
<div>
技術的な話をするとおそらく以下のような手順で既存のサービスに載せることになるでしょう。</div>
<div>
<ol>
<li>usersテーブルにsecret_idフィールドを追加</li>
<li>Userを追加するときにIDをハッシュ化しsecret_idフィールドに投入</li>
<li>UserがシークレットID機能を利用するときはsecret_idを変更</li>
<li>ログイン時にはシークレットIDとパスワードでログイン</li>
</ol>
<div>
という感じでしょうか。既存のユーザーも一律変換してしまって良いですね。</div>
</div>
<div>
<b>既存のログインの仕組みと大差ないので実装が簡単</b>です。</div>
<div>
(シークレットIDを失念したユーザーへの対応はパスワードと同様のフローで必要)<br />
(ハッシュ化されてるかは不明ですが、まあしておいて損は無さそうですね。<span style="background-color: #fff2cc; color: #666666;">追記:確認したら登録情報のページでシークレットID表示されてたのでハッシュ化はされてないですね、ログイン専用IDという表記がふさわしいところでしょうか[06/07]</span>)</div>
<div>
<br /></div>
<div>
そして最後の点。</div>
<div>
Yahoo!カードのような、よりIDパスワードが重要な意味を持つサービスがあります。</div>
<div>
このようなサービスのみ、シークレットIDの登録が必須というようにすれば、よりセキュアにサービス展開が可能でしょう。</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
良いアイディアとはこういう少ない手間で大きな効果を生むものを言うのだと思います。</div>
<div>
シークレットIDの機能、良いですね。</div>
<div>
<br /></div>
<div>
サービス提供者にとってパスワードをハッシュ化しておくのは当然ですが、シークレットIDの実装をするのも当然になってくるかもしれません。</div>
<div>
<br /></div>
<div>
というわけでみなさんぜひ活用しましょう!</div>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-78269884692413731652012-05-30T08:20:00.000+09:002012-06-24T18:16:55.273+09:008時間耐久でPHPUnitについて勉強してきたよというわけで <a href="http://twitter.com/mon_sat" target="_blank">@mon_sat</a> です!<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-pCMtKp_yf_I/T8VcAaJk6_I/AAAAAAAAAi0/-GdP9kp50YI/s1600/oss_cakephp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="http://1.bp.blogspot.com/-pCMtKp_yf_I/T8VcAaJk6_I/AAAAAAAAAi0/-GdP9kp50YI/s400/oss_cakephp.png" width="400" /></a></div>
<br />
PHPUnitについてのセッションということで気合い充分で参加してきました。<br />
この<b>8時間耐久シリーズ</b>は<b>ノマドのなかのノマド</b>であり、<b>安藤の中の安藤</b>である<a href="https://twitter.com/#!/yando" target="_blank">@yando</a>さんが、無償で行っているセミナー(?)です。<br />
コワーキングスペースのなかのコワーキングスペースである<a href="http://www.osscafe.net/ja/" target="_blank">下北沢オープンソースカフェ</a>にて、午前中から夕方まで、みっちりPHPUnitについて学んできました。<br />
<br />
PHPUnit使ってますか?<br />
普段テストを書いていないとは言えませんが、胸を張って言えるレベルではないわたし。<br />
独習でやってきていると基礎体力の点で充分とは言えないもの。<b>今回はみっちりと筋トレしてこようと思い参加</b>した次第。<br />
<br />
<div id="__ss_13126170" style="width: 425px;">
<strong style="display: block; margin: 12px 0 4px;"><a href="http://www.slideshare.net/yandod/8phpunit" target="_blank" title="8時間耐久PHPUnitの教室">8時間耐久PHPUnitの教室</a></strong> <iframe allowfullscreen="" frameborder="0" height="355" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/13126170" width="425"></iframe> <br />
<div style="padding: 5px 0 12px;">
View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/yandod" target="_blank">yandod</a> </div>
</div>
<br />
午前中はPHPUnitのインストールが中心。<br />
しかしそこはサービス精神旺盛の<a href="https://twitter.com/#!/yando" target="_blank">@yando</a>さん、普通にインストールするだけではありません。<br />
<a href="http://pear2.php.net/" target="_blank">Pyrus</a>というPEARの環境を整えるソフトの説明とそれを利用するメリットも教えてくれます。<br />
<br />
わたしが理解したところによると、PEARでいろいろinstallしようとすると、全ユーザーに影響する形でインストールされてしまうという問題があるそうです。<br />
自分の環境のみで特定のバージョンのPEARを使用したいといった場合など、普通にPEARを使用すると生じる問題を解決してくれるナイスなツールですね。<br />
<br />
午後からいよいよ本格的にテストについてのお話。<br />
まず簡単なclassのファイルを見て、それに対しテストを書いていきます。<br />
<br />
基本的なPHPUnitによるテストの書き方は<br />
<script src="https://gist.github.com/2831229.js?file=_SampleTest.php">
</script><br />
という具合。<br />
これでSmapleクラスのanyMethod()メソッドが実行され、期待する値(ここでは'正しい値')と比較されます。<br />
assartEquals()というアサーションは == を用いた比較をおこない、同値であればめでたくpassedとなります。<br />
実行は、コマンドラインから次のように行います。<br />
<div style="background-color: white; border: 1px solid #ccc; margin: .5em 0; padding: .5em 1em;">
$ phpunit tests/Sample.php</div>
ちなみにこうすると、結果が緑(赤)のバーで表示され見やすくなります。<br />
<div style="background-color: white; border: 1px solid #ccc; margin: .5em 0; padding: .5em 1em;">
$ phpunit --colors tests/Sample.php</div>
テストに失敗した場合は、失敗したというメッセージとともに「最後の引数で与えたコメント」が表示されます。<br />
複数のテストを書く場合に分かりやすくなりますね。<br />
<br />
その後さまざまなアサーションの種類を教えてもらいました。バージョンアップのたびに増殖中とのこと。<br />
$this->assertCount()とか。<br />
<br />
また setUp() と tearDown() を利用して、共通処理の説明も。<br />
上記のサンプルであれば。<br />
<script src="https://gist.github.com/2831229.js?file=SampleTest.php">
</script><br />
という具合。これでテストメソッドがtestOther(), testAnother()のように増えていってもそれぞれのメソッド内でいちいちインスタンスを生成するという重複が避けられます。DRYですね。<br />
<br />
ちなみにtearDown()の 'tear' は、涙の「ティア」ではなく、破るという意味の「テア」だそうです。<br />
<a href="http://ejje.weblio.jp/content/tear+down" target="_blank">tear down で「建物等を取り壊す」という意味</a>になるそう。<br />
いやあ勉強になります。こんなこと自分で勉強してたら絶対に分からないですからね。<br />
(この後、休憩中にmacのsayコマンドでいろいろ発音させて遊びました)<br />
<br />
その後聞いたことも無い機能を次々と教えてもらいました。<br />
<br />
まずはアノテーション。<br />
テストメソッドの前に、指定された内容を書くことで、テストの実行を制限したり、特殊なテストを実行できるようになるとのこと。<br />
<script src="https://gist.github.com/2831229.js?file=With_Annotation_SampleTest.php">
</script><br />
他にもこんなアノテーションも。かなりDRYに記述できますね。(テストについてはDRYすぎるのも善し悪しだと思いますが、こういうのであれば何をテストしているかも分かりやすく活用したいところです)<br />
<br />
<style type="text/css">
#tipshare-view4blog-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#404040;}#tipshare-view4blog-body{background: url(http://tipshare.info/img/ninjal-log-bg.png) no-repeat right bottom;background-color: whiteSmoke;border: 1px solid #DDD;padding: 13px;box-shadow: 0 1px 2px rgba(0,0,0,.1);}#tipshare-view4blog-body h2{overflow:hidden;font-weight:bold;font-size:24px;line-height:36px;}#tipshare-view4blog-body .site-title{text-align:right;}#tipshare-view4blog-body a.site-title{padding-left:40px;}#tipshare-view4blog-body a.inside{text-decoration: none;margin:-4px 3px 0 3px}#tipshare-view4blog-body a.site-title ,#tipshare-view4blog-body a.post-view-title ,#tipshare-view4blog-body a.post-user {text-decoration: none; color: #333;}#tipshare-view4blog-body a.site-title:hover ,#tipshare-view4blog-body a.post-view-title:hover ,#tipshare-view4blog-body a.post-user:hover {color: #f00;}#tipshare-view4blog-body .post-box-action {height: 20px;margin: 10px 3px 3px 3px;padding: 16px 10px 5px 10px;color: #999;background-color: white;border-radius: 6px;border: 1px solid #EEE;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2) inset;-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2) inset;box-shadow: 1px 1px 0.4px rgba(0,0,0,.2) inset;}#tipshare-view4blog-body .post-body {margin: 0;padding: 0 0 1em;}#tipshare-view4blog-body .post-title {margin: 5px;}#tipshare-view4blog-body .post-body h1 {font-size: 24px;line-height: 24px;}#tipshare-view4blog-body .post-user {float: left;margin-right: 2px;}#tipshare-view4blog-body .post-date {font-size: 12px;margin: 1px 2px 0 0;padding-left: 18px;margin: 0 4px -6px 0;background: url(http://tipshare.info/img/fam/calendar_view_day.png) no-repeat center left;color: #999;float: left;}img.current-user-image, img.editor-image {float: left; width: 24px; height: 24px; margin: -6px 4px -6px 0; vertical-align: baseline; }img.icon-mini { float: left; margin: 0 4px -6px 0; vertical-align: baseline; }#tipshare-view4blog-body .post-body-main { background-color: rgba(255,255,255, 0.6); padding: 10px; margin: 3px; line-height: 1.3; border-radius: 6px 6px 0 0; }#tipshare-view4blog-body img.editor-image{width: 24px;height: 24px;margin: -8px 4px -6px 0;vertical-align: baseline;}
</style><br />
<div id="tipshare-view4blog-body">
<div class="post-body">
<div class="post-title">
<h1>
<a class="post-view-title inside" href="http://tipshare.info/view/4fc46a377f8b9ab86d000000">PHPUnitの @dataProvider アノテーションを使用することで配列内のデータでテストを反復して実行可能</a></h1>
</div>
<div class="post-box-action">
<span class="post-user"><a href="http://twitter.com/mon_sat" target="twitter"><img alt="@mon_sat" class="icon-mini" src="http://tipshare.info/img/twitter/bird_16_blue.png" /></a><img alt="" class="editor-image" src="//api.twitter.com/1/users/profile_image?screen_name=mon_sat&size=mini" /><a class="inside post-user" href="http://tipshare.info/user/mon_sat">@mon_sat</a></span><span class="post-date">2012-05-29 15:18:31</span></div>
<div class="post-body-main" id="post-body-plain">
テストの書き方(@は半角)<br />
合計4回のテストが実行される<br />
<br />
<?php<br />
class DataTest extends PHPUnit_Framework_TestCase<br />
{<br />
/**<br />
* @dataProvider provider<br />
*/<br />
public function testAdd($a, $b, $c)<br />
{<br />
$this->assertEquals($c, $a + $b);<br />
}<br />
<br />
public function provider()<br />
{<br />
return array(<br />
array(0, 0, 0),<br />
array(0, 1, 1),<br />
array(1, 0, 1),<br />
array(1, 1, 3)<br />
);<br />
}<br />
}<br />
<br />
<a class="inside" href="http://tipshare.info/tags/phpunit">#phpunit</a></div>
</div>
<div class="site-title">
<h2>
<a class="site-title" href="http://tipshare.info/">tipshare.info</a></h2>
</div>
</div>
<br />
<br />
続いて、PHPUnitが行う気の利いた機能。<br />
なんとPHPUnitではテスト実行前にスーパーグローバル変数を退避させ、テスト実行後に書き戻してくれるのです!<br />
テストケース内で書き換えても影響は無いんだそう。毎度setUp()とtearDown()で $this->_session = $_SESSION; して $_SESSION = $this->_session; する必要はまったくないんだって。驚愕です。<br />
<br />
で、ふと気になって、CakePHPのConfigure::read()できる設定はどうなんだろうと、CakePHPのソースを見てみると!<br />
<br />
<style type="text/css">
#tipshare-view4blog-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#404040;}#tipshare-view4blog-body{background: url(http://tipshare.info/img/ninjal-log-bg.png) no-repeat right bottom;background-color: whiteSmoke;border: 1px solid #DDD;padding: 13px;box-shadow: 0 1px 2px rgba(0,0,0,.1);}#tipshare-view4blog-body h2{overflow:hidden;font-weight:bold;font-size:24px;line-height:36px;}#tipshare-view4blog-body .site-title{text-align:right;}#tipshare-view4blog-body a.site-title{padding-left:40px;}#tipshare-view4blog-body a.inside{text-decoration: none;margin:-4px 3px 0 3px}#tipshare-view4blog-body a.site-title ,#tipshare-view4blog-body a.post-view-title ,#tipshare-view4blog-body a.post-user {text-decoration: none; color: #333;}#tipshare-view4blog-body a.site-title:hover ,#tipshare-view4blog-body a.post-view-title:hover ,#tipshare-view4blog-body a.post-user:hover {color: #f00;}#tipshare-view4blog-body .post-box-action {height: 20px;margin: 10px 3px 3px 3px;padding: 16px 10px 5px 10px;color: #999;background-color: white;border-radius: 6px;border: 1px solid #EEE;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2) inset;-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2) inset;box-shadow: 1px 1px 0.4px rgba(0,0,0,.2) inset;}#tipshare-view4blog-body .post-body {margin: 0;padding: 0 0 1em;}#tipshare-view4blog-body .post-title {margin: 5px;}#tipshare-view4blog-body .post-body h1 {font-size: 24px;line-height: 24px;}#tipshare-view4blog-body .post-user {float: left;margin-right: 2px;}#tipshare-view4blog-body .post-date {font-size: 12px;margin: 1px 2px 0 0;padding-left: 18px;margin: 0 4px -6px 0;background: url(http://tipshare.info/img/fam/calendar_view_day.png) no-repeat center left;color: #999;float: left;}img.current-user-image, img.editor-image {float: left; width: 24px; height: 24px; margin: -6px 4px -6px 0; vertical-align: baseline; }img.icon-mini { float: left; margin: 0 4px -6px 0; vertical-align: baseline; }#tipshare-view4blog-body .post-body-main { background-color: rgba(255,255,255, 0.6); padding: 10px; margin: 3px; line-height: 1.3; border-radius: 6px 6px 0 0; }#tipshare-view4blog-body img.editor-image{width: 24px;height: 24px;margin: -8px 4px -6px 0;vertical-align: baseline;}
</style><br />
<div id="tipshare-view4blog-body">
<div class="post-body">
<div class="post-title">
<h1>
<a class="post-view-title inside" href="http://tipshare.info/view/4fc46e717f8b9afc25000000">CakePHPのCakeTestCaseは、setUp()とtearDown()でConfigure::read()の値を保存・書き戻しをしてくれる</a></h1>
</div>
<div class="post-box-action">
<span class="post-user"><a href="http://twitter.com/mon_sat" target="twitter"><img alt="@mon_sat" class="icon-mini" src="http://tipshare.info/img/twitter/bird_16_blue.png" /></a><img alt="" class="editor-image" src="//api.twitter.com/1/users/profile_image?screen_name=mon_sat&size=mini" /><a class="inside post-user" href="http://tipshare.info/user/mon_sat">@mon_sat</a></span><span class="post-date">2012-05-29 15:36:33</span></div>
<div class="post-body-main" id="post-body-plain">
テストケースの中でConfigure::write()しても、他のテストケースに影響を及ぼさない<br />
<a href="https://github.com/cakephp/cakephp/blob/master/lib/Cake/TestSuite/CakeTestCase.php" target="_blank">https://github.com/cakephp/cakephp/blob/master/lib/Cake/TestSuite/CakeTestCase.php</a><br />
<a class="inside" href="http://tipshare.info/tags/CakePHP">#CakePHP</a><br />
<a class="inside" href="http://tipshare.info/tags/phpunit">#phpunit</a></div>
</div>
<div class="site-title">
<h2>
<a class="site-title" href="http://tipshare.info/">tipshare.info</a></h2>
</div>
</div>
<br />
<br />
案の定、同じように処理をしていました。<br />
これは便利すぎますね。<br />
<br />
<br />
この会では、実際に手を動かして何も無いところからテストを書いていったり、逆にテストが与えられclassを作っていくというプチテスト駆動開発を体験できたりと、非常に盛りだくさんの内容でした。<br />
<br />
というわけでまた血になり肉になったようです。<br />
<a href="https://twitter.com/#!/yando" target="_blank">@yando</a> さんどうもありがとうございました!mon_sathttp://www.blogger.com/profile/01900839852348670904noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-11029894234891211282012-05-25T11:09:00.000+09:002012-05-25T11:09:20.765+09:00Learn how to learn と Learn how to ask目覚まし時計が無くても朝起きれるようになった TANAKA Kohji です。<br />
いいことなのか、悪いことなのか・・・<br />
<br />
さて。<a href="http://2010.phpmatsuri.net/" target="_blank">PHP祭り</a>というイベントで知った大切な言葉に<a href="https://twitter.com/#!/hyoshiok" target="_blank">@hyoshiok</a>さんの<br />
<blockquote class="tr_bq">
<b>Learn how to learn</b></blockquote>
という言葉があります。<br />
「学び方を学ぼう」ということで、<b>その道の達人から学び方を学ぶ</b>ことが、上達する近道であるというお話でした。<br />
<br />
この言葉にいたく感激したわたしは、あちこちでこのお話をするようにしています。<br />
<br />
(どの分野でも当てはまりますが)プログラムを学ぶときには、とくに重要ではないでしょうか。<br />
今日、プログラムを学ぶにはお金をかける必要がありません。<br />
インターネット上に山ほど情報がころがっていて、また書籍が多数ある分野も数多くあります。<br />
試行錯誤は大事ですが、試行錯誤それ自体は目的ではありません。<br />
「どのように学習すると良いのか」というのは何かを学ぶときに、常に意識しておいて、その道の先達がいれば、その方に教えてもらうと良いでしょう。<br />
(教えてもらわずとも、その方が「どのように学習したのか」を意識することは大切です)<br />
<br />
さて、ここからは別の話。<br />
毎日複数の勉強会が開催され、あちこちで、無料で、有志の人たちが、勉強会参加者にいろんなことを教えています。<br />
しかし、一方で。そういう方の多くは、そのことを本業にし、そして日々忙しく活躍しているのです。<br />
その方に「今(ruby|python|php|etc)を勉強しようと思ってるから、今度教えてください」と言っても、よっぽどじゃないと時間とってくれないと思います。<br />
逆の立場だったら嫌ですよね。仕事じゃないのに、、、ってなると思います。<br />
<br />
じゃあそういった方が、何も教えてくれないかというとそういうわけでもありません。<br />
twitterとかで困っている人がいると、積極的にヒントを教えていたりするのは、良く目にします。<br />
わたしもそうやって助けてもらったことがたくさんあるし、つい昨日もありました。(ありがとうございます)<br />
<br />
個人的な意見としては(少なくともわたしがお会いしている方々で)「教えることが嫌い」な方っていませんし、そういうことを積極的にやっている方が多いです。<br />
自分から勉強会を開催したりとか。<br />
<br />
ただたまに残念なのは「教わり方が残念な人」という人もいるようで。<br />
それゆえ「学習スピードが遅く」結果的に「上達が遅い」という人がいるようです。<br />
<br />
逆にそういうのが上手な方がいるので、その方を参考に、どういうふうにすると良いのかというのを考えてみました。<br />
そういう方は<br />
<br />
<ol>
<li>(前提として)何事も教えてもらうものではなく、自分で学習するものだと考えている</li>
<li>自分が分からないことを隠さない</li>
<li>具体的にどのポイントが分からないかを説明している</li>
<li>どのように試行錯誤したかを説明している</li>
<li>尋ねるときは「答え」ではなく、自分がググるための「キーワード」のみを聞く</li>
</ol>
<div>
という感じでしょうか。</div>
<div>
<br /></div>
<div>
まず当然のこととして、1にあるように、教えてもらわずとも自力で解決するというように考えていない人には、救いの手は差し伸べられないと思います。ここを勘違いする人は論外ですのでまあ置いておくとしまして。</div>
<div>
<br /></div>
<div>
2は大事だと思います。</div>
<div>
わたし自身もこれに気づくまでに大きく遠回りをしたものです。</div>
<div>
自分が知らないことを<b>「分かってない」と正直に公言するのは非常に勇気のいること</b>です。それによって下に見られるんじゃないかとか(今考えれば)つまらないことを思ってしまうもの。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-xSUto5e2VjI/T77oNdMoSpI/AAAAAAAAAiQ/wKl62KpgfPw/s1600/marude.jpeg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-xSUto5e2VjI/T77oNdMoSpI/AAAAAAAAAiQ/wKl62KpgfPw/s1600/marude.jpeg" /></a></div>
<div>
ですが、何人かそういう人を見てきて分かったのは、<b>そういうふうに考えている人は、半年後1年後に会ってもまったく成長してないという方がほとんど</b>ということです。</div>
<div>
<br /></div>
<div>
数年前の自分を振り返って、当たり前のことができていなかった(もしくは当たり前のことを知らなかった)と思ったとしたら、今の自分に対し当たり前のことができていないと思っている方がいるということです。</div>
<div>
<br /></div>
<div>
<b>その道の先達には、どう隠そうとしても、今のあなたは丸裸</b>です。そう。隠そうとしていることまで。</div>
<div>
それなのに 2 を実践しない理由はどこにあるでしょうか。</div>
<div>
(と過去の自分に教えてあげたくなります)</div>
<div>
<br /></div>
<div>
そして、3と4です。</div>
<div>
「動かない」では(助けようとしている人がいても)教えてもらえません。可能な限り具体的に、何をどうしていて動かないのかを(端的に)説明する努力が必要です。</div>
<div>
また幸運にも教えてもらったときに「それは試しました」じゃいけません。あなたが事前に説明していない方がよっぽど悪いのです。逆の立場で、それをいわれて良い気がする人がいるでしょうか。</div>
<div>
(でもこれついつい言っちゃいますけど。どう返したら良いんでしょうね)</div>
<div>
<br /></div>
<div>
そして最後がもっとも大事な 5 のポイント。</div>
<div>
なかには親切に答えを教えてくれる方もいますが、あくまでそれが特殊事例。</div>
<div>
<b>反応してくれただけでも(本来なら)充分</b>すぎることですよね。ひとりで誰にも聞けない状況で学習しているのであれば。</div>
<div>
その方に、それ以上の何かを求めるのであれば、それは<b>自分が調べて学習するためのキーワード</b>(ヒント)でなくてはなりません。</div>
<div>
<b>学習をする時間を大幅に短縮するのは、答えそのものを教えてもらったときではなく、キーワードを知ったとき</b>なのです。</div>
<div>
キーワードは問題解決の糸口とも言い換えられます。それを見つけるのに時間がかかるのです。</div>
<div>
そして<b>ヒントであれば、多くの方が発信しているもの</b>です。あとはそれに気づくかどうかですね。</div>
<div>
<br /></div>
<div>
というわけでこれから本格的に何かを学習する(あなた | わたし)へのお話でした。</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
と延々書いてきて気づいたことが。</div>
<div>
これ、いつも以上に、自分のためになりました。</div>
<div>
それどころか自戒になりました。</div>
<div>
教えてくれる周囲の凄い方々へ、感謝を伝えることを忘れていたかもしれません。</div>
<div>
直接言うべきことでこの場でいうべきことではありませんが、いつも助けていただいている皆様、心の底から感謝しています。はい。本当に。</div>TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-1632785459482497432012-05-24T08:06:00.000+09:002012-05-24T08:06:04.188+09:00第1回ゼロからはじめるWordPress勉強会に参加してきました久しぶりの朝ブログ。というわけで <a href="http://www.facebook.com/kohji.tanaka" target="_blank">TANAKA Kohji</a> です。<br />
昨日、<a href="http://www.facebook.com/coworkingebisu" target="_blank">コワーキングスペース恵比寿</a>で行われた<a href="http://www.facebook.com/events/232829363492335/" target="_blank">第1回ゼロからはじめるWordPress勉強会</a>に参加してきました。<br />
<br />
<a href="http://ja.wordpress.org/" target="_blank">WordPress</a>とは、オリジナルのブログやWebサイトを簡単に構築するためのCMSとよばれるソフトのこと。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ja.wordpress.org/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="275" src="http://3.bp.blogspot.com/-0ICa6OAO3HQ/T71iix7zfzI/AAAAAAAAAiA/pStUZ6bjlZM/s400/wp.png" width="400" /></a></div>
わたしも何度か使用したことがありますが、非常に使い勝手が良く、自分の作りたい物を時間をかけずに構築することができます。<br />
<br />
そして特徴のひとつに、ユーザー数が非常に多く、またコミュニティも活発ということもあります。<br />
ここしばらくWordPress界隈の方とお話しする機会が増えたのですが、コミュニティが発展しつづけるのもうなづける見習うべき方々ばかりでした。<br />
<br />
さてこの勉強会。<br />
これからWordPressを始める方、もしくは、始めて間もなくいろいろと試行錯誤をしている方を対象とした勉強会です。<br />
主催されているのは、コワーキングスペース恵比寿の管理人でもある<a href="http://www.facebook.com/nakachong" target="_blank">中畑隆拓さん</a>(<a href="https://twitter.com/#!/nakachon" target="_blank">@nakachon</a>)です。<br />
自身の経験をもとに、<b>学習初期の「コミュニケーションをとる仲間」の大切さ</b>をみなさんに知ってもらおうということで、勉強会の定期開催を決めたそうです。<br />
わたしもWordPressの情報収集をするべく参加してみました。<br />
<br />
参加者は10名ほど。コワーキングスペース恵比寿が満席に。<br />
集まった方は、WordPressに興味がありこれから本格的に使っていこうと思っている方から、すでに独習でWordPressを使用したサイトを作成し運営している方まで。<br />
<br />
テーマは『○○』勉強会に参加してもらっている<a href="http://www.facebook.com/agumo.koike" target="_blank">小池安雲さん</a>(<a href="https://twitter.com/#!/agumo5" target="_blank">@agumo5</a>)も参加されました。自身のWebサイト(<a href="http://space-bliss.com/">http://space-bliss.com/</a>)をWordPressで構築しているそうです、すべて独習で。<br />
わたし自身が独習でプログラミングを身につけていったこともあり、こういった方を応援するのは大好きです。<br />
<br />
<br />
この日の勉強会では、ふたつのことを。<br />
ひとつは、ローカル環境の構築ということで、持参してもらったノートPC内でWordPressが動くようにすること。<br />
もうひとつは、WordPressのインストールということで、WordPressの最新版をダウンロードし初期設定をすませるところまで。<br />
みなさん優秀で、概ね何のトラブルも無く終了しました。<br />
<br />
慣れた人には、たったこれだけのことだと思います。しかし、そのたったこれだけのことに、学習初期のころ何時間もかけてしまうもの。つまづいた理由が分からずに。<br />
この時期、<b>どういう点がはまりどころかというのを仲間と共有しておく</b>のは大事です。<br />
(上達すると忘れてしまいますからね、その時苦労したことを)<br />
<br />
ちなみにはまったことを解決したらブログに残すことが大事です。<br />
あとから自分が「同じ点でつまづいたり」することは良くあることですし、それ以上に「同じポイントではまっている方」を助けることになります。<br />
<b>あなたが何時間もはまった問題を解決してくれたそのWebページは、先に経験した方が、後の方のために書いてくれたものかもしれません。</b><br />
次はあなたが、あなたの視点で書くことで、同じ経験をする方の役に立つ番です。<br />
(ちなみに「ブログに書いてる時間が無い」という方のための <a href="http://tipshare.info/">http://tipshare.info/</a> というサービスを作っています。5分で書けるようにTipsという単位で投稿するためのサイトです)<br />
<br />
勉強会に参加したらブログに書く、これはわたし自身が勉強会に参加して教えてもらった大事なことです。(「勉強会はブログに書くまでが勉強会」という名言もあります)<br />
ぜひ昨日参加された方は実践しましょうね。なんせWordPressの勉強会なんですから(笑)<br />
<br />
<br />
今はBloggerやTumblr等を利用して無料でブログが書けます。(独自ドメインで!)<br />
それでもWordPressを利用するのは、<b>自分の作りたいものが作りたい</b>からでしょう。<br />
スキルアップは表現力アップに通じます。<br />
勉強会に参加して一番の収穫は、参加者の「作りたい」というパワーを感じたことです。<br />
以前ほどその情熱を持てていないことに、ふと気づかされました。<br />
今日からまたゼロからやり直そうと、初心をとりもどした次第。<br />
非常に有意義な勉強会となりました。TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.comtag:blogger.com,1999:blog-3835325120459344237.post-25395990160634752572012-05-02T10:14:00.000+09:002012-05-02T17:46:39.709+09:00雨の高尾山TANAKA Kohji です。<br />
先日、高尾山へ行ってきました。<br />
子供のころ以来なので何十年ぶりか。もう前回行った記憶はほとんどありません。<br />
<br />
電車が到着する直前から雨がぱらぱら。<br />
夕方からの雨予報が午前中には降り出しました。<br />
<br />
予報では小雨ということだったので気にせず出発。<br />
の前に。<br />
早めの腹ごしらえということで、観光客の行かなそうな駅近のお蕎麦屋さんへ。<br />
<br />
そうしたらお店に着いたとたんに、どしゃ降りに。<br />
もう笑ってしまうくらいの雨でした。<br />
<br />
しかし。<br />
おそばを食べ終わってしばらくしたら、小止みに。<br />
ついてますね。<br />
ところでこの「ついてる」って何が付いてるんでしょうね?<br />
<br />
さて、そそくさと駅に戻り、傘を買おうとしたら、さっきのどしゃ降りのときに売り切れたそうです。<br />
当然ですね。<br />
というわけでお蕎麦屋さんの道すがらにあったこじんまりとしたお店で傘を調達。<br />
こっちは売ってることが知られていないのか、まだまだ在庫はありました。<br />
お蕎麦屋さんに行かなかったら気づかなかっただろうし。<br />
ついてますね。<br />
<br />
そしてケーブルカーを使って、、、ではなく、リフトで上へ。<br />
リフトはムスメのリクエストです。<br />
小雨も降っていたしケーブルカーの方が良いのですが、リクエストには勝てません。<br />
<br />
一応、幌のようなものがありますが、横からの雨には濡れてしまいます。<br />
それでも霧雨のような雨だったので無問題。<br />
<br />
ムスメと一緒にリフトに乗り、ごとごとと約10分間。<br />
景色は見られませんでしたが、すれ違う団体の小学生に挨拶しながら上昇。<br />
ムスメもご満悦でした。<br />
<br />
そして降り口。<br />
降りた途端、再度どしゃ降り。<br />
リフトに乗ってたらずぶぬれだったことでしょう。<br />
ついてますね。<br />
<br />
その後はてくてくと緩い坂道を登っていき、途中見晴らしの良いところまでくるころには雨は一旦あがりました。<br />
結構遠くまで見えるものですね。八王子や相模原くらいまでははっきりと視認できました。<br />
もっと晴れていればスカイツリーや千葉県のほうまで見えるそうですが。<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://art8.photozou.jp/pub/570/66570/photo/18081168.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img border="0" height="240" src="http://art8.photozou.jp/pub/570/66570/photo/18081168.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">晴れてればこんな感じらしいです</td></tr>
</tbody></table>
それでも見晴らしの良い場所で雨が上がっているのですから。<br />
ついてますね。<br />
<br />
そして予想通り、山の中腹でムスメの「もうケーブルカーで帰りたい」という申し出。<br />
というわけで道半ばにして踵を返します。<br />
<br />
ケーブルカー乗り場も大混雑でしたが、次のケーブルカーに乗れました。<br />
<br />
結局あまり高尾山を堪能できませんでしたが、まあ濡れなくて幸いでした。<br />
(雨が降らなければもっとついてると思うのですが、、、)TANAKA Kohjihttp://www.blogger.com/profile/12053235373467138608noreply@blogger.com