準備するもの Instagramのアカウント Instagram APIの登録 アクセストークンの取得 jQuery 参考サイト InstagramのAPIを使用して自分の投稿した写真をWEBサイトに出力する instagram api 事始め access_tokenを取得する - Qiita Instagram APIを取得してWeb…

TweenMaxを使ってオープニングアニメーションをつくる。 日本でもTweenMax（トゥイーンライブラリ）を使用しているリッチサイトが大分増えてきた気がますねー。 大体、動きがかっくいいサイトのソースを覗くと「TweenMax」の文字が見受けられます！ 本記事は…

ページ公開直後のコンテンツに対してシェアボタンを押してもOGP情報をうまく取得できずシェアされない場合がありますよねー。 これは公開前のURLにfacebookのクローラがアクセスしてしまうことによって、facebook側にキャッシュが残ってしまいそちらを参照し…

最近、インタラクティブな実装に興味を持ち始めました。 覚え書きとして、canvasで画像を用いて回転させながら落ちるアニメーションの実装方法を記しておきます。 DEMO 補足 - 画像を複数個使用することを想定して、配列を用いています。 JavaScriptコード $…

JSHintで警告が出ていた。 the array literal notation [] is preferable 日本語訳 ：“配列リテラルの表記が好ましいっすね。” 配列の初期化宣言にリテラルを使った方がよいらしい。 x = new Array (); ↓ x = []; 以上、覚書でした。 リテラルとは、プログラ…

ここ最近よく使うなーと思うCSSプロパティの紹介。 Viewport units: vw, vh, vmin, vmax ビューポートの縦・横に対する割合の単位ですが、 めっちゃ使えるなぁーと思う今日この頃です。 記事紹介 coliss.com dev.classmethod.jp Can I use 状況 Can I use...…

特定のcookieの値をだけを取得したい場合。 var getCookieValue = function(key) { var val = document.cookie.match(new RegExp('(^|\\s)'+key+'=([^;]+)')); return !!val && unescape(val[2]); }; alert(getCookieValue("COOKIE名")); 参考URL blog.manat…

一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富…

某案件で［クイズに答えて正解数に応じてTwitterでシェアする内容を変更するもの］を実装しました。 ここでネイティブアプリ（iPhoneとかに入っているTwitterアプリ）でハマったので記録として記しておきます。 jQueryを使用した話になります。 attrメソッド…

最近、ほとんどjQueryを使用したアニメーションの実装をしなくなってきておりますが、 たまたまiOSで納品物をチェックしている際に見つけてしまった挙動について記したいと思います。 サイドからスライドするメニューの動きが不自然。 メニューボタンを押す…

世の中には先人が作った素晴らしいアドオンやブックマークレットがたくさんあります。私も様々なアドオンやブックマークレットをブラウザに入れ普段の業務に役立てております。 しかし、すべての作業についてそれらのアドオンやブックマークレットで賄えるわ…

※ こちらも合わせてご覧ください。2016/11/1更新 paradox-tm.hateblo.jp iOSのSafariのみブラウザの仕様上、Googleアナリティクス（以下、GA）を使用したイベント計測がうまくいかない事が多々あります。 特に計測がうまくいかない時のパターンが以下です。 …

Webサイトの運用をするにあたって、ディレクターから案件が入稿され制作者が納品物をつくるわけですが 運用コスト削減につながるように運用支援ツール（仮）を考えてみました。 JSのフレームワークは、AngularJSを使用してみました。 運用ツールのゴール デ…

（例）2016/02/04 → 2016年2月4日 にしたい場合。 /*日付置換*/ var date = '2016/02/04'; date = date.replace(/^(\d+)\/(\d+)\/(\d+)$/, function(){ var month,day; month = arguments[2]; day = arguments[3]; month = month ? month.replace(/^0/,'') :…

本日からHatena Blogに覚え書きをしていきたいと思います。 web業界の現場で働く者として、web全般の記事をまったり書けていけたらなぁーと考えております。 よろしくお願い致します。