自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」
タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能とは、例えばショップサイトで画像付きの商品一覧ページをタイルレイアウトで表示している場合、商品の色や機能など、特徴ごとに商品リストをリアルタイムに並べ替えるようなことができるものです。 「Masonry」と同じように自動でグリッドレイアウトを表示して、フィルター機能も付いているプラグインで有名なものとしては、「isotope」というプラグインがありますが、こちらはGPLv3ライセンスの下で商用利用の場合は有料となってしまいます。 そこで、「Masonry」の唯一(?)の弱点であるフィルタリング機能を補ってくれる便利な拡張機能が、「Multiple Filter Masonry」。
WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 - KAYAC engineers' blog
このエントリーは tech.kayac.com Advent Calendar 2015 の4日目のエントリーです。 こんにちは！ 今年の春、カヤックに新卒として入社した、フロントエンドエンジニアの深澤（@takumifukasawa）です。 今回は、「canvasのライブラリは手をつける順番で理解度が大きく変わる」と思った出来事について書きます。 canvasライブラリで表現の幅は広がるが、種類が多くて迷う。 僕は7月に、『1日1jsdo.it』という企画を始めました。主にcanvasの勉強のためです。 これは、「1日に1つプログラムで何か作品を作る → それをjsdo.it(※1)に投稿する」習慣のことです。 途中で1週間ほど間が空いてしまった時期はありますが、この習慣を4,5ヶ月ほど続けていて、いまのところ120個近くの作品が出来上がっています（たいてい、仕事を終えて帰ってから寝るま
2017年に見ておきたい12のJavaScriptライブラリ | TechAcademyマガジン
JavaScriptライブラリには、有名なものでjQueryやReactといったものが存在します。そこで、あまり知られていないものの急速に台頭している12のJavaScriptライブラリを紹介しています。ぜひご覧ください。 本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。 JavaScriptのライブラリは数多く存在しているため、その中のどれにエネルギーを注ぐべきかを決めるのは難しく思えるかもしれません。 成長を続けて広く採用されるようになるライブラリもあれば、中には使用されなくなったり、別の新規プロジェクトに吸収されて消滅するライブラリもあります。 ほとんどのエンジニアは、jQueryやReactなどの有名なライブラリはすでにご存知かと思います
phina.jsの簡単さから基礎知識まで - Qiita
ちょっと今年のAdvent Calenderで基本的な説明してる人がいないと思ったので書きました。 いや、本当、簡単ですよ。 どこが？ 個人的には、ソースコードのその可読性が大きいですね。基本的なJavascript/Canvasの知識だけあれば、どこからでも十分読めます。おかげでデバッグがしやすいですし、拡張性も高いです。 また、分からないことがあっても質問などするとすぐ答えが返ってきますし、対応が早いです。Gitterのチャット欄などを見ると、次々とユーザーさんが質問、要望を出しては開発陣の皆様が対応していく様子が伺えますし、私自身も一度それでお世話になっています。 追記: Gitterも引き続き使用できますが、主な開発者の皆さんはSlackへ移行しました！可能な方はこちらで質問をお願いします！ さらに、低レベルのAPIが充実している点もスムーズに開発するために重要なポイントです。 そ
WordPress REST API で、カスタム投稿タイプなどの情報を取得する ｜ Tips Note by TAM
2016.05.25 WordPress REST API で、カスタム投稿タイプなどの情報を取得する ちょいちょい使う機会も増えてきた WordPress の REST API ですが、カスタム投稿タイプやカスタムタクソノミー関連のデータ取得が必要な機会がありましたので、方法をまとめておきます。ひと手間だけかかる感じでした。 まずは軽くおさらい。 REST API のセットアップ WordPress で REST API を使いたい場合は、こちらのプラグインを入れて有効化します。以上です。 WordPress REST API 使い方は、ドキュメントがしっかりまとまっています。 API Reference | WP REST API v2 Documentation 投稿データを取得 基本的な使い方として、まずは最新の投稿データを取得したい場合。(以後、例としてドメイン名は exampl
今さら聞けないオウンドメディアの意味とは？ - innova
オウンドメディアとは、企業が自社で所有・管理するメディアを指します。近年は、そのなかでブログやWebマガジンの形式をとったオウンドメディアを運営する企業が増えています。提案するウェブ制作会社や広告代理店も増えていて「自社でもやってみたい」と考えている企業も多いでしょう。しかし、流行っているからと安易に始めるのではなく、中身を確認し、自社に合うかどうかを検討したうえで導入するのが望ましいといえます。 そこで本記事では、オウンドメディアとは何か？ どのようにオウンドメディアマーケティングに取り組むべきなのか？ について、分かりやすく説明します。 オウンドメディアの立ち上げに関しては、ダウンロード資料「オウンドメディアスタートブック」もおすすめです。 また、イノーバのBtoB企業専門のェブサイト制作サービスにご興味がありましたら、こちらもご覧ください。 オウンドメディアとは何か オウンドメディア
脱WordPress！静的サイトの特徴やメリットなどのまとめ | Web Design Trends
WordPressのようにアクセスされる度にページを生成するのではなく、予め生成しておいたページを表示する静的サイトが再び注目を集めています。 静的サイトの特徴やメリットとデメリット、人気の静的サイトジェネレータについてまとめました。 静的サイトとは WordPressで管理しているようなサイトは動的サイトと呼ばれ、動的サイトは基本的にアクセスされる度にページを生成するような仕組みで動いています。 それに対して静的サイトはユーザーがアクセスする前に、予めページを用意しておくような仕組みでページを表示しています。 ページにアクセスしたユーザーは、動的サイトなのか静的サイトなのかはっきりは分かりません。ログインしてユーザーの名前が表示されるようなサイトや、ユーザー毎に異なる情報が表示されるようなサイトは動的サイトが使われていることがわかりますが、ブログやメディアなどのサイトは動的サイトでも静的
How to Install and Setup WordPress Multisite Network
Are you wondering how to set up and install a WordPress multisite network? WordPress has a built-in capability to create multiple websites using a single WordPress installation. A WordPress multisite network is often used by blogs, schools, and businesses that need to run separate websites but want to manage them under one dashboard. In this article, we will show you how to install and set up a Wo
複数サイト運用方法(サブドメイン型)｜WordPress活用ガイド｜テンプレートキング
概要運営したいサイト、ドメインの数だけサーバーを契約したりプログラムをインストールするのは大変ですが、WordPressには「マルチサイト」という機能が標準で用意されています。 「マルチサイト」は1つのサーバー、1つのプログラムで複数のサイトを運営できる便利な機能です。 「マルチサイト」で複数のサイトを運用する場合、以下の3つの方法からお選びいただけます。 サブディレクトリ型サブドメイン型複数ドメイン型※ 最初にお選びいただいた方法から、途中で別の方法には変更できません。 今回は「サブドメイン型」についてご説明します。 サブドメイン型 マルチサイトとは？「example.com」で公開しているサイトに「sub1.example.com」「sub2.example.com」など、サブドメインで複数のサイトを公開します。 ドメインの準備基本となるサイトを公開する上位ドメイン「example.c
WordPressをローカル環境等にお引っ越しする方法（XAMPP使いも歓迎）｜TechRacho by BPS株式会社
Webチームのebiです。 以前、EC-CUBEのサイトをローカル環境に持って来たいと言う旨の記事を書きました。 今回はみんな大好き（？）WordPressのサイトをローカル環境に移動させるお話です。 ローカルで作ったものを本番環境に展開させる場合も同じ要領でできます。 加えてただのWordPressのサイトだけではなく、マルチサイト化したWordPressのサイトも扱えるようにすることを目標にします。サーバが動くなら別にXAMPPを使っててもいいですよ。 せっかくなので、あえてVirtualBoxに頼らずWindows上で完結するXAMPPでやってみました。手元のXAMPP（Ver.5.6.21）を用いた時の記録を残しておきます。 ローカル環境の全般的な話はこちらの過去記事も参照してください。 WordPressのマルチサイト化について 先にWordPressのマルチサイトについて簡単に
jQuery Deferredまとめ - Qiita
参照 よく分かるjQuery Deferred http://amzn.to/1SkAQXn 学習内容 .done()と.fail() Promise 非同期と同期処理 Deferred .then() $.when() $.Callbacks() 非同期処理を直列に記述、実行するための仕組み。 非同期処理で、複数の処理を、指定した順番で実行することができる。 Promise Jquery ver.1.5からAjax関係のメソッドは「Promise」を返すようになった Ajaxが無事終了した時、「Promise」に、コールバック関数を、done()というメソッドを使って登録する。 Ajaxが異常終了した時、「Promise」に、コールバック関数を、fail()というメソッドを使って登録する。 function onSuccess(){ console.log("成功"); } functi
複数のAjaxタスクをシーケンシャルに実行するには？
処理1 > 処理2 > 処理3のように複数のAjaxを直列実行しなければいけなくなったとき、以下のようにコールバックがネストしていってガチガチのコーディングになってしまう。このネスト構造、API1とAPI3の順番を入れ替える修正とかイヤになりますね。 今回はこういう処理をキレイに可読性高く記述しようという話。 $.getJSON('path to API1', function() { $.getJSON('path to API2', function() { $.getJSON('path to API3', function() { // つづく ... }); }); }); jQuery.Deferredを使おうこれらを解決するためにjQuery.Deferredを使用します。 jQueryのAjaxはPromiseオブジェクトを返してくれるので下のようにタスクを定義します。 v
Facebook V2.1 API をアプリアクセストークンで利用してみた | DevelopersIO
はじめに AWSチームの鈴木です。 Facebookが提供するv1.0のAPI、2015年にサポートが終了し、 2016年8月、v1.0のAPIを利用したFacebookシェア数の取得が不能になりました。 v2.1のAPIの利用方法と、その実行に必要なアクセストークンの作成方法について 確認する機会がありましたので、紹介させていただきます。 Facebook 新旧APIの実行サンプル Facebookのシェア数を取得しています 対象URLは「https://dev.classmethod.jp/」 v1.0 サポート期限、2015年4月30日まで。 2016年8月現在、v2.1 以降のAPI利用が求められる様になりました。 2016年8月以降 $ curl http://api.facebook.com/method/fql.query?format=json&query=select%2
graphAPIを使ってfacebookの投稿を読み込む方法 - 株式会社オーツー｜スタッフブログ
こんにちわ。webデザイナーの池田です。 弊社ではオリジナルレーベル「peakvox」にてfacebookを運用しているのですが、 突然facebookの更新情報が取得できなくなり、すこしハマってしまったので共有させて頂きます。 同じ現象にお悩みの方の参考になればと思います。 今までの取得方法 まずは、今までどのように取得していたかというところですが、 弊社ではgoogleFeedApiを使ってfacebookが発信しているfeed情報を取得してタイムラインの更新をお知らせしておりました。 しかしある日突然エラーが・・・。 「400:Feed could not be loaded.」 要するにフィードが読み込めないよーと言っているようです。 それもそのはず、実はfacebookのfeed配信の機能が2015年6月23日をもって終了となっていました。 https://developers.
【JavaScript】Graph API を使用して、facebookページのfeedデータを取得する。 | astone.jeez.jp
やりたいこと webサービスを運営する中で、自分が運営しているfacebookページのフィードデータをwebサービスに表示させたい、みたいな事をやってみる。 今回はgoogleのFBページを（勝手に）デモに使用します。 事前準備 まずは、facebookの開発者登録とアプリの登録が必須になります （今回は本題でないので割愛） facebookが提供するツールを開く といっても、facebookが提供してるツールで大体の事は確認出来たりします！ https://developers.facebook.com/tools/explorer Acsess Tokenを設定する Acsess TokenにアプリのアクセスTokenをいれて、Get Tokenボタンをクリック。 Access Tokenは https://developers.facebook.com/tools/accesstok
MAMPのバーチャルホスト設定：開発用のドメイン登録とhosts設定
2016/09/30 (更新日: 2016/10/02) MAMPのバーチャルホスト設定：開発用のドメイン登録とhosts設定 PHP PROGRAMMING MAMPで開発しているときに開発用のドメインを登録する方法です。 例えば、localhost/hogehogeをhogehoge.comに変更して開発できます。 MAMPでバーチャルホスト設定をする際に編集する２つのファイル 念のためバックアップは取っておいてください。 １つ目：httpd.conf ファイルの場所：/Applications/MAMP/conf/apache/httpd.conf 編集前が下記 # Virtual hosts # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 編集後が下記 # Virtual hosts Include
MAMPでVirtualHostを設定してURLを変更する | KonifarPod
MAMPのhtdocs以下にcakePHPのプロジェクトを置いて動かしていたのですが、プロジェクトのディレクトリの階層が深くてURLが長くなってしまい、色々と面倒だったのでVirtualHostを設定してURLを変更しました。 （変更前）http://localhost:8888/padule/cake/events.html （変更後）http://padule:8888/events.html 備忘を兼ねて方法を記載します。 １．httpd.confの編集 Virtual Hostの設定を可能にするために、MAMP/conf/apache/httpd.confを以下のように編集します。 （変更前） # Virtual hosts # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf （変更後） # Virtua
サンプルで学ぶwebpack 2入門：Web開発を超効率化する必須ツールの使い方 - WPJ
タスクランナーに代わって、ここ最近人気が高まっているビルドツールといえばwebpack。「難しそう」「面倒くさそう」——まだ導入していないなら、いますぐ試してみる価値はありそうです。 webpackは現在のWeb開発シーンにおいてもっとも重要なツールになりました。基本的には自分のJavaScriptファイルにほかのモジュールをバンドル（1つに束ねる）してくれるものですが、ほかにもHTML、CSS、さらに画像といったフロントエンド開発で使うファイルすべてに適用できます。webpackを使えばアプリからのHTTPリクエストの数をうまく制御できますし、ほかのツール、たとえばJade、Sass、ES6も使用できます。npmからほかのパッケージを参照するのも簡単です。 この記事ではwebpackを使うのが初めての人を対象に、初期設定、モジュール、ローダー、プラグイン、コードの分割、稼働中のモジュール
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
phiary
【phina.js】ゲーム作成チュートリアル（15パズル） | Keep Coding