PHPベースでCMSを構築する際に、アップロードされた画像をGDライブラリを利用してリサイズ、トリミング、圧縮などの画像処理をすることがよくあるのですが、改めてその性能について検証してみようと思います。
また、今回は画質がよいと言われているImageMagickライブラリもあわせてテストしてみます。
検証した環境は以下のとおりです。FuelPHPをベースとしたCMSで、GDライブラリとImageMagickライブラリの圧縮率をそれぞれ変えてみて、jpgファイルの品質を比較してみます。
テストに利用するのは以下の横幅720px、縦幅480pxの画像です。
オリジナル画像 720×480 (173KB)
この画像をそれぞれのライブラリで品質を100%、90%、80%、70%に設定して、サイズ640 x 480にトリミングしてみます。
処理結果は以下の通りです。
Instagram APIを使って、投稿された写真を取得、表示してみたいと思います。
個人的には乗り遅れているInstagramブーム、単体の盛り上がりは感じていますが、それを活用したWebサービス事例などはあまり見かけないような気がします。
今回はその可能性を検証するため、Instagram APIの利用方法などを調べてみます。
Instagram APIを利用するためには、まずInstagramアカウント登録が必要です。
Instagramアカウントがない場合は、公式サイトからアカウント登録します。
Instagram
Atomで作業を進めていると、「UTF-8」のファイルが何故か「windows1252」で開かれてしまうことがあります。
特に日本語を少しだけ含む場合に発生するケースが多いようです。
「少しだけ」というのが厄介で、本来UTF-8であるはずのその日本語部分がwindows1252で文字化けして表示されてしまいます。その上、そのまま気づかずに上書きしてしまい、展開してしまうという危険なケースも実際に起こりました。
以前はそんなことなかったのですが、最近は頻繁に発生しているような気がします。
解決方法について、普段は私は日本語ファイルに対応するためにauto-encodingというプラグインを利用しているのですが、その設定で回避できるようです。
jQuery UIのDatepickerを実装したのですが、「本日の日付」をセットする「Today」ボタンが効きません。
少し調べてみると、本件についてはさまざまな記事を見つけることができるのですが、どうやらデフォルトのバグのようです。
今回、発生したのは以下の環境です。
例えばオフィシャルのサンプルに倣って、以下のように「Today」ボタンと「Done」ボタンを表示する設定であるオプション「showButtonPanel」をセットして、Datepickerを構築します。
$("#datepicker").datepicker({
showButtonPanel: true
});
そうすると上図のように両ボタンは表示されますが、なぜか「Today」ボタンが機能せず、押すことができません。
オフィシャルのサンプルページでも確認してみましたが、同様に機能していないようです。
Datepicker | jQuery UI
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"
},
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タグの表示です。