Fly higher! Sky is the limit!

webの現場で働く人のブログ

【脱jQuery】YouTubeから取得したプレイリスト(JSON)をVue.jsで表示してみた。

「昔作ったサイトをVue.jsで書き換えています。」的な記事をチラホラみかけるので私も勉強がてらに実装してみました。 ※ 本記事では、YouTubeからプレイリスト(JSON)を取得するところの説明は省いております。 (ググれば優秀な記事がたくさん出てくるので…

フリック操作時のエラー(Firefox)

本日はフリック操作時のエラーについてです。 過去にも何度かうまくいかず原因を解明しては、忘れてしまっていた内容なので備忘録として残しておきます。 エラーになる記述 e.changedTouches[0].pageX event.changedTouches[0].pageX エラー内容 e.changedTo…

[ネタ?]コピペでOK!JavaScriptでなんちゃって認証をつくる。

htaccessを用意できないなんて時に気休めくらいに使って頂ければと思います。 「なんちゃってでもいいから、とりあえず認証かけておこう!!」みたいな時にオススメです。 今回使用するJavaScriptソース document.body.style.display = "none"; var inputTex…

【SVG】ホバーで円アニメーション

メモです。 IEは動きません。 See the Pen bqGdjy by paradox_tm (@takumaro-web) on CodePen. ソースはコードペンを参照ください。

JavaScriptで複数ワード検索 品質向上を目指す。

Webサイトを構築する上で必ずルールが存在します。 そのルールの1つが表記。 納品前の成果物に対して「表記揺れ」や「禁止ワード」を効率よく確認できないものかと思いJavaScriptで実装してみました。 イメージ的にはChromeの拡張機能 「goodbye “Zenkaku” -…

[jQuery不要][OAuth認証不要]自分のWebサイトにツイートを取得し表示する方法

Twitterから投稿を取得して自分のWebサイトに表示させるのにAccess Tokenを取得したりOAuth認証させたりで色々手間なんですがそんな手間を省いてくれるありがたいライブラリを発見したので紹介します。 自分のWebサイトにツイートを取得し表示させるTwitter-…

2016年を振り返って。

もう今年も残りわずかですが、いかがお過ごしでしょうか。 今年ラストの更新になります。 毎年、新しい年の始まりに「今年はやってやるぜ!!」と意気込んで色々目標を立てるのですが本記事はその振り返りになります。 ※ 実際に所属している組織とは関係あり…

【GA計測にも使える!】押された要素が何番目なのかを調べる方法。

押された要素が何番目か調べる方法は、いくつかありますが個人的によく使うものをご紹介します。 ※ jQueryを使用しています。 パターン1:リストで何番目を押されたかを調べる。 HTML <ul id="list"> <li>ああああああああ</li> <li>いいいいいいいい</li> <li>うううううううう</li> <li>ええええええええ</li> <li></li></ul>…

[GA][Googleアナリティクス]iPhone7(iOS 10)safariで クリックイベント計測がうまくいかない時の対処方法。

2016年9月13日にiOS 10が配信されました。 さっそくアップデートしましたが今までの仕様に慣れていたので起動時や目覚ましタイマーを止める際に、一度ホームボタンを押さないといけない新しい仕様が若干煩わしいです。 ※ ちなみに自分のiPhoneはiPhone 6です…

[JavaScript]日本語を数値に変換 / 日本語を数値に変換

JS

クイズの回答との照合やパスワードのチェックなどに使えるメソッド。 charCodeAt() メソッド 与えられたインデックスに位置する文字の Unicode コードポイントを10進数値で返す。 (例)"あいうえお"という文字列の場合、"あ" が charCodeAt(0)にあたる。 ⇒ …

[JQuery]たった9行でInstagram(インスタグラム)の写真一覧をWebサイトに表示する。

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

TweenMaxを使ってオープニングアニメーションをつくる。

JS

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

facebookのOGPキャッシュをボタン1つで消せるBookmarkletを作製しました。

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

【canvas】画像を回転させながら落とす

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

配列の宣言で警告。

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

最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン

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

【自分メモ】cookieの値を取得する。

特定の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…

[jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar

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

ネイティブアプリでシェアされない!? Twitterでシェアする内容を動的に変える時の注意点。

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

最近見つけたiOSのバグ(?) -JQuery アニメーション-

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

[jQuery]自作ブックマークレットで効率化!!~リードタイムの短縮~

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

[GA]iPhone、iPad等(iOS:Safari)でGoogleアナリティクスでクリックイベント計測がうまくいかない時の対処方法。

JS GA

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

[AngularJS]ノンコーダーやディレクター向け運用支援ツールの開発。

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

[JS]日付処理 × replace × 置換 × 後方置換

JS

(例)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全般の記事をまったり書けていけたらなぁーと考えております。 よろしくお願い致します。