HTMLのテキストフォームを構築する際に、excelのオートコンプリート機能のような、入力補完をしてくれるしくみをHTML5で実装します。
過去にこのような機能をを実装するのに、苦労してJavaScriptで無理やり実現した記憶があります。
しかし、最近、同様の機能を実装しなければならなくて改めて調べてみると、HTML5のみで実装できるようになっているんですね。こりゃ楽だ。
では、実際のコードですが、以下のように記述すると、オートコンプリート機能が有効になります。
例えば、input textタグに「list」要素に任意の「example1」を付加すると、同名のIDを指定した「datalist」タグのoption要素が入力候補としてセットされます。
PHP用のFacebook SDKを利用して「Facebookでログインする」機能の実装にチャレンジします。
実証環境はPHP 7.0.15です。
まず初めに、Facebookでのログインを実現するには、Facebookでアプリ登録をする必要があります。
開発者向けFacebook
ヘッダ右上の「アプリを作成」ボタンを押して、アプリ名など必要事項を入力します。
アプリ作成後、アプリIDとapp secretを取得し、控えておきます。また、アプリに接続可能なドメイン「アプリドメイン」を登録します。
※Facebookアプリ登録には、Facebookでの電話認証済み、または、クレジットカード認証済みであることが前提です。
また、必要に応じて、アプリのカテゴリ、規約URL、プライバシーポリシーURLやアプリアイコン画像などを設定しておくとよいでしょう。
PHP用のFacebook SDKのインストールはcomposerで実行します。
まず、composer.jsonを開いて、以下の内容を追記します。
"require": {
...
"facebook/graph-sdk" : "~5.0",
...
},
FuelPHPのOpauthパッケージを利用してFacebookのログインにチャレンジしてみます
実証環境はPHP 7.0.15、FuelPHP 1.8です。
まず初めに、Facebookでのログインを実現するには、Facebookでアプリ登録をする必要があります。
開発者向けFacebook
ヘッダ右上の「アプリを作成」ボタンを押して、アプリ名など必要事項を入力します。
アプリ作成後、アプリIDとapp secretを取得し、控えておきます。また、アプリに接続可能なドメイン「アプリドメイン」を登録します。
※Facebookアプリ登録には、Facebookでの電話認証済み、または、クレジットカード認証済みであることが前提です。
また、必要に応じて、アプリのカテゴリ、規約URL、プライバシーポリシーURLやアプリアイコン画像などを設定しておくとよいでしょう。
Opauthパッケージのインストールはcomposerで実行します。
まず、FuelPHPがインストールされているルートディレクトリに移動して、composer.jsonを開いて、以下の内容を記述します。
"require": {
"php": ">=5.3.3",
"monolog/monolog": "1.5.*",
"opauth/opauth": "0.4.*",
"opauth/facebook": "dev-master",
"fuelphp/upload": "2.0"
},
WordPressの関数「wp_head」はデフォルトでさまざまなコードを出力します。
オリジナルでテンプレートを開発する場合に、このコードが邪魔になることがほとんどです。しかし、wp_head自信を削除してしまうと、プラグインなどが正常に動作しなくなる危険性があります。
なぜなら、wp_headやwp_footerがあることを前提に開発されているプラグインが多くあり、動作に必要なコードを出力しているからです。
そこで、今回はfunctions.phpにアクションフックを記述して、不要なコードの出力を省く方法を調査します。
以下、各セクションにおいて、まずwp_headを読み込むとデフォルトで出力されるHTMLソースを提示します。
次に、そのソースを表示させないため、functions.phpに書き込むアクションフックを示します。
※順不同です。また、新しいバージョンでは表示されなくなっているものもあります。
jQueryで数字がカウントアップ、または、カウントダウンするアニメーションを実装します。
ショッピングサイトや保険見積もりサイトなどで、商品やオプションを選択すると、合計金額がカウントするアニメーションをよく見かけます。
今回、それを実装する機会があったので、ここにメモとして残しておきます。
例えば、以下のHTMLの金額の数字部分をカウントするとします。
<div id="price"> <span>0</span> 円 </div>
0から1000へアニメーションを実行するJavaScriptコードは以下のとおりです。
$({count: 0}).animate({count: 1000}, {
duration: 1000,
easing: 'linear',
progress: function() {
$('#price span').text(Math.ceil(this.count));
}
});
ある日、Atomを起動するとフリーズしてしまいました。
Atom起動アイコンをクリックして、ウィンドウは表示されるのですが、フリーズしていて何も操作できません。
強制終了して再度起動を試みますが状況は変わらず、フリーズしたまま何も操作できません。
環境は以下のとおりです。
少し調べてみると、どうやらフリーズする原因のほとんどはインストールしたプラグインパッケージのようです。
このようなときは、パッケージを一つ一つ無効にして原因を特定したほうがよいとのことです。
JavaScriptを使わずCSSのみでフォームのSELECTタグを装飾する方法です。
以前に、jQueryのプラグインを利用してSELECTタグを装飾する方法を紹介しました。
フォームセレクトを装飾するjQueryベースプラグイン「customSelect」
それまでは、フォームのCSSのみでの装飾は困難だったので、スクリプトを利用する必要がありました。
しかし、最近ではモダンブラウザのCSS3対応が進み、現在ではほとんどの環境で、スタイルのみで好みのデザインへ変更することができるようになりました。
これがデフォルトのフォームSELETタグの表示です。
Windows 10でInternet Explorer 11を起動する方法です。
今頃ですが、私、Windows10デビューをしました。
仕事柄、古いOSやブラウザの対応に追われる日々なので、アップデートには慎重になっていました。
とうとうWindows 10をメインに使う日がやってきたのですが、恥ずかしながらそれまでIE11とEdgeは同じものだと思っていました。別物なんですね。。
それはそうと、Windows10をセットアップ直後、Edgeはデフォルトでアイコンがタスクバーに存在しますが、IE11がどうも見当たらない。
Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。
レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。
（CSSについては別途考えます）
そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。
HTMLのソースは上から順に解析されます。
ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。
少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。
読み込み順を変更することで、レンダリングへの影響を抑えようということですが、この方法では結局、トータルの読み込み時間としては改善していないんですね。
レンタルサーバの「エックスサーバー（XSERVER）」でSSH接続し、FuelPHPのoilコマンドを実行する方法です。
ある日、エックスサーバー上でFuelPHPをベースとしたWebアプリを構築しようと思い、oilコマンドでmigrateを実行しようとしたらうまくいかずエラーになってしまいました。
その際に調べた解決方法をメモとして残しておきます。
まずは、Windowsからputtyを使ってエックスサーバーに接続し、phpコマンドを実行してみました。phpコマンドのパスは、オフィシャルのリファレンスより「/usr/bin/php5.6」とのこと。
プログラム言語・コマンドパス | レンタルサーバー【エックスサーバー】
$ /usr/bin/php5.6 -v PHP 5.6.22 (cgi-fcgi) (built: Jun 22 2016 03:15:28) Copyright (c) 1997-2016 The PHP Group Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
問題なく動作しているようです。