Minory

近年の レスポンシブ や フレキシブル デザイン の流行と共に、すっかりお馴染みとなった animate.css と wow.js の組み合わせ。 スクロール する度にコンテンツが アニメーション 付きで表示される手法です。 しかもその アニメーション は Flash や 動画 を使わず、 CSSのみ で実現できるのでとても簡単かつエコです。 Animate.css まずは、 Animate.css の公式サイトでどういった アニメーション がある確認しておきましょう。 Animate.css - daneden.github.io プルダウンから効果を選んで「 Aminate it 」ボタンを押すだけで確認できます。 WOW.js 上記の Animate.css に WOW.js を組み合わせると、 WOW.js の公式サイトのような”動き”を付けることができます。 WOW.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend. Reveal Animations When Scrolling — WOW.js - www.delac.io 下に スクロール していくと、その効果が確認できます。 動作サンプル CodePen に全部入りの サンプル がありましたので、ここでは敢えて使い方を紹介しません。 これであなたの WEBサイト も賑やかになりますね！

まだ アルファ版 ではありますが、いつもお世話になっている 管理画面 の テンプレート 「 AdminLTE 」の 3 つ目 の バージョン が公開されていました。 以前、当サイトで紹介した バージョン2 から大きく変わった点としては、ベースで使用している CSS の フレームワーク が、 CSSBootstrap 4 になったことでしょう。 世の中には、これ使っておけば間違いないものって、たくさんありますよね？いわゆる、デファクトスタンダード(de facto standard)ってやつです。jQueryやBootstrapのような定番中の定番です。今回は管理画面のデファクトスタンダードと言えるテンプレート「AdminLTE... シンプルで高機能な管理画面テンプレートは「AdminLTE」で決まり！ - Minory 著者の感覚では、色合いもモッサリとした感じから、くっきりと鮮やかになった気がします。 AdminLTE 3 AdminLTE 3 | Dashboard 3 まだ試していませんが、興味がある方はぜひ AdminLTE 3 で作成してみてください！

皆さん、こんにちは！ 突然ですが、 正規表現 っていつも悩ませてくれちゃいますね。 今回は HTML の img タグから PHP の 正規表現 を使って src の値、つまり URL (パス)を取得しようって話です。 なぜ悩むかと言うと、様々な書き方があり、場合によっては上手く取得できないこともあるからです。 preg_match_all()で正規表現検索 関数の使い方 ネットで探す前に、まずはマニュアルを読みましょう。 PHP: preg_match_all - Manual - php.net 第1引数 に正規表現の 検索パターン を。 第2引数 に 検索文字列 。 第3引数 に 検索結果 が 配列 で返ってくるようです。 まとめると、 preg_match_all([パターン], [検索文字列], [検索結果(配列)], [オプション]); オプション はよくわからないので今回は飛ばします。 一部取得に失敗した例 WordPress を使っている人なら、かなりの確率でご存知かもしれませんが、「 Newpost Catch 」という プラグイン の中に今回のヒントが隠されていました。 Newpost Catch は アイキャッチ画像 が存在しなくても、 コンテンツ に含まれる 画像 を 自動的 に探して一覧の サムネイル として表示してくれます。 Thumbnails in new articles setting widget. Newpost Catch - WordPress.org この中で、 preg_match_all() 関数が使用されているところを抜粋しました。 wp-content\plugins\newpost-catch\class.php //thumbnail function no_thumb_image() { ob_start(); ob_end_clean(); preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_the_content(), $matches ); ...

Symfony の Twig 内で 正規表現 を使った パターンマッチング からの 置換 をしたい場面に遭遇した。 しかし、いくら調べても Symfony 標準の フィルター には私が望むものはありませんでしたが、 独自 フィルター を作成する方法があるようなのでメモしておきます。 PHPのpreg_replace()で置換したい！ 最終的にやりたいことは、 Twig 内で HTML の imgタグ から alt属性 の文字だけを抜き出して、 imgタグ と置き換えること。 これだけだと需要がないように思うが、 フィルター 自体は PHP の preg_replace() 関数と同様の動きをするので使い回しが可能です。 Twig 側では以下のように置換できるようにします。 data.content はHTMLコンテンツ、 preg_replace() フィルター で PHP 同様の 正規表現 を使った パターンマッチング を行い、 Symfony の標準 フィルター striptags で HTMLタグ を削除するといった感じです。 Twigの拡張 それでは参考サイトを基に、 Twig を 拡張 していきましょう。 今回は、 独自 フィルター と 独自 関数 のみとします。 フィルター に関しては上記で説明しましたが、関数に関しては、独自 CSRFトークン を生成する 関数 を作ります。 こちらも需要がないでしょうが、 サービスコンテナ の渡し方についてもメモしておきたかったので。 symfony公式にはfilterしか書いてないのでよく使いそうなfunction,filter,globalのtwig拡張のメモ。###クラス例```namespace CommonBundle\Twig\Extensi... symfony twig拡張メモ - Qiita - Qiita 今回は触れませんが、 グローバル変数 もここで設定できるようです。 ブラウザの翻訳機能を使えば英語の本家ドキュメントの方がより詳しいです。 How to Write a custom Twig Extension: The main motivation for writing an extension is to move ofte...

<input type=”file”>で 画像 を アップロード する際、特に複数ある場合にファイル名だけでは、正直何を アップロード しようとしているのか確認できません。 そこで、 JavaScript と Web API の FileReader オブジェクトを使用して、画像を Base64 エンコードして サムネイル を表示する方法をご紹介します。 ファイル選択時にサムネイルを表示 やり方としては、ファイルを選択した際に発火する onChange イベントの時に、 FileReader を使って Base64 エンコードし、用意していた サムネイル 用のイメージタグに差し込みます。 HTML #file-image がファイル選択で、 #print_img が表示用のイメージタグです。 <div class="panel panel-default"> <div class="panel-heading">画像</div> <div class="panel-body"> <img src="#" alt="" class="img-print" id="print_img" style="width:100%;"> </div> <div class="panel-footer"> <input type="file" id="file-image" accept="image/*"> </div> </div> JavaScript 以下はピュアな JavaScript で書いていますが、後程 jQuery の プラグイン 等も紹介します。 表示前に API が対応しているか確認を入れてます。 window.onload = function() { (function() { ...

jQuery で HTML 要素 があるかないかを 判定 する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、 書き方 や 処理速度 （ パフォーマンス ）を比較している サイト をまとめましたので、選定する基準として参考になればと思います。 要素の存在を確認する 要素 の 存在 を調べるには、以下の 5つ の 書き方 があります。 5つの書き方 [0] と get(0) 、 size() と length はほぼ一緒です。 ($("selector")[0]) ? true : false; ($("selector").get(0)) ? true : false; ($("selector").size()) ? true : false; ($("selector").length) ? true : false; ($("selector").is()) ? true : false; 処理速度（パフォーマンス） Firefox の Firebug という プラグイン を使って計測した結果が紹介されてます。 コード 速度 document.getElementById("id") != null 0.019ms $("selector")[0] 0.033ms $("selector").get(0) 0.040ms $("selector").size() 0.041ms $("selector").length 0.069ms $("selector").is("*") 0.169ms 引用： [JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき 結果、どれを選ぶべきか？ ぶっちゃけ、 どれでも良い です。 著者の場合は速度重視なので、 $("selector")[0] を使います。 もちろん、 ピュア...

jQuery の呼び出す時の 書き方 が何通りかあります。 皆さんも何度か目にしたと思います。 どれも同じように見えますが、実際には 書き方 にって 動作 が違います。 jQueryの書き出し 例えば、以下のようによく見かける 3つ の 書き方 があります。 $(function(){}); $(document).ready(function(){}); $(window).load(function(){}); 他にも、 $() を jQuery() と書くこともありますが、ここでは割愛します。 結論から言うと、 $(function(){}); と $(document).ready(function(){}); は同じ動きをしますが、 $(window).load(function(){}); は 実行 タイミング が違います。 参考にしたサイトがとても詳しく解説されていたので引用しています。 引用： jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry 実行する順番 ready と load に絞って話を進めます。 基本、プログラムは上から下に実行されますが、ここでは ready が先、 load が後に読み込まれるということを紹介しておきます。 具体的な順番は次のようになります。 ページの読み込みが始まる HTMLの読み込みが終わる $(document).readyが実行 画像など含めすべてのコンテンツの読み込みが終わる $(window).loadが実行 引用： 【jQuery】処理実行タイミング $(document).readyと$(window).load – Qiita 2つの決定的な違いは？ どちらも HTML の読み込みが終わった状態ですが、 画像 など コンテンツ 全体の読み込みが終わった後に実行されるのが load です。 しかし、単純に順番の問題ではなく、適切に使い分けることが重要です。 例えば、 ready の場合は画像が読み込み終わっていないので、 CSS で指定していない大きさが可変の画像に対して、幅や高さを取得しようとするとおかしくなります。 以下、使い分け方の例です。 [ready] htmlを...

HTMLで大量の入力項目があるフォームを作成した際に、ページが縦に長くなり過ぎてしまうと、同じ縦幅で横移動できたらと思うことはないでしょか。 そこで、今回ご紹介するのが「jQuery Steps」というjQueryのプラ […] http://ift.tt/2yZ3EEO