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/06/07 22:10

今更なのですが、この感動を誰かに伝えたいので・・・ Zen-Codingという、htmlやcssを書く際のショーカットプログラムのようなものがあります。
存在自体は、ずっと前から知っていたのですが、cssに関しては、エディタの入力補完で問題ないし、 htmlに関しても、どちらかというとCMSで構築することのほうが多いので、そこまでガツガツ書くこともなかったので、スルーしてきました。

僕自身の制作環境自体は、以前と変わらないのですが、ちょっと興味本位で試してみたところ・・・

なんじゃこれ!

すごいではありませんが。どうして、もっと早く導入しなかったんだオレ。

と、感想をつらつら書いても全然伝わらないと思うので、実際にやってみましょう。

例えば

<table class="hoge">
<tr>
     <th></th>
     <td></td>
</tr>
</table>

こんなようなコードを書かなければならない時、 普通に書くと・・・(実際にはコピペとかするんでもっと早いですけど)

Zen-Codingをすると・・・

table.hoge>tr>th.thTitle+td
とたった一行で書けてしまいます。

すごい。
構文も、<>を取ったタグと、.や#といったcss的な表現なので普段からcssに馴染んでいる方は覚えやすいですよね。
cssにしても、今日半日くらい試してみましたが、エディタのコードヒントよりも早く書けそうです。

例えば、
marign-bottom:mb+実行キー
border:bd+実行キーみたいな感じです。

コーディングが4倍早くなるなんて、キャッチコピーがついていますが、それも納得です。
というか、一度使い始めてしまうと、いちいち<div class="hoge">みたいに書くのがめんどくさくなってしまいました。

よし、しっかり覚えて、効率アップさせよう!

2012/02/05 0:49

情報共有としてエントリーします。

WEB制作者にとってIEは天敵十分考慮しなければいけないものなのです。
ボクも気にはしながら作っているつもりだったんですが、思わぬ落とし穴があったので、ご報告します。

【症状】


WIN XP とIE8の組み合わせ
WIN VISTAとIE8の組み合わせ
の時にページを表示するとクラッシュする。

【原因】


jquery1.6.2を使用している。
bodyにbackgroundで画像を指定している。
※複数あると思いますが、今回遭遇した場合のはなしです。

jquery jQuery BUG TRACKER

ってか、bodyにbackgroundで画像って、普通誰でもやるじゃん(激怒)

対処方法としては、jqueryのバージョンを上げるか下げるか・・・

上記の場合でもかならずクラッシュするわけではないのですが、メモリを食うような表現を多用しているとかなりの確率で発生します。
調べてみると、IE8は結構不具合が多いようですね。
とくにwin7以外のOSとの相性はあまりよくないようで、クラッシュなどの報告が多数あがっています。

毎日.jp IE8で毎日jpを閲覧した際の不具合について

制作側として、できるだけ多くの環境できちんと表示させないといけないのは当たり前なのですが、
ブラウザとOSの組み合わせになってしまうと、検証しきれないのも現実であったりします。線引きが大変難しいところです。

都会の制作会社さんでは、事前に対応ブラウザを指定している案件もあると聞きます。強制的な線引きがどこまで必要か分かりませんが、少し「今風」な表現をするようなサイトでは、ある程度の切り捨ても必要なのかなと思います。
というのは、製作者の都合なのかもしれませんけど・・・

いや、それよりも某社さんがきちんとバグを直してくれればそれでいいんです。そうなんです。ってか、複数のバージョンが存在するようにしていることに問題があると思うけど。。

それにしてもこのバグの存在を見つけてくれた方に本当に感謝です。はい。

2011/10/17 23:58

えっと、iphoneの話ではありません。


ご存知の方も多いかもしれませんが、googleが提供しているサイトの表示スピードチェッカーが大変使えるのでご紹介します。

Page Speed Online
同じもののクロームプラグインもありますね。

SEOという言葉は、今だに残っていてちょっと古臭い感じもしますが、それでもやはり検索結果というものは大変重要な要素であります。
googleの発表では、「サイトの表示スピード」も上位表示の大きなファクターになるということですので、制作者としては、その辺も考慮して制作していかなければなりません。

そこで、このPage Speed Onlineです。

これは、調べたいサイトのURLを入力するだけで、サイトを解析してくれて、どこを改善すればよいか教えてくれます。
試しにやってみましょう。
あえて、どのサイトを調べたかは伏せさせて頂きますが・・・
こんな結果がでました。


ちなみにこのサイトはご存知の通りリニューアルしてから3年くらい経っているものです。あまり高速化ということを意識していなかったのでちょっと残念な結果です。

一応言い訳をすると、別の最近コーディングしたサイトを調べてみるとだいたいスコアは80以上はキープしているので・・・はい。
これを見るからに、やはりcssスプライトなどサーバーリクエストを減らす手法は必須なのかと。
デフォルトのCSSセットも見なおしたほうがいかもなぁ・・・

2011/07/14 0:56

この前参加したswapskillsで、yahoo!の中の方が、yahoo!のモバイルページのトランジッションはcss3を使って実装しているというお話を聞いたので、見よう見まねでサンプルを作ってみましたよ。というお話です。 ・・・はい。さっそくdemoを。

DEMO

IEでは動かないと思いますので、chromeとかfirefoxとかでご覧ください。

細かいところまで作り込んでいないので、やはりjquery mobileと比べると若干見劣りしますが、このサンプル実は画像やjava scriptを一切使っておりません。
css3だけでここまでの表現ができるというのは素晴らしいですね。

では、簡単に解説を。

ボタン

ボタン部分は、aタグをブロック化して、背景色をグラデーションで表現し、角丸にしています。
あと、テキストに影もつけました。

     display:block;
     border: #d9d9d9 1px solid;
     background: -moz-linear-gradient(top, #242426, #5b5b60);
     background: -webkit-gradient(linear, center top, center bottom, from(#242426), to(#5b5b60));
     color:#fff;
     text-shadow: 1px 1px 3px #000;
     border-radius: 13px;
     -webkit-border-radius: 13px;
     -moz-border-radius: 13px;

ページ遷移

html側で、

<div id="i1" class="page">

</div>

というブロックが、1ページとなります。
今回は3ページ分用意しましたので、それぞれを横に並ぶようにして表示されていない部分はウインドウの外にくるようにしてあります。

ページ遷移は、transitionでアニメーションの所要時間をしていして、translateXで移動させています。

/* アニメーション */
.page { 
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
}
 
/* ページ遷移 */
#a1:target .page { 
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
}
#a2:target .page {
	-webkit-transform: translateX(-200%);
	-moz-transform: translateX(-200%);
	-o-transform: translateX(-200%);
}
#a3:target .page {
	-webkit-transform: translateX(-300%);
	-moz-transform: translateX(-300%);
	-o-transform: translateX(-300%);
}

で、:targetという擬似クラスでハッシュが変わった時に、該当するページが表示されるようにページが動くという仕組みになってます。

jquery mobileと比べると、動きは滑らかじゃないかと思います。
ただ、jquery mobileのように別ページでのページ遷移などはできませんし、UIも自分で作らないといけないのでちょっとめんどくさいですね。

まだまだ、検証が足りませんが、ライブラリに依存しないというのは魅力的かもしれません。

via:Pure CSS Slideshow