以前YouTube Data APIで指定した動画の再生数の取得を試してみましたが、今回は再生リストに入っている動画の情報の取得を試してみます。 サンプルコード 再生リスト内の動画の取得はPlaylistItemsを使用します。 var apikey = 'APIキーをここに入れる'; var listid = '再生リストのIDをここに入れる'; var pagetoken = ''; var results = []; $(function(){ get_api_data(); }); // URLを生成する関数 function generate_api_url(token) { var url = 'https://www.googleapis.com/youtube/v3/playlistItems'; url += '?part=snippet'; url += '&maxRe

slickを使っていたら「Uncaught TypeError: Cannot read property ‘unslick’ of undefined」というエラーが出たので今回はその直し方を解説します。 unslickエラーが出る条件どうやらspもしくはpcのいずれかだけslickを発動させようとするとこのエラーが出るみたいです。とは言えエラーが出ない場合もあり、正直詳しくはよくわかりませんm(__)m リサイズしまくってpcとsp表示を切り替えたりリロードすると出たり出なかったりします。 僕はこんな感じで書いていたらエラーが出ました。 $(window).resize(function () { // spのみ if ($(window).width() < 768) { $('.slider').slick({ // オプション }); } else { // pcのみ $('.s

MW WP Form の管理画面にはたくさんの機能が用意されていてとても便利です。 エラーメッセージの文言変更やエラーメッセージの表示位置を変更させたいと言った更なるカスタマイズには、管理画面だけでは設定できない範囲となるので、その設定方法を説明したいと思います。 今回は例として、MW WP Form の管理画面の本文に下記内容を入れました。 ※分かりやすくする為、あえてHTMLタグはほとんど使用していません。 氏名 [mwform_text name="名前"]<br> 例：山田太郎<br> <br> メール [mwform_text name="メール"]<br> 例：test@example.com<br> <br> 内容 [mwform_textarea name="内容"]<br> <br> [mwform_submitButton] エラーメッセージの文言を変更する デフォルト

border-bottom では実装できない！ 一番最初に思いつく実装方針は border-bottomを使って要素の下に線を追加することです。 一見するといい感じに見えます。 しかし、この実装方法では、複数行になったときにレイアウトが崩れてしまいます。 ノートのように各行に線が引かれるようなレイアウトになって欲しいですよね。 そんな時はどうしたらいいのでしょうか。 linear-gradient と background-size！ 今回使うのは、linear-gradient と background-size を用いる方法です。 linear-gradient linear-gradientはグラデーションを作るときに使う関数ですね！ linear-gradient(色1, 色2) の形式で指定します。 例では #ccc 色から透明 (transparent)に変化させています。 さ

Photoshopのデザインカンプ上で、スマートオブジェクトを50％以下に縮小しておき、画像アセット生成などで200％にして書き出す手法があります。スマホなどの高解像度ディスプレイ対策としては定番ですね。しかし、ある条件下では、元の画像を50％以下に縮小しているにも関わらず、書き出し後の200％画像がぼけてしまうことがあります。この点について気になったので、少し整理してみました。（2016.4.15／注意点を追記） 2016.4.15／注意点を追記スマートオブジェクトの特長スマートオブジェクトは、拡大、縮小を繰り返しても劣化しないというのが特長です。もちろん、オリジナルのサイズより大きくする場合は別ですが、いったん縮小してから再び拡大しても、その都度オリジナルからピクセルを生成しますので、常に最適な画質が保持されるというわけです。 スマートオブジェクト入門～直しに強いPhotoshopデー

投稿者権限のユーザーがログインしている時、投稿一覧を表示すると自身の投稿以外の投稿も見えます。編集はもちろんできず、タイトルが表示されているだけですが、下書きの投稿も見えてしまうので見えないようしたいと思い、次のようなコードを functions.php に書きました。 function show_only_authorpost($query) { global $current_user; if( is_admin() && !current_user_can('edit_others_posts') ){ $query->set('author', $current_user->ID); } } add_action('pre_get_posts', 'show_only_authorpost'); これで投稿者は自身の投稿しか表示されなくなりますが、しかし、投稿画面を見ると Adva

tdにposition: relative;をかけていると、firefoxやIEで罫線が切れてしまう テーブルをcssスタイリングしていてFFやIEで罫線がどうしても切れてしまう場合がある。その場合は、background-clip: padding-box;を指定することで解消できる。 参考：MDN：background-clip https://developer.mozilla.org/ja/docs/Web/CSS/background-clip サンプル（上：chrome表示、下：FF表示）

WinSCPで特定の拡張子のみアップロード・ダウンロードする WEBコンテンツ内でHTMLのみ・PHPのみを一括置換したい場合、特定の拡張子のファイルをダウンロードしたりアップロードしたい場合があります 使用しているFTP・SCPソフトによりますが一括でダウンロード・アップロードしかないできない場合があります。その場合だとダウンロード・アップロードだけで結構な時間がかかります この記事では、「WinSCP」を利用して特定のファイル（拡張子）のみダウンロード・アップロード紹介します WinSCPで特定の拡張子のみ転送する設定方法 WinSCPでは転送時にファイルマスクの設定で、特定のディレクトリのみ・特定の拡張子のみを許可・除外できます。その設定を利用して特定の拡張子のみ転送する設定をおこないます。今回はHTMLのみ転送する設定を説明します １．「WinSCP」を起動します ２．「オプション

ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。 サンプルデモを見る 現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。 判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

昨日Twitterのタイムラインで下記を見かけました slickのがたつきの件、NxWorldさんのサイトのサンプルでもなってるからやっぱり自分だけじゃないな。／https://t.co/EJ5swAVGAu — ヤマシタレイコ｜OOOPEN (@OOOPEN_jp) January 30, 2019 以前このプラグインを使った時に同じような不具合に直面し、自力で何とかした経験があるので、同じように困っている方の参考になれば。。 現象 ここのスライドのNextとかPrevを押すと分かりますが、2周目の最初のスライドに来た時と、最初のスライドから最後のスライドに戻る時にがたつきます。 これは.slick-currentというクラスが来た時に透過にしたり大きくしたりしているのですが、がたつくパターンの場合クラスが付与されるまでにDOMの操作が発生しその処理時間の差でがたつくのだと思います。 対

求人情報を掲載するサイトを制作しており、最近発見したフォーム作成プラグイン「MW WP Form」を活用させていただいております。 http://cube-biz.sakura.ne.jp/apply/?post_id=209 URL引数をもとに、応募ボタンからフォーム画面までpost_idで情報を送ることには成功し、MW WP Formの管理画面で　{カスタムフィールド名}　と入力してカスタムフィールドの内容は表示されるのですが、カスタムタクソノミーが表示されません。 カスタムタクソノミーを、管理画面のフォーム作成画面で、{カスタムタクソノミー名}のように使用する方法をわかる方がいらっしゃれば教えていただけませんか。 フィルターフックをfunctions.phpに記述する方法で、 「選択肢」として出力する方法や、 http://plugins.2inc.org/mw-wp-form/ma

作成日 : 2018/06/16日 何とかJavaScriptを使って、APIを使わずInstagramの投稿を取得したのでここに書く ※Tag検索表示が出来たのでコメントに載せています。 Instagram Instagram API まず最初に Instagram APIは企業が取得しようとし 「申請が降りるまで2年たった...」 とまで言わしめたホラーゲームである。(大嘘) 僕も年始めに申請したが、結局現在も許可されるに至っていない。 めっちゃ鬼畜。 そんな訳でInstagram APIを使わずインスタの投稿を取得します 下記に書す方法ではJavaScriptだけではなく、PHPとかでも可能だろう ではquiitta初投稿で 汚い投稿を見ていってください。 ※このプログラムを使用する場合は自己責任でお願いします。 たとえ何かしらの損害が生じても私に責任は無いものとします。 1. ソー

みらいクリエイターズは、子育て事業をサポートするWEB制作会社です。当社では、関連事業として保育専門の求人サイトや保育と習い事の検索サイトを運営しています。全国の託児所・保育園・幼稚園・学童保育・ベビーシッター・育児コミュニティなどの子育て施設や、子どもの習い事教室を無料で掲載してご紹介しています。 保育施設や習い事教室は、じつは他の業種よりもずっと早くからホームページを公開していた施設が多くあります。そのため昔の古いデザインのまま放置されていて、「画面の横幅が狭い、文字が小さい、レイアウトが崩れている、知りたい情報が見つからない」など、魅力に欠けるサイトが多いのが現状です。 子育て情報サイトを運営していると、保育＆習い事サイトに必要な情報は何か、どのような導線設計なら「お問い合わせ」や「お申し込み」が増えるのかがよく分かります。当社がこれまで学んだノウハウをすべて落とし込んだホームページ

線や塗りなど描画が美しいSVGアニメーションの作り方ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができ、gifに比べて滑らかな動きを表現できます。今回はXML形式とCSS3でアニメーションをつけて、ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。

ホーム>【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点 【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点 【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点 2017-12-14 モーダルウィンドウ、いわゆるlightbox系プラグインとスライダー系プラグインを組み合わせる時の注意点と備忘録です。 モーダルウィンドウ単体、またはスライダー単体でそれぞれ使うぶんには基本的には全く問題なく使用していいと思います。 ですが、カルーセル表示（小さいサムネイルを表示させてるあれ）をスライドさせて、そのサムネイルをクリックするとモーダルして拡大させて表示ということをしたいときに注意が必要です。 スライダー系プラグインの仕様に注意 以前、紹介させていただいたプラグインなどがそうなのですが、スライダーをずっとスライド

この記事を簡単に書くと… ある時期からjQueryの「bxslider」でリンクができなくなった 「touchEnabled:false」のオプションを追加することで解消 フリックでの切り替えができなくなるので、別のプラグインに変えることも検討を jQueryの「bxslider」は、WEBサイトで写真をスライドして表示させることができる、有名なプラグインの一つです。レスポンシブ対応もしているので、使っているユーザーも多いのではないでしょうか。 その「bxslider」で、スライドの写真にリンクを貼っている場合に、ある時期からクリックできなくなってしまいました。原因としては、Google Chromeのアップデートによって「bxslider」に不具合が発生している状態なのですが、まだ対応されていません。 その為、「bxslider」が最新版になって、この不具合に対応するまでは、リンクをクリ