サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
買ってよかったもの
wood-roots.com
前回のtheme.json解読に続き、今回はブロックを自作してみようと思います。 ブロックはプラグインとしてインストールする作り方とテーマとして動作する作り方があります。 プラグインとしてインストールする pluginsフォルダに配置し、管理画面の「プラグイン」から有効化して使用する テーマとして動作させる 必要なコードをfunctions.phpに書き、テーマを有効化したらブロックが使えるようになっている 通常のプラグインでも同じ処理を使用テーマのfunctions.phpに書けば同じ動きをしますので、それと同じです。 テーマに依存しないようにプラグインとして作成することが推奨されていますので、今回はその方法でやってみます。
アニメーションをCSSで書くようになって数年になりますが、凝ったアニメーションを書こうと思うと年々つらくなってきました。 CSSアニメーションのつらみ イージングがつらい transitionならcubic-bezierを書くだけでいいですが、@keyframesでイージングを書こうと思うとつらい。 というか人力で書けるものなのだろうか。 完了を検知して連続したアニメーションを実装するのがつらい transitionend/animationendでクラスを足していってそのクラスに対してアニメーション…つらい。 transitionend/animationendではなくX秒のアニメーションAが終わったらX秒のディレイ後にアニメーションB…とやれば多少は楽ですが、妥協感と将来的に破綻する未来が見える。 CSSファイルがつらい 単純に行数が増えてつらい。 …この状況を打開するために、JSで制
以前CreateJSによるコラ画像ジェネレータを作成しましたが、html2canvasというライブラリの使い勝手がよさそうだったので試してみました。 あわせて最近勉強中のVue.jsで入力内容の制御もやってみました。 DEMO HTMLの要素をcanvasとして生成するJavascriptライブラリです。 <body>を対象とすればページのスクリーンショットを生成できますし、div#hogeのような指定の要素のみを対象とすることも可能です。 html2canvas自体がHTMLやCSSを解釈してcanvasへと変換する仕組みのようで、いわばJS製レンダリングエンジンです。作者の人すごい。 1.html2canvasとvue.jsの読み込み </body>の直前でVue.jsとhtml2canvasを読み込みます。 ちゃんとしたものを作るときはvue-cliを使うほうがいいと思いますが、今回
動的に画像の色を取得して背景や枠線にするような処理を使いたかったため、画像のメインカラー（ドミナントカラーやプライマリーカラーとも言うそうです）を取得するJavascriptライブラリについて調べました。 調べた5つのライブラリについて、どのような結果が得られるかテストページを作ってみましたので参考にしてみてください。画像をサーバーに保存したりはしませんので秘蔵のお宝写真なども遠慮なくご利用ください。 DEMO
遅ればせながらVue.jsを覚えようと思い、ちょっとずつ手を出しはじめました。 ちょっとしたジェネレーターみたいなものでいいので、公開できるものを完成させるまでがんばりたいと思います。 まずはじめに：Vue-cliでBootstrap-vueを使えるようにするまで 以前CodetterでBootstrap4を使ってみて使い勝手がよかったので、Vue.jsでも使っていきたいと思います。 Bootstrap-vueを使用するのが簡単そうでした。 Bootstrapでは_variables.scssというファイル内でフォントやマージンなどの基本設定を定義しているのですが、このファイルを修正してVue.jsで適用させるためにはどうするかについて調べました。 Vue-cliを使ってプロジェクトを作成 Vue-cliの使い方についてはQiitaの記事が分かりやすかったです。 Vue.js を vue-
WordPressのテンプレートは、どのテンプレートファイルをどんな時に使うかがファイル名によって決められています。 ・個別記事の時はsingle.php ・アーカイブページはarchive.php ・カスタム投稿タイプが「item」のときの個別記事はsingle-item.php のようにテンプレートファイルが読み込まれることはほとんどの方がご存知だと思います。WordPressのテンプレートを作成するときは真っ先に覚えましょうと言われることが多いですね。 テンプレート階層 – WordPress Codex 日本語版 しかし「個別記事はstandalone.phpという名前にしたいなぁ…」とか、「ユーザーエージェントがスマホでアーカイブページの時にはarchive-sp.phpを使いたいなぁ…」など、ファイル名だけでは対応しきれないケースも往々にしてあります。 そのような場合に、読み込
slick.jsを使って横幅いっぱい＋前後の画像を半透明にしたスライドを実装しようとしたのですが、きれいに動作させようとすると結構手間がかかってしまいました。 slick.js本体の修正やコールバック関数を使うことでいい感じに実装できましたのでよかったら参考にしてみてください。
グラフを表示させないといけないという案件が出てきたので、グラフを描画するjQueryプラグインについて調べてみました。 グラフ描画用のjQueryプラグインはたくさん見つかりましたが、グラフの描画は難易度の高い処理のためか商用利用は有償というライセンスが多いようでした。 しかし商用利用可能なオープンソースライセンス（BSD、MITライセンスなど）のプラグインでも、充分に高機能なものもありましたので、私個人がいいと思ったプラグインを6つ紹介します。 ・商用利用可能なライセンス ・1つのプラグインでいくつかの種類のグラフが表示できる という2点を満たすものを選んでいます。
WordPressでサイト内検索を実行する際、プラグインなどを入れていない状態だとタイトルと本文（content）から検索することになります。 商品カタログ的なサイトの場合、タイトルのみを対象としてよりシビアな結果を返したい場合もあるでしょう。
管理画面内の「投稿一覧」の項目はデフォルトだと ・一括編集用のチェックボックス ・タイトル ・作成者 ・カテゴリー ・タグ ・コメント ・投稿日時 という順番で並んでいますが、「manage_posts_columns」というフィルターフックを使用することで、この表示内容を追加したり表示させなくしたり順番を変えたりすることができます。 追加する方法はググればすぐに見つかりますが、削除や並び替える方法があまり出て来なかったので試してみました。
Dreamweaver CC2017がリリースされました。 エディタ部分にBracketsを組み込んだりSass/Lessがコンパイルできたりと新機能に注目が集まりますが、その影でひっそりとなくなった機能もあります。 Dreamweaver CC 2017 で非推奨扱いになった機能について 個人的にはスニペットの弱体化が痛い、痛すぎる。 ショートカットを設定できなくなり、さらに選択範囲を囲むスニペットが使えなくなりました。 工エェ工エェ(゜Д゜(゜Д゜)゜Д゜)ェエ工ェエ工 使ってる人あんまりいないの？？？？？？？なかったら仕事にならないんだけど？？？？？？？ …なくなったものはしょうがない。 幸い同等の拡張機能を自作することでなんとかなりそうですので、作ってみました。 ※Windows10を使用しています。
お仕事ではbxSliderをよく使うのですが、毎回似たようなカスタマイズを行うことが多いため、コピペで済ませられるようによく使っているカスタマイズをまとめてみました。 本家はこちら （最近Internal Server Error連発して超重い…）
ぎゅうぎゅう焼き以外にドリアやグラタンを作るときにも重宝しています。 食材 概ね何でもいいのですが、水分が多い食材を使うと水浸しになってしまってグリルというより蒸し煮のようになってしまいます。 それはそれで美味いですが、グリルとして作るのであれば水分が少ない食材を選んだほうがいいでしょう。 食材選びのポイント 最も重要なのは配色です。 肉や根菜で茶色系は充分ですので、赤と緑の野菜を加えると一気に豪華さが増します。 色を加えたい時のおすすめは以下の食材です。 そら豆 サイズが小さく配置場所を選ばないサイズと形状なので緑を追加するのに最適です。もちろん味もよいです。 生のものを塩ゆでするか、冷凍のものを解凍して使います。 ブロッコリー そら豆と同じく塩ゆでか冷凍物を解凍して。房の部分が焦げやすいので途中に加えるのもいいでしょう。 パプリカ（赤） 扱い方はピーマンと同じで、半分に切ってへたと種を
Foundation6の新機能として、flexboxによるグリッドシステム「Flex Grid」の採用があります。 flexboxについてはWebクリエイターボックス様の解説が詳しいです。 これからのCSSレイアウトはflexboxで決まり！ | Webクリエイターボックス Flex GridはCSSのflexboxを基軸とした新しいグリッドシステムです。 レスポンシブへのより柔軟な対応が行えると同時に、CSSフレームワークにありがちなHTMLの深いネストを簡素化することができます。 Flex Gridはどうすれば使えるようになるのか、従来のグリッドシステム何が違うのかについて簡単ですが調べてみました。 Flex Gridを使ってみようとされる方は参考にしてください。 注意：対応ブラウザについて flexboxの対応状況と同じですが、Flex Gridも対応ブラウザが Chrome, Fi
以前Foundation6+gulpをWindowsで動くようになるまでという記事でFoundation6を使おうとしましたが、このパッケージはHandlbars.jsというテンプレートエンジンでレイアウトを制御し、コンテンツ部分はMarkDownで管理してHTMLを生成するという、ローカルCMSとでも言うような複雑なものでした。 FoundationなどのCSSフレームワークに期待しているのはこういう巨大なシステムではなく、CMSのテンプレートや数ページのHTMLをまぁまぁの見栄えで作れればいいんだけど…と思ってましたが、そういう用途に向いたテンプレート「Foundation for Sites Template」も公開されていました。 1つのHTMLファイルといくつかのscssファイルによるシンプルな構成で、これまでのFoundationユーザーならほぼ同じ感覚で使えると思います。 W
CSSフレームワークFoundationの新しいバージョンであるFoundation6がリリースされました。 個人でつくるサイトはFoundationを多用していたので、新バージョンもぜひ試してみたいと思います。 Mac環境ではnpmでコマンドラインツールをインストールして簡単に開発を進めることができるようなのですが、Windows環境では随分手間取ってしまいました…。 とりあえずgulpで自動ビルドをさせるところまで辿り着きましたのでよかったら参考にしてみてください。
修正： jQueryアニメーションのところ、わざわざreturn d.promise()でなくてもanimate()はpromise()を返すのでそのままreturnでよかったです。 CSSアニメーションやjQueryアニメーション、さらにそれ以外の様々な動作を順番に実行するような処理を実装したいと思い、Deferredによる実装方法を試してみました。 CSSアニメーションの完了を判断する方法 順番に動作させるためには「処理が完了した」ということを判定しないといけません。 CSSアニメーションは完了時にtransitionendというイベントが発火します。 ※keyframeアニメーションの場合はanimationendというイベントになります。 このイベントに対してresolve()をバインドさせれば、Deferredにより連鎖的な処理を実装できそうです。 ちなみにjQueryのみの場合
最小値と最大値を指定するタイプのスライダーを実装できるjQueryプラグインを7点ご紹介します。 価格や面積など、最小値と最大値を指定して検索するようなフォームを使う場合に設置してみたくなります。 将来的にはinput[type]でこのようなスライダーを実装できるようになりそうですが、当分はjQueryに頼る必要がありそうです。 ちなみにこのようなスライダーを英語では「Range Slider」と呼ぶそうです。ググるときに使ってみてください。
先日Firefox30がリリースされました。 インターフェイスのChrome化が注目されますが、個人的には「同期 XMLHttpRequest が廃止予定」という点が気になりましたので、どういうことが起こるのか調べてみました。 Firefox 30 サイト互換性情報 同期 XMLHttpRequest が廃止予定となりました XMLHttpRequest コンストラクタの async 引数は初期設定で true となっており、false に設定するとリクエストを同期に変更できます。メインスレッド上での 同期リクエスト の使用、つまり ワーカー 以外での使用は、ユーザ体験に悪影響を及ぼすことから廃止予定とされ、開発者向けの Web コンソール に警告が出力されるようになりました。 jQueryによる同期XMLHttpRequestの例 DEMO jQueryを使用したAjaxの場合、以下のよ
htmlとbodyに対してoverflow: hidden;を指定すると、ブラウザ標準のスクロールバーを消すことが出来ます。 手法の是非はさておき、スクロール時の処理をすべて自力で制御したり、凝ったパララックスを実装するときなどで使うことがあるかもしれません。
WordPressはURLパラメータによって記事を抽出することができます。 たとえば、以下のようにURLパラメータだけでpre_get_postsのフィルターフックを書いたときのような処理を行うことが可能です。 記事IDが20の記事を表示する http://example.jp/?p=20 hogeというタグが追加された記事を表示する http://example.jp/?tag=hoge ただ、カスタムフィールドの内容で記事を抽出するmeta_queryやタクソノミーに対するtax_queryなどは、そのままでは行うことができません。 そこでURLパラメータを取得してmeta_queryなどの記事抽出を可能とする仕組みがカスタムクエリです。 カスタムクエリについてはWordPress Codexが詳しいです。 カスタムクエリ – WordPress Codex 日本語版 カスタムクエリを
作った動機など Web業界に限らないとは思いますが、世の中職種や立場によって激しい対立がある場合があります。 この業界では、コーダーはデザイナーに対し 「コーディングのことを考えてデザインしてくれないと」 「レイヤーの整理をちゃんとしろって」 みたいなことを言い、デザイナーはエンジニアに対し 「センスなさすぎだろｊｋ」 「なんでボタンの色を0ffなんかにしちゃうの┐(´д｀)┌ﾔﾚﾔﾚ」 などと影でぼやき、Sublime Text使いは 「Dwｗｗｗｗｗｗ」 「夢でも紡いでろｗｗ」 と罵ったりしているかもしれません。 このようなお互いよく思っていない関係でも、本音をぶつけ合ったら意外と分かり合えるかもしれない…そんなことを考えて匿名で意見をぶつけ合えるサービスを目指してタイケツを作りました。 昔の漫画でありがちな、殴りあったあと芝生に寝転がって みたいに分かり合うような世界が訪れるといいで
顔認識APIでおなじみのPUXより男の娘WebAPIという最高にクールで斜め上なAPIが公開されたので試しに使ってみました。 男の娘WebAPIとは何ができるAPIなのか 独自の顔認識技術により指定された画像から顔や顔の部品の位置を検出、「年齢、性別、目・鼻・口・輪郭の形」などの情報を解析し、「男の娘度合」などの判定結果を返します。レスポンスはJSON形式で取得できます。 本APIでは「男の娘とは、男の子なのに女の子のように可愛らしい」とし、推定される性別が「ほぼ確実に女性」である場合「男の娘度合」は低い値となります。 ※仕様書より 以前から公開されているPUXの顔認識APIは精度が高いことはもちろんですが、得られる情報も感情や性別、年齢など多岐に渡ります。その高い解析技術を応用したものがこの男の娘WebAPIなのでしょう。最高です。 使い方 指定URLにAPIKeyや画像ファイルなどのパ
当記事で紹介しているスクリプトについて、Googleの公式なドキュメントや解説が見つけられませんでした。もしかしたらAdsense For Ajaxと呼ばれていたものかもしれません。 現時点では動作はしていますが、近い将来廃止や動かなくなる可能性もありますのでご注意ください。 また、google.load(“ads”, “3”)で呼べるAPIについて詳細をご存知の方はよろしければ教えて下さい。 AjaxでAdsenseを含むページをロードした際、そのロードした先のページに含まれるAdsense広告が表示されません。 これはAjaxでロードしたあとにAdsenseを出力するJavascriptが実行されないためですが、その解決策を調べました。
RubyやNode.jsやPythonなどをWindowsで使えるようにしようとした場合、環境変数やら権限やらなんやらと結構めんどくさいことが多いです。 たとえばGruntを使う場合はNode.jsが、Sassを使う場合はRubyが必要ですが、そのNode.jsやRubyのセットアップでつまづいてしまうケースも多いのではないでしょうか。私がそうでした(´・ω・｀) ですが、「Chocolatey」というアプリケーションを使うことでWinでもあっという間に今どきの開発者向けツールがセットアップできました。Winの環境構築で手間取っている方はぜひ試してみてください！ Chocolateyとは 「コマンドラインによるアプリケーションの導入や削除を実現するパッケージ管理システム」です。 Macの開発環境の話で『ターミナルで「apt-get hogehoge」とか「yum install fugaf
ダッシュボードの「メディアを追加」から画像を選び、「投稿に挿入」をクリックするとimgタグが記事に挿入されます。 この挿入されるHTMLをもうちょっと自分好みにできればいいなと思い、編集する方法について調べてみました。 PHPコードをfunctions.phpに記述します。 画像を挿入する際に適用されるフィルターフックについて imgタグに対して適用されるフィルターフックとリンクを設置した際のaタグまで含めた結果に適用されるフィルターフックがあります。 それぞれ適用される対象が異なるので、どういう処理をしたいかを考えてフィルターフックを使い分けます。 imgタグそれぞれに適用されるフィルターフック →get_image_tag リンクを設置した際のa>imgに適用されるフィルターフック →image_send_to_editor imgタグそれぞれに適用されるフィルターフック:get_im
テキストを入力(200文字以内） Base64で直接取得しているので音声ファイルが保存されることはありません。
次のページ
このページを最初にブックマークしてみませんか？
『Wood-Roots:blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
