個人で管理しているサイトのCSSをSass管理に切り替えてみようと思い、Windows上にSassの開発環境を構築します。

これまで、過去のプロジェクトの失敗から、Sassの導入には抵抗がありました。
SassはCSSを効率よく管理するしくみであり、作業者がSassを理解していることが前提条件です。そのため、Sassについて知識が乏しい人がメンバーにいると、逆に作業効率が低くなることがあります。また、Sassで出力したCSSファイルをクライアントなどが直接編集したりと、どうしてもSassによるプロジェクト管理は難しいというイメージがありました。

しかし、最近ではSassをうまく利用したプロジェクトを見かけるようにもなったので、技術習得の目的で、個人サイトで導入してみようと思いました。

ちなみに、今回構築した環境は以下の通りです。

• Windows 10 Home 64bit
• Ruby 2.4.3-1-x64

※現時点で2.5がリリースされていましたが、公式サイトにあるように、まだ不安定要素があるので2.4系を奨励とあったので、2.4.3にしました。実は初めに2.5のインストールにチャレンジしたのですが、エラーが発生しSassインストールは失敗しました。。

今回、改めてPHPのライブラリを使ってTwitter botを作る方法を調べます。
Twitter botと聞くとだいぶ懐かしいような感じもしますが、最新の技術動向もふまえて実装してみます。
PHPライブラリは最近、利用例をよく見かける「TwitterOAuth」を使ってみます。
TwitterOAuth

今回検証した環境は以下のとおりです

WordPressでは通常の記事投稿や固定ページなどデフォルトの投稿タイプとは別に、自身で新しい投稿タイプを追加することができます。
最近ではWordPressをブログとしてだけではなく、本格的なCMSとして活用する場面も多くなってきました。そんな中で、店舗一覧、スケジュール一覧、商品一覧などオリジナルのカスタム投稿タイプを追加したい場合に、この方法は重宝します。

今回は例として、カスタム投稿タイプ「店舗一覧」を追加する想定で、コードを書いてみます。

カスタム投稿タイプ「店舗一覧」を追加

WordPressでカスタム投稿タイプを設定するためには、function.phpなどにアクションフックを設置して、そこで関数「register_post_type」を記述することで実現できます。
カスタム投稿タイプ「店舗一覧」を追加するコードは以下のようになります。

function create_post_type(){
	$args = array(
		'label' => '店舗一覧',
		'labels' => array(
			'singular_name' => '店舗一覧',
			'add_new_item' => '新規店舗を追加',
			'add_new' => '新規追加',
			'new_item' => '新規店舗',
			'view_item' => '店舗を表示',
			'not_found' => '店舗は見つかりませんでした',
			'not_found_in_trash' => 'ゴミ箱に店舗はありません。',
			'search_items' => '店舗を検索'
		),
		'public' => true,
		'has_archive' => true,
		'menu_position' => 5,
		'supports' => array('title','editor','thumbnail','custom-fields')
	);
	register_post_type('shop', $args);
}
add_action('init', 'create_post_type');

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」ボタンが効きません。
少し調べてみると、本件についてはさまざまな記事を見つけることができるのですが、どうやらデフォルトのバグのようです。

今回、発生したのは以下の環境です。

• jQuery 3.2.1
• jQuery UI 1.12.1

例えばオフィシャルのサンプルに倣って、以下のように「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でアプリ登録をする必要があります。
開発者向けFacebook

ヘッダ右上の「アプリを作成」ボタンを押して、アプリ名など必要事項を入力します。
アプリ作成後、アプリIDとapp secretを取得し、控えておきます。また、アプリに接続可能なドメイン「アプリドメイン」を登録します。
※Facebookアプリ登録には、Facebookでの電話認証済み、または、クレジットカード認証済みであることが前提です。

また、必要に応じて、アプリのカテゴリ、規約URL、プライバシーポリシーURLやアプリアイコン画像などを設定しておくとよいでしょう。

composerでPHP用のFacebook SDKをインストール

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でアプリ登録をする必要があります。
開発者向けFacebook

ヘッダ右上の「アプリを作成」ボタンを押して、アプリ名など必要事項を入力します。
アプリ作成後、アプリIDとapp secretを取得し、控えておきます。また、アプリに接続可能なドメイン「アプリドメイン」を登録します。
※Facebookアプリ登録には、Facebookでの電話認証済み、または、クレジットカード認証済みであることが前提です。

また、必要に応じて、アプリのカテゴリ、規約URL、プライバシーポリシーURLやアプリアイコン画像などを設定しておくとよいでしょう。

Opauthパッケージのインストールと設定

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"
},