HTML– tag –
-
SymfonyのTwigを拡張！カスタムフィルターや関数を追加
SymfonyのTwig内で正規表現を使ったパターンマッチングからの置換をしたい場面に遭遇した。しかし、いくら調べてもSymfony標準のフィルターには私が望むものはありませんでしたが、カスタムフィルターや関数を作成する方法があるようなのでメモしておきま... -
jQueryプラグイン「iziModal.js」でモーダルウィンドウをオシャレに！
今回は、モーダルウィンドウを簡単に表示できるjQueryプラグイン「iziModal.js」を紹介します。今やCSSでもBootstrapなどのフレームワークを利用するのが当たり前な時代ですが、JavaScriptにもスポットを当ててみると、もっとアニメーションをオシャレに演... -
JavaScriptで画像アップロード時にサムネイルを表示させる方法
<input type="file">で画像をアップロードする際、特に複数ある場合にサムネイルがないと、正直何をアップロードしようとしているのか確認できません。そこで、JavaScriptとWeb APIのFileReaderオブジェクトを使用して、画像をBase64エンコードして... -
jQueryでHTML要素の存在を確認する5つの方法
jQueryでHTML要素があるかないか存在を判定する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、書き方や処理速度（パフォーマンス）を比較しているサイトをまとめましたので、選定する基準として参考になれ... -
カメラで「クレジットカードを読み取る」入力フォーム（iOS対応）
情報が古いので既に気付いていると思いますが、iOSのSafariにはクレジットカードをカメラでスキャンするだけでフォームに自動入力してくれる機能があります。利用者は何気なく使っているかもしれませんが、開発者側がきちんとHTMLを設定してあげないと実装... -
jQueryの3つの書き方で実行タイミングの呼び出し順が違う
jQueryの呼び出す時の書き方が何通りかあり、それぞれ実行タイミングが違います。今回は、皆さんも何度か目にしたと思われる書き方について、どのタイミングで呼び出されるのかをご紹介します。どれも同じように見えますが、実際には書き方によって動作が... -
Node.jsで簡単なWebRTC（リアルタイムチャット）を実装
現在、サーバー側で動作するするJavaScript「Node.js」を勉強中。練習でリアルタイムで会話ができるチャットシステム（WebRTC）を実装。今回はとりあず実装しただけですので、npmでインストールしたモジュールがどのような役割を果たしているかは把握して... -
Ajax(jQuery)とpushStateのみで実現するSPA用スクリプト
実際には「pjax（pushState + ajax）」というjQueryのプラグインを使っていますが、今回はjQueryとpushStateのみでSPA（シングルページアプリケーション）を実装します。以前紹介したCSSフレームワーク「Ratchet」は、まさに今回の応用です。 https://mino... -
URLスキームでスマホのWEBブラウザからアプリを起動する
最近まで、スマホのブラウザで表示したWEBサイトのURLスキームから、インストールしたネイティブアプリが起動するのは知らなかった。 スマホ用のWEBアプリ作ることが増え、ネイティブアプリと連携したくなることもしばしばあります。実はこのURLスキームは... -
Font AwesomeをCSSの擬似要素のcontentで使用する方法
今やフォントアイコンの定番になった「Font Awesome Icons」をCSSの擬似要素（:before、:after）のcontentプロパティで使用する方法をご紹介します。Font AwesomeとはHTMLタグにクラスを指定するだけで、フォントアイコンが表示できる優れものです！Bootst...