2012/08/10 1:28

個人的に興味があって、twitter API登録をしてアプリを作ってみました。(正確にはまだ途中だけど)この手の記事は他にとても秀逸なものがたくさんあるのですが、備忘録としてまとめてみます。

1.アプリ登録

Twitter Developersでアプリ登録を行います。上記URLからディベロッパーサイトへログインして(個人のアカウントでログイン可能)登録をしていきます。

2.consumer keyなどの必要な情報をもらう

アプリの登録ができるとconsumer keyなどのアプリ制作時に必要な情報をもらえます。 それを控えておきます。※とても重要な情報なので間違えて公開しないように注意!

3.アプリを作る。

ここからが本番です。っていっても、ボクはそこまでの知識がないので今回はtwitteroauthのライブラリを使ってみます。

大変便利なライブラリで、ツイートの表示や、短縮URLの展開など今回作ったデモのコアな部分はほとんどこれを利用しています。

例えば、こんな感じのができたりします。

DEMO

自分のタイムラインから画像が含まれるものだけを拾って、画像も含めてPinterest風にアプリというかガジェットみたいなの。

ちなみに、表示は、Wookmarkというjqueryのプラグインを利用しています。

一応、twitter オフィシャル、twitpic、yflog、ついっぷるフォトは対応してます。
かなりナルシストなガジェットになってますが・・・(どれだけ自分好きなん?)
えっと、二次利用も考えておりますので(!)乞うご期待。

注意点

公開先URLを間違えないでね。
→アプリ登録の際に登録したURLでないとアプリは動きません。 まずここで、つまずきましたorz

SSL認証書のチェックを省略する。
デフォルトではSSL認証書のチェックが入ってしまうのですが、 それが環境にとってエラーになってしまうようです。(ここですごくはまりました)

$tmhOAuth = new tmhOAuth(array(
  'consumer_key'    => 'xxxxxx',
  'consumer_secret' => 'xxxxx',
  'user_token'      => 'xxxxxx',
  'user_secret'     => 'xxxxx',
  'curl_ssl_verifypeer' => false,
));

こんな感じでSSL認証を省略してあげる必要がある場合もあるようです。

・・・と、アプリ本体は別として結構簡単にOAuthを使ったツイッターアプリができました。意外とハードルが低いということがわかったので、もう少し勉強してきちんとしたアプリをリリースできるように頑張ってみたいと思います。

こうゆうプログラミング的なことが少しでもわかってくると、表現の幅が広がりますし、アイディアを具現化できる喜びも感じられます。まだまだ、ぜんぜんペーペーなので、あれですが。

2012/07/27 22:36

イメージスライダーとか、ティッカーをwebサイトに導入したいのであれば、「BXSLIDER」というjqueryプラグインがいいかもしれません。

とにかく、高性能です。自動再生、ページャー、PREV、NEXTのボタン、イージング、動きも、カルーセル的に動かすこともできるし、フェードで切り替えたり、ティッカーみたいにすることもできます。
コールバック関数なんかも用意されているので、個別にカスタマイズすることもできます。

ただね、ちょっと高性能がゆえに使い勝手が悪い場合もあります。
実際に幾つかはまってしまったので、実例をあげてご紹介します。

ページャーとPREV、NEXTを個別に定義すると、両者が連携できない。

ページャー機能を使って、サムネイルを表示させた時に、「今」表示している画像をアクティブにできます。
ただし、PREV、NEXTボタンを別で定義しておくと、ページャーのアクティブ化機能と連動はしてくれません。
まー、当たり前といえば当たり前です。コードを見る限り、ページャーの部分にはアクティブにするための記述がはいっていますが、PREV、NEXTボタンは、BXSLIDERで用意されている関数を呼んでいるだけなので、無理です。

DEMO1

$(function(){
	var slider = $('#slider1').bxSlider({
		controls: false,
	});
		
	//サムネイルを定義
	$('.thumbs a').click(function(){
		var thumbIndex = $('.thumbs a').index(this);
		slider.goToSlide(thumbIndex);
		$('.thumbs a').removeClass('pager-active');
		$(this).addClass('pager-active');
		return false;
	});		
		
	$('.thumbs a:first').addClass('pager-active');
			
	//戻るボタンを定義
	$('#go-prev').click(function(){
		slider.goToPreviousSlide();
		return false;
	});
		
	//進むボタンを定義
	$('#go-next').click(function(){
		slider.goToNextSlide();
		return false;
		});				
	});
<ul id="slider1">
  	<li><img src="images/01.jpg" /></li>
  	<li><img src="images/02.jpg" /></li>
  	<li><img src="images/03.jpg" /></li>
  	<li><img src="images/04.jpg" /></li> 
  	<li><img src="images/05.jpg" /></li>             
</ul>
  
<a id="go-prev">前へ戻る</a>
<a id="go-next">次へ進む</a>
  
<ul class="thumbs">
    <li><a href=""><img src="images/01.jpg" /></a></li>
    <li><a href=""><img src="images/02.jpg" /></a></li>
    <li><a href=""><img src="images/03.jpg" /></a></li>
    <li><a href=""><img src="images/04.jpg" /></a></li>
    <li><a href=""><img src="images/05.jpg" /></a></li>
</ul>

対応策:ページャーとPREV、NEXTを一緒に定義してしまう。

DEMO2

$(function(){
  $('#slider1').bxSlider({
    pager: true,
		controls: true,
		prevText: '前へ戻る',
		nextText: '次へ進む',
    buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a href=""><img src="images/01.jpg" /></a>';
        case 1:
          return '<a href=""><img src="images/02.jpg" /></a>';
        case 2:
          return '<a href=""><img src="images/03.jpg" /></a>';
        case 3:
          return '<a href=""><img src="images/04.jpg" /></a>';
        case 4:
          return '<a href=""><img src="images/04.jpg" /></a>';					
      }
    }
  });
});
<ul id="slider1">
  	<li><img src="images/01.jpg" /></li>
  	<li><img src="images/02.jpg" /></li>
  	<li><img src="images/03.jpg" /></li>
  	<li><img src="images/04.jpg" /></li> 
  	<li><img src="images/05.jpg" /></li>             
</ul>

こんな感じです。
デフォルトのコントロールボタンとして、ページャーやPREV、NEXTボタンを組み込めば、BXSLIDER側で全て処理してくれるようです。なんと便利な!
ただし、使い方によっては、サムネイルを動的に生成したいとかってなると、うまくいかない場合もあるかもしれません。(僕の環境では、java scriptのソースの中にCMSで吐き出す動的なコードを入れても大丈夫でした。)

教訓:闇雲に組み合わせるだけじゃだめなんです。

ティッカーがなんか変?

あまり、詳しく検証できていないのですが、画像をティッカー風に流す場合、3巡くらいはスムースに動くんですが、 徐々に動きが遅くなってしまう場合がありました。再現しようと思ったのですが、どうもうまくいきません。
特殊な環境なのか、ちょっとした相性の問題なのか・・・

※デモ作りましたが、動きが遅くなるのは再現できませんでした。ごめんなさい。

DEMO3

対応策:諦めて別の方法を使いましたorz

これだけ高性能なものが手軽に使えるのは本当に素晴らしいことです。
使う用途にもよりますが、引き出しはたくさんあったほうがいざという時に役立つと思いますので、その一つとして覚えておこうと思います。

2012/07/20 0:42

えっと、わざわざブログにするまでも無い事なんですが、個人的にすごいと思ったので。

java scriptで日付の比較をするのが思いのほか、簡単でした。

$(document).ready(function() {
     //今日の日付を指定
     var today = new Date();
     //Xdayを指定 とりあえず松本ぼんぼんにしてみた
     var xDay = new Date(2012/8/4);
     if(today > xDay){
          $('#meg').html('ぼんぼんまでは踊りの練習をかかさない');
     }else{
          $('#meg').html('ぼんぼんが終わったよ');
     }
});

dataオブジェクトにしておけば、「<」で比較できる様です。

DEMO

今日と松本ぼんぼんの日付(8月4日)を比較して8月4日以前は「ぼんぼんまでは踊りの練習をかかさない」と表示されるはずです。

当たり前と言えば当たり前ですが、この方法を知るまでは、「日」だけ抽出して比較するか?なんて、小難しいことを考えていたので、簡単にできて拍子抜けしてます。

あと、jQueryのeach()を使うと、複数の日付群の中から、「今日」を基準に前後で表示方法を変えるなんてこともできたりします。

HTML

<ul class="date">
<li><span>2012/7/1</span> 湘南ベルマーレ戦</li>
<li><span>2012/7/8</span> 東京ヴェルディ</li>
<li><span>2012/7/15</span> ヴァンフォーレ甲府</li>
<li><span>2012/7/22</span> ファジアーノ岡山</li>
<li><span>2012/7/29</span> モンテディオ山形</li>
</ul>

java script

$(document).ready(function() {
     //今日の日付を指定
     var today = new Date();
         
     $('.date li').each(function() {
          //spanの中に含まれる日付をdateオプジェクトに変換
          var gameDate = new Date($(this).children('span').html());

          if(today > gameDate){
               $(this).addClass('fin')
          }

     });
});

html側の日付を拾って、dataオブジェクトに変換して「今日」と比較して、「今日」より後であったら、.finというクラスを付与するようにしています。

DEMO

今日よりも過去の情報は打ち消し線や文字色がついているはずです。

こんな感じで、dataオブジェクトを利用すると、簡単なスケジュール管理アプリみたいなものも作れそうです。通常のwebサイトでは実用性はあまりありませんが、こういった事も知っておくといざという時に重宝するかもしれませんね。

2012/07/15 22:33

かなりマニアックなネタですが、以前このブログで書いた外部サイトのRSSを自サイトへ読み込む方法ですが、ちょっとはまった部分もあり、再考してみました。

問題点1

コードが煩雑であまり構造化されていない。

$("#feed").append("<li><a href='"+entry.link +"'>" + entry.title + "</a><br />" + date.publishedDate +"</li>");

こんな感じで、RSSを解析したものをjqueryのappend()を利用して表示していますので、どうしても構造が見えにくいです。

問題点2

RSS情報の反映がgoolgeに依存している。 クロスドメイン対策としてgoogle feed apiを利用しています。(正確にはjGfeed.js) これで外部のRSSを読み込めるのですが、自サイトへの反映がgoogleのサーバーのリフレッシュに依存してしまうので、自サイトとRSSの配信元との時差が1時間程生じてしまう場合があります。

問題点1の解決策

jQueryで生成物を構造化して可読性を高めてくれるライブラリはいくつかありますが、今回はHandlebars.jsというライブラリを使ってみます。 こういったライブラリを使うと、RSSを解析した後の生成部分をhtmlのタグに近い形で定義できるので、コードの可読性が格段に増しますし、複数のRSSを読み込むような場合も、生成部分をテンプレートとして利用できるというメリットもあります。

簡単に説明すると、 事前にテンプレートとしてhtmlと【タグ】で構造を定義しておき、その【タグ】の部分にxmlなどを解析したデータを代入してあげるという感じです。

【テンプレート部分】
     <script id="template" type="text/x-handlebars-template">
          {{#each this}}
          <li>
               <a href="{{link}}">{{title}}</a><br />
               {{postDate}}
          </li>
          {{/each}}
     </script>

問題点2の解決策

結構はまりました(^^; よく調べると、読み込ませるRSSのURLに細工をするとうまくgoogleさんを騙せる様です(!) つまり、本来

http://yourdmain/rss.xml

というURLだとして、そのままだと、googleのリフレッシュタイムに依存してしまいます。 そこで

http://yourdmain/rss.xml?hogehoge

という形で?hogehogeという架空のURLを指定します。このhogehogeの部分を読み込み毎にかえてあげれば、googleはその都度違うURLと認識して最新の情報を読み込んでくれるという訳です。 具体的には、

'http://www.matsuaz.com/4_1/rss.xml'+'?'+(new Date()).getTime()

こんな感じで時間を文字列として代入してあげるのが一般的のようですね。

最終的なコードはこんな感じです。

【java script】
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

     <script id="template" type="text/x-handlebars-template">
          {{#each this}}
          <li>
               <a href="{{link}}">{{title}}</a><br />
               {{postDate}}
          </li>
          {{/each}}
     </script>
</ul>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>


<script type="text/javascript" src="js/jquery.jgfeed.js"></script>
<script type="text/javascript">

$.jGFeed('http://www.matsuaz.com/4_1/rss.xml'+'?'+(new Date()).getTime(),
function(feeds){
  if(!feeds){
    return false;
  }
  for(var i=0; i<feeds.entries.length; i++){
    var entry = feeds.entries[i];
    var date = new Date(entry.publishedDate);
          var pday =date.getDate();//日
          var pmonth = date.getMonth() + 1;//月
          var pyear = date.getFullYear();//年
          var fullDate = pyear + "/" +pmonth + "/" + pday;
         
          var feedsItem = [{
               title:entry.title,
               link:entry.link,
               postDate: fullDate,
          }];
 
          template = Handlebars.compile( $('#template').html() );
          $('#feed').append( template(feedsItem) );
  }
}, 10);


</script>

【HTML】
<ul id="feed"></ul>

DEMO

以前のものに比べると・・・
多少スマートになったかな?
複雑なコードを生成する場合は、格段に扱いやすくなると思います。

更なる問題点

この方法だとやはり、google feed APIに依存している点が問題です。 リフレッシュに関しては解決できましたが、そもそもRSSとして吐き出している情報全てをこれで解析はできません。例えば、RSSの情報をカスタマイズして、その情報を外部サイトでも扱いたい時など。そうゆう場合は、RSSの解析自体を別の方法(サーバー側の処理など)で行なう必要があります。

まっ、気軽にブログを自サイトに反映させたいくらいの時には、java scriptだけでできるという点で多少使い道はあるかな?という感じですね。 (僕的には、割と十分だったりします)

ブログなどのRSSに限るとどうしても使い道が限られてしまいますが、Handlebars.jsなどのjava scriptを使ったテンプレートエンジンは結構使い道があると思いますのでしっかりマスターしたいですね!

2012/05/11 21:36



CodeGridという、株式会社ピクセルグリッドさんのスタッフの方が週一で公開している有料メルマガ&chromeアプリがとても面白いのでご紹介します。
株式会社ピクセルグリッドさんと言えば、web業界ではかなり有名が会社です。
java scriptやhtml5、css3を多用した先進的な案件を多く手がけていて、セミナーや執筆活動も盛んにされています。

そんなピクセルグリッドさんの現場の情報を提供してもらえるのがこのCodeGridです。
月840円の有料となりますが、毎週メルマガ(かなりのボリュームです!)とchromeアプリという形式で、色々なテクニックや実務のなかでハマったことなどが読めるサービスです。

内容としては、今のところ、css3のanimationやスマホサイトの作り方など、知っておきたいけど、なかなか今のところ実務に直結しないので勉強していないな(僕的に)というラインなので、結構ドンピシャで面白く読ませてもらっています。

何かを調べたり、勉強するのは、本来強い意志や目的がないとできないことだと思います。
(言い訳ですが、)日々忙しくて、なかなか手が回らないことも多いと思います。そうゆう時に、定期的にメルマガとして、情報を提供してもらえるのはとてもありがたいですし、メルマガの文章だけでなく、chromeアプリという形で、実際に挙動を確認できるというのが、またいいですね。

以前紹介したドットインストールもそうですが、オンラインで安価で学べるというのは、これから主流になっていくかもしれません。

ちなみに、料金の支払はpaypal経由で行います。解約する際もpaypalで支払いを止めるだけという気軽さ。
それにしてもpaypalで自動引き落としっていいですね。ソフトバンクさんお陰で日本でも浸透しそうだし、色々な所に応用できそう。その辺も勉強してみようかしら。

2012/04/13 22:03

久しぶりにjQueryネタです。
ちょっと表現したいスライドショー的なものがありまして、既存のプラグインとかでもありそうだったんですが、自分で作ってみました。

どんなものかというと、こんな感じのです。
某サッカークラブのトップページみたいなのですね。

右側のボタンをクリックするとメインの画像が差し替わるというものです。
【やりたかったこと】
大画像とボタンは、別のもの
大画像にはリンクを貼りたい
というオレオレ仕様です。

で、作ってみたのがこれ。

DEMO

お粗末なロジックで、恥ずかしいのですが・・・

HTML

<div id="slideArea">
<ul class="slideItem">
<li id="item1"><img src="images/01.jpg" /></li><!-- 
--><li id="item2"><img src="images/02.jpg" /></li><!-- 
--><li id="item3"><img src="images/03.jpg" /></li><!-- 
--><li id="item4"><img src="images/04.jpg" /></li><!-- 
--><li id="item5"><img src="images/05.jpg" /></li>
</ul>
<!-- #slideArea END --></div>

<div id="navi">
<ul id="slideNavi">
<li><a href="#item1"><img src="images/btn01.jpg" /></a></li><!--
--><li><a href="#item2"><img src="images/btn02.jpg" /></a></li><!--
--><li><a href="#item3"><img src="images/btn03.jpg" /></a></li><!--
--><li><a href="#item4"><img src="images/btn04.jpg" /></a></li><!--
--><li><a href="#item5"><img src="images/btn05.jpg" /></a></li>
</ul>
<!-- #slideNavi END --></div>

ナビゲーションと大画像の表示エリアに分かれています。どちらもクラス名、ID名は任意で構いません。
(プラグイン起動時に指定が可能です。)
最低限のルールとして、ナビゲーションに#のリンクを指定して、対応する画像を表示するブロックに同名のIDを指定します。

CSS

ul.slideItem {
     width: 500px;
     height: 375px;
     overflow: hidden;
}
ul.slideItem li {
     position: absolute;
}

CSSは基本自由でいいんですが、画像を表示するブロックだけ、上記のような指定をしてください。
position: absolute;で画像ブロックを重ねておいて、親ブロックにoverflow:hiddenで読み込み時に全画像が表示されてしまうのを防止します。

あとは、プラグインを読み込んで、

$(function() {
     jQuery('#slideNavi li').myOreOreSlide({
               slideItem: '.slideItem li',
               slideSpeed: 500,
     });
});

こんな感じで、ナビゲーションに対して、プラグインを適用されて、必要に応じてオプションを指定します。

オプション
slideItem:メイン画像表示エリアの指定
slideSpeed:画像のフェード時間の指定

ポイントというか、心がけたことは、HTML側のみで基本構造を生成して、jQueryはあくまで動きだけにすることです。
汎用的に使えるかどうかは別として、僕自身はHTML>jQueryなので、HTMLのみで、画像の関連付けができている方が、可読性というか初期段階でのコーディングがしやすいかな?と思ったわけです。

動きの処理などは、かなりイマイチですので、実用レベルではないのですね。
まー、勉強の一環として、はい。

2012/02/09 21:23


【ぼやき】
こないだ、外国人の方にブログの使い方を教えるというなんとも無謀な場面に遭遇しました。
英語なんて、学生時代に貧乏旅行した時以来ほぼ使ってないので、説明は基本日本語という・・・情けない。
ただ、片言の日本語は理解してもらえる人だったし、かなり理解力がある方でしかも、かなりざっくりとした通訳の方もいたので、なんとかなりましたが・・・
というわけで、この年になって改めて語学力の必要性を感じている塩原です。

かなり強引な前フリですが、今日は以前IDEA*IDEAで田口さんが紹介していた英語でjqueryを学べるサイトをこちらでもシェアします。

30 Days to Learn jQuery

これに登録すると、1日1通jqueryのビデオレッスンがメールで届くというサービスです。
決して、英語の勉強という訳ではありません。
jqueryの勉強を英語でできるというだけです。

試してみましたが、初回の内容は(jquery的に)簡単だったということもあり、なんとなく言ってることがわかるかな?という感じでした。

実際に英語の勉強になるかというと、分かりませんが、スピードラーニング的に英語に馴染めるんじゃないかと。

普段からjqueryを触っている人であれば、英語と画面で理解はできると思いますので、興味がある方は、ためしてみてください。

2011/12/21 23:47

かなりマニアックなコトですが、個人的にはよく使うので備忘録として・・・

CMSでwebサイトを作っていると、「お知らせ」のような複数の記事を集約する場面があります。CMSによっては、複数のブログ(カテゴリー)から集約して、それぞれの要素に固有のIDなりクラスを付与することも可能ですが、場合によってはそれが難しい時もあります。

複数の外部ブログのフィードを集約したりとか・・・

例えば、動的に下記のような要素を吐き出されたとします。

<div class="item">
<a href="http://hogehoge.com/id01/1234.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id01/1254.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id02/1254.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id01/1264.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id02/1854.html">
ここにコンテンツが入る。
</a>
</div>

<div class="item">にそれぞれのid01とかid02というページ固有のクラスを付与したいけど、システム上は無理ですって時に、jqueryというかjava scriptを使って処理をする方法があります。

$('.item').each(function() {
     var url=$(this).find('a').attr('href');
     var blogid = url.substring(20);
     blogid = blogid.substring(0, blogid.indexOf("/"));
     $(this).addClass(blogid);          
});

こんな感じです。

中身は至ってシンプルで、

$('.item').each(function() {

});

で、.itemを探して繰り返し処理を行い

var url=$(this).find('a').attr('href');

で、.item直下のaタグのhref要素を取り出して、

var blogid = url.substring(29);
blogid = blogid.substring(0, blogid.indexOf("/"));
$(this).addClass(blogid);  

で、不要な文字列を削除して、 クラスとして付与するといった感じです。

かなりマニアックですが、jqueryを使えばこうゆうニッチな要求にも簡単に答えることができ、 制作者としては表現の幅が広がるので良いかと思います。

まるで、jqueryってまるで緩衝材みたいですね。

2011/12/02 23:28

ソーシャルメディアのシェアボタンは、もはやwebサイトの必須項目になりつつあります。twitterのツイートボタンとか、facebookのいいねボタンとかこれって、実は実装するのって結構めんどくさいし、オフィシャルで公開しているAPIを使うと、デザインというか表示スペースを考えて元サイトのデザインを検討しなければいけないというちょっと残念な感じであったりします。

で、今日紹介するのが、sharrre
これは、jQueryのプラグインで、そういったソーシャルメディアのボタンを組み込む時に自由なデザイン、レイアウトで実装が可能になります。

デザインの変更までは調べていませんが、ソーシャルボタンの実装は比較的簡単に可能です。

使い方

まず、jQueryを読み込みます。サンプルでは、1.7を読みこんでいます。
同時に、ライブラリも読み込みます。

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="js/jquery.sharrre-1.0.0.js"></script>

次に、sharrreの設定を記述します。
基本的には元サイトのデモの通りで良いかと思いますが、

js

  $(function(){
    $('#share').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true
      },
      title: 'share',
      url: 'http://meusonho41.com/demo/2011/12/02/index.html',
      text: 'Sharrreのデモです。よかったらシェアしてね',
      buttons: {
        googlePlus: {size: 'tall'},
        facebook: {layout: 'box_count'},
        twitter: {count: 'vertical'}
      },
      hover: function(element, options){
        $(element).find('.buttons').show();     
      },
      hide: function(element, options){
        $(element).find('.buttons').hide();
      }
    });
  });

shareの部分で、シェアしたいソーシャルメディアを指定します。

urlの部分にシェアしたいURLを記述します。
CMSの場合、ここは動的にパーマリンクが入るようになればいいですね。

cssはデフォルトのまま使えばよいかと思います。
あとは、このシェアボタンを置く場所に

<div id="share"></div>

と記述して完了です。

wordpressとかですと、シェアボタンを入れてくれるプラグインなんかもありますが、それ以外の場合、いちいちサービス毎に記述しなければらなかったので、こういった形で一元登録できると便利ですね。あと、cssやjsといった馴染みの深い言語で対応できるのがいいですね。

実際に試してみると、デモサイトから各メディアへのシェアはすぐにできました。
逆にデモサイトへの反映は若干タイムラグがあるようですね。(5分くらい)

DEMO

実際に既存のサイトには組み込んでないので、少し調査した方がいいかもしれませんが、機会があれば使ってみたいと思います。

2011/11/29 21:11

昨日の記事でも少し触れましたが、面白いサービスがローンチされたのでご紹介します。

.インストール


100shikiの田口さんがスタートさせたサービスで、
3分の動画をみながら、プログラミングを学べるというものです。
java scriptやcssといったweb制作必須の言語からphpやmySQLなどのwebアプリ開発に必要な部分まで
現段階で、300タイトルの動画がアップされているとのことです。

すごい・・・

しかも無料で

現在はベータテスト中なので、招待がないと入れませんが、トップページに招待希望のメールフォームが設置されているので、気になる方はそちらからどうぞ。