タグ

2014年12月13日のブックマーク (3件)

  • #13 フロントエンド制作に華を! 面白いWebAPI 7選 - KAYAC engineers' blog

    こんにちは。 カヤックに新卒で入社し、フロントエンドエンジニアとして スロット制作を中心とした活動を続けている田島です。 どうぞお手柔らかによろしくお願いします。 さてさて、Webのフロントエンドエンジニアの場合、 何か作りたいアイデアを思いついてから世に公開するまでのスピードが コピーライターに次いで早いです。 また、リッチなコンテンツや大量のコンテンツを扱って何かしようというときには WebAPIをうまく活用すれば、自前でデータベースを作らずとも ササッと作って公開することもできます。 今回は、そうしたフロントエンド制作を豊かにするWebAPIの中から特に 面白いと思うものを7つ選び、実例を交えて紹介していきたいと思います。 1. MediaWiki API http://ja.wikipedia.org/w/api.php Wikipediaの情報を取得できるAPIです。 このAPI

    #13 フロントエンド制作に華を! 面白いWebAPI 7選 - KAYAC engineers' blog
  • ペットボトルをBEMで表現する #CSSArchitecture

    CSS Architecture Advent Calendar 2014 11日目の記事です。 日をまたぎましたが書きます。 ペットボトルをBEMで表現したいと思います。 普段からモノをみてどういう構造で分解できるか考えるのは大事です。 なぜペットボトルか。それは目の前にペットボトルがあったからです。 とりあえず、ミネラルウォーターが入ったペットボトルをBEMで表現するとして。 以下のようにしてみました。異論は認めます。 クリスタル水 ペットボトルと、中にある水は別々のブロックとしました。 ただの水ではないので、 water–type-mineral というモディファイアをつけました。 そして、飲みきった場合を表現するには、以下のようにします。 水がないので要素ごと削除です。 クリスタル水 空になったペットボトルを捨てる場合は、キャップトラベルを剥がして、潰してから捨てましょう。 今回の

    ペットボトルをBEMで表現する #CSSArchitecture
  • jQuery animateのstep関数を便利に使う | _level0 - KAYAC Front Engineer Blog

    こんにちは。HTMLファイ部の岩淵です。 はじめに 皆さん、jQueryのanimateメソッドを使おうとしたときに、「ちょっとこれはanimateできないなぁ...」と困ったことはありませんか? 例えば、Google Maps APIの setPosition(new google.maps.LatLng(lat, lng)) みたいな、変数をセットする関数を実行しなければいけないとき。 例えば、CSS3の transform: translate(50px, 20px); のように、transformの値を変化させるとき。 そんなときはjQueryのanimateを使わずにsetIntervalを使ったりして代用するところですが、 終了判定をしてclearIntervalを叩くのは面倒ですし、 animateを使うことによりcompleteで終了時の関数を実行したりイージングを付けられ

    jQuery animateのstep関数を便利に使う | _level0 - KAYAC Front Engineer Blog