もっく日記

書いておぼえるためのブログ

ListingAPIをさわってみた

リクルートが公開してるListing APIをさわってみたので、より理解を深めるためにメモ。 参考サイト Listing API|PRODUCT|A3RT リクルートがAIをまさかの無料公開。さっそくすべてのAPIを試しまくってみた - BITA デジマラボ ListingAPIとは ユーザーの購入…

Googleタグマネージャーの読了率計測でタブのフォーカスもチェックする

「できる逆引き Googleアナリティクス」を読みながらGoogleタグマネージャの読了率を設定した時に、ブラウザのタブのフォーカス状態もチェックしたものが欲しかったのでその時のメモ。 仕組み ページ下部までスクロールしたかフラグと、タブにフォーカスが当…

slick.jsを使ったスライド画像をランダム表示する

参考サイト https://github.com/kenwheeler/slick/issues/359 ソース サンプル HTML <div class="slideshow"> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> <div class="slide"></div></div>

gulp-iconfontでハマったこと

Cannot read property 'toString' of undefinedとエラーが出る 原因 template.cssのglyph.codepointが取れていなかったのが原因でした。 解決方法 gulp-iconfontのドキュメントをちゃんと読んでみたら、 template.cssのこの部分を↓ glyph.codepoint.toString…

ブラウザの印刷プレビューでハマったことメモ

全ブラウザで白紙の2ページ目が印刷される。表示は1ページに収まってるのに。 原因 htmlとbodyにheight:100%;をかけていたのが原因でした。 解決方法 印刷時はheight:auto;にするようにしたら解決しました。 @media print{ html,body{ height: auto; } } <body>にo</body>…

IE10でYoutubeAPIの動画を設定できない

display:none;で非表示にしてる要素に、YoutubeAPIで動画を設定しようとしたらIE10で表示も操作もできない不具合がありました。 display:none;にしてない要素に動画を設定するようにしたら解決しました。 調べてみたらIE10ではdisplay:none;にした要素の機能…

Android4.4.2で動画が再生できない不具合

transform: translateX(-50%) translateY(-50%);を使って天地左右中央に配置した要素の中にYoutubeを入れたら、Android4.4.2で再生できない(選択できない)不具合が発生しました。 あてていたスタイルはこういう感じです。 .md-modal { position: fixed; to…

CSSアニメーションを使ってみた気づき

codropsからサンプルさがし codrops とにかくステキなサンプルがたくさん紹介されています。 どのサンプルにも、「デモ」「ソース」とその使い方が書いてあって便利です。 display:none;をかけてる要素にはtransitionがきかない display:none;で表示非表示を…

Animate.cssをつかってみた

「Animate.css」というcssアニメーションライブラリがとっても便利だったのでメモです。 サンプル ざっくりいうと、動きをつけたいものにクラスを指定するだけで、カンタンにCSSアニメーションをつけることができます。 使い方 1. Animate.cssの「Download A…

browsernizrつかってみた

browserifyつかってるとmodernizrが使えないらしく、かわりにbrowsernizrというのがあったので使ってみたときのメモです。 browsernizrの公式サイトはこちら 1 npm install ターミナルで npm install browsernizr 2 読み込み JSファイルに読み込みを追記 imp…

ParsleyJSつかってみた

フォームバリデーションライブラリのParsleyJSをつかってみたのでメモ 使い方 入力必須エラーをだす方法です。 1 npm install npm install parsleyjs 2 フォームのHTMLを用意 必須項目にrequired=""をつける <form id="demo-form"> <label for="fullname">Full Name * :</label> <input type="text" name="fullname" required="" class="form-control"> </form>

AngularJS2:5 MIN QUICKSTARTをやってみる

AngularJS2の勉強用に「5 MIN QUICKSTART」をやってみたのでその時のメモ 「AngularJS2:5 MIN QUICKSTART」 https://angular.io/docs/ts/latest/quickstart.html ファイル構成 最終的にはこのようなファイル構成になります angular2-quickstart ├── app │ ├…

importとrequireどちらを使おう…。

node.jsをよく知らなかったもので、 babelでes2015をビルドしてるとimportもrequireも使えて、何が違うのやら?となったのでメモ。 結論 requireは「node.js」の書き方で、importは「es2015」から使えるようになった書き方ということみたいです。 せっかくな…

Github Pageの使い方

Githubのリポジトリにアップしたファイルを、そのままWebページとして公開できる機能。 つくりかたを忘れないうちにメモ。 手順 すでにリポジトリがある場合 リポジトリの管理ページhttps://github.com/ から、gh-pagesブランチをつくって、gh-pagesブランチ…

1つのjadeから他言語ファイルをgulpビルドする方法

※(2016/10/6修正)npmモジュールの情報が不足していたので修正しました。またjadeをpugに、gulpの設定もbabelを使うように変更しました。 ↓こちらのサイトを参考にしました。 参考 静的な多言語Webサイトを1ソースから作る方法 - deepblue-will’s diary ポ…

Babelのes2015:メモ

書かないと覚えないのでとにかくメモしていきます。 varとletとconst var:変数。同スコープ中での再宣言も値の代入もできる。 var i = 0; //OK var i = 1; //OK i = 2; //OK let:同スコープ中で再宣言はできない。値の代入はできる。 let i = 0; //OK let i …

ejsでHTMLを量産したときのおさらい

レイアウトが同じで「タイトル」と「メイン画像」が違うHTMLを量産するために使いました。 あまり理解できてないので、理解を深めるためにまとめようと思います。 ながれ ページ生成用JSONファイル(pages.json)をつくる テンプレート用EJSファイル(templa…