Google Readerがサービス終了につき乗り換え先を全力で捜索中

GoogleReaderが2013/7/1で廃止するとアナウンスされました。
理由は利用者の減少らしいですが、愛用していたユーザーが難民化して右往左往しているようで、私もその一人です。
この衝撃はdeliciousショックを思い出すけれども、使用頻度がdeliciousの非じゃないからとても困ってます。
さっそくGoogleReaderからの乗り換え先を探し始めたので、
ここにそのレポートを乗せておくことにします。

※難民のアクセス殺到でか落ちてるor不安定になっているサービスが多いです
“Google Readerがサービス終了につき乗り換え先を全力で捜索中” の続きを読む

[Facebook等] Open Graph Protocol 対応の件

3年ぶりぐらいに(商用の)PCサイトをコーディングしたんです。

そこでフェースブックのいいね!ボタンを設置したのはいいが、
押した時に投稿されるサムネイルはなぜかロゴ画像ではなくナビゲーションで使われている画像が使用されてしまった…。
これはあかんと思ってあれこれ模索したときのメモ。
“[Facebook等] Open Graph Protocol 対応の件” の続きを読む

External Tools(外部ツール)の設定項目メモ

     *      *
  あけ *    おめ +  
  こと n ∧_∧ n よろ
 + (ヨ(* ´∀`)E)
      Y     Y    *

External ToolsはEclipse,Aptana,PhpStorm,WebStromなどのIDEにある機能です。
わかりづらい所にひっそりとあるけど地味に便利なやつ。

コマンドのショートカットとして登録するときの設定についてざっとまとめた。

“External Tools(外部ツール)の設定項目メモ” の続きを読む

[JS] Google Visualization API がなかなか便利な件

Google Spreadsheetを愛用していて、ゲームの攻略データなんかを纏めていると「この中身をそのままサイトにできないものか…」と思ってたんだけど、
普通のエクスポートでCSV形式だとドメインの呪縛を受けてしまってJSだけでは難しい。
そこで適当に検索してたら結構前からあるらしいGoogle Visualization APIが使えると知って飛びついてみたら、
なかなか便利な感じだったので簡単なサンプルを書いてみた。

悪魔図鑑 (Google Visualization API + backbone.js test) – jsdo.it – share JavaScript, HTML5 and CSS

“[JS] Google Visualization API がなかなか便利な件” の続きを読む

[Sass] Compass CSS3-animations snipets & mixin

CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。


@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ

transformを参考にまとめたmixin


//再生時間
$default-animation-duration       : 0.5s !default;     

//実行までの待ち時間
$default-animation-delay          : 0    !default;

//実行回数(number | infinite)
$default-animation-iteration-count: 1    !default;

//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;

//反復の有無(normal | alternate)
$default-animation-direction: normal     !default;

//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
$default-animation-fill-mode: both       !default;

@mixin animation (
  $name     :false, 
  $duration :$default-animation-duration,
  $delay    :$default-animation-delay,
  $count    :$default-animation-count,
  $function :$default-animation-timing-function,
  $direction:$default-animation-direction,
  $fillMode :$default-animation-fill-mode
){
    @if $name {
       @include experimental(animation-name,            $name);
    }
    @include experimental(animation-duration,        $duration);
    @include experimental(animation-delay,           $delay);
    @include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
    @include experimental(animation-timing-function, $function);
    @include experimental(animation-direction,       $direction); //反復の有無(normal | alternate)
    @include experimental(animation-fill-mode,       $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
}

“[Sass] Compass CSS3-animations snipets & mixin” の続きを読む

Web草子

春はHTML
やうやう5になりゆく仕様は少し明かりて
老いたるブラウザの細くたなびきたる

夏はJavaScript
フレームワークはさらなり
メタ言語もなほ。Coffeeの議論飛び違ひたる
また、ただ是か否かなどブログに打ち明けていくもをかし
ゲームなど書くもをかし

秋はCSS
Level3の増して、Flashいと近うなりたるに
Adobeの開発終わるとて、Swiffy、Walabyなど変換急ぐさへあはれなり
まいて画像の連ねたるがいと3Dに見ゆるはいとをかし
プレフィックス入り乱れて、Sass、Lessなどはたいふべきにあらず

冬はNode
Web Socketはいふべきにもあらず
PCのブラウザも、またスマホでも、いとリアルタイムに
レスポンスなど急ぎ返してアプリ作るも、いとつきづきし
バージョン上がりて、対応増えていけば
Android 4.0も未対応になりてわろし

参考:枕草子

[MooTools, HTML5] ToDoアプリを萌え化してみた

Web Creatros Contest “Q” っていうのがjsdo.itでやってます。
商品がApple製品だったのでまた釣られてしましました(ノω^)

お題を呼んでわが身をふりかえってみると……
仕事のToDoは会社が用意してくれるポストイットに書き、
プログラムに係わることは//TODO で書いている。
プライベートでは使う事がないから……
ほとんどToDoアプリをつかったことがなかった!

……ならToDo管理以外にも使えるものだったら
私みたいな「ToDoアプリ?なにそれおいしい?」ユーザーも振り向いてくれるかもしれない。
などと考えていたら神様がそっと囁いた。

 ノノノノノ
( ○○) < 身近にイイ人材がおるじゃないか…ほれ、脳内に
  (||||)

なるほど!脳内にいる住人とかタルパとか妄想とか俺の嫁とかに覚えてもらえばいいのか!
具現化するに合う素材を探してみたら素敵な立ち絵素材と巡り会えたので
ニュートリノの速さでレジ直行した勢いのまま作ったのがこれです。

todoll-start

プロジェクト名 はtoDoll
販売中の素材集が男女よりどりみどりだったので
あとでバージョン増やせるようにカスタムできる構造にしました。

“[MooTools, HTML5] ToDoアプリを萌え化してみた” の続きを読む

[js] スマートフォンのAjax フォーム送信時にキーボードを消す

Goボタンを押した時のイベントはsubmit もしくは event.keyCode のcode=13 で取れますが
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、
onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。

ボタンがあるならボタンにフォーカス移すのが手っ取り早い。

[js,css] テンキーがついているスマートフォンの罠

Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。

スマホといえばiPhoneがその美しいデザインでこれぞスマホ!という概念を決定的に印象づけた
3〜4インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか?

007sh

狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはaudocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。

幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。

“[js,css] テンキーがついているスマートフォンの罠” の続きを読む