スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

TortoiseGitを使って、Windows端末からリモートのGitサーバに接続する環境を作ってみます。

WindowsのコマンドプロンプトなどからGitコマンドを実行するのもよいですが、GitのブランチやマージなどGUIで確認できたほうがわかりやすいこともありますよね。
そこで今回は私も利用しているTortoiseGitの紹介です。

環境構築にあたり、私のクライアント側の各ソフトのバージョンを記しておきます。

OS Windows 10 Professional 64bit
Git 2.17.0
TortoiseGit & Language Packs 2.6.0

度々必要となる正規表現、その都度webで検索しては流用するということを続けていましたが、精度は異なれ毎回異なるコードをもってきているようで気持ち悪かったので、自身のサイトでまとめて管理、検証していこうと思います。

以下、目的別に分けて随時更新していきます。

HTMLタグの削除

文字列からHTMLタグを除去する正規表現です。

str.replace(/<([^"'>]|"[^"]*"|'[^']*')*>/g,'');

少し前にWindowsのRubyでSassの環境を構築しました。
WindowsでRubyをインストールしてSassの環境を構築する
しばらく使ってみて、Sassで開発進めよう!という気にはなったのですが、手動でコマンドを実行しないといけない点や、ファイルごとにコマンドを実行する点、これを自動化できたらより作業が捗るだろうなと思い、Node.js + Atomの環境も試してみることにしました。

Atomは私が普段から使用しているエディタです。
Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。
「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。

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

  • Windows 10 Home 64bit
  • Node.js 8.9.4 64bit
  • Atom 1.23.3

個人で管理しているサイトの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

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

PHP 7.0.18
TwitterOAuth 0.7.4

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ファイルの品質を比較してみます。

PHP 7.0.18
FuelPHP 1.8

テストに利用するのは以下の横幅720px、縦幅480pxの画像です。

オリジナル画像 720x480 (173KB)

オリジナル画像 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

Monthly Archives