WEB/システム/IT技術ブログ

eclipseに代わるWeb統合開発環境として以前から「Brackets」を検討していのですが、思い切って乗り換える事にしました。
Brackets – A modern, open source code editor that understands web design.

eclipseは私がJavaプログラマだった頃から愛用していて、それに慣れていたということもあり、Web業界に入ってからも利用し続けていました。
しかし、jQuery、WordPress、HTML5、CSS3やSassなど新技術への対応がいまいちです。プラグインを入れたり、細かく設定すればよいのですが、それが面倒なこともあります。がんばった割には完全に機能させることができずに四苦八苦というこの頃でした。
そして何より動作が重い。やたらメモリを消費するので、最近のモバイルPCでの開発には向いていません。

そこで、以前から話題になっていた「Brackets」に注目していました。

IEやChromeなど一部ブラウザで、スタイルでフォントサイズをピクセルなどで指定すると、ブラウザの文字サイズ変更機能が効かなくなるという問題があります。解決策としては、フォントサイズをパーセントで指定すればよいのですが、構築の際に毎回「○○pxは何%だっけ?」と調べることが多いので、ここで一覧としてまとめてみます。

こちらでは以下の環境で検証した結果を一覧としています。

  • OSはWindows7 64bit Professional
  • IE8以上、Firefox最新版、Google Chrome最新版(IE6、IE7は切り捨て)
  • フォント指定は「メイリオ」

最近、WordPressで構築したサイトへのスパムが多くて困ってす。
多いもので一月に500件ほど送りつけられます。
そこでWordPressに標準でインストールされているプラグイン「Akismet」。これがスパム対策のプラグインであることは知っていたのですが、有料ということで導入を見送っていました。
仕方ない、少しお金がかかってでも。。と調べていたら、なんと無料でも導入できるようです!

最近よく耳にするようになったBootstrapをインストールしてみました。
Bootstrap

BootstrapはHTML、CSS、Javascriptをベースとしたフレームワークで、活用することでコーディング作業を軽減することができます。

これまで、クロスブラウザのために、reset cssやjQueryなどのベースライブラリが開発されてきましたが、こられのしくみをまとめて、パッケージ化したものと考えればイメージしやすいかもしれません。(jQueryについてはBootstrap導入に必須です)
Bootstrapを活用して開発を進めれば、レスポンシブ対応も可能で、iPhoneやAndroidのモバイル端末、iPadなどのタブレット用のサイト対応もコストを抑えることができます。

Windows上のXAMPPのローカル開発環境で、eclipseを使ったPHPプロジェクトのリモートデバッグ環境を構築します。

前提条件として、各々のバージョンは以下の通りで、既にインストール済みとします。

  • Windows 7 Professional 64bit
  • PHP 5.5.11
  • XAMPP 1.8.3
  • xDebug 2.2.3
  • eclipse 4.3

PHPとxDebugはXAMPPに含まれているものをそのまま活用するので、個別に用意する必要はありません。

高さが動的な要素について、そのエリアの上下(高さ)中央にテキストや画像を置きたい場合があります。

tableを使えば簡単に実装できますが、いくつか問題点があります。
そこで、「line-height」と「translateY」を利用した方法を紹介します。
しかしどれも万全とはいかないので、他に方法があればご教授いただけると大変助かります。

tableコーディングの問題点

容易な方法としては以下のようtableタグを使う方法がありますが、「テーブルコーディング」という言葉があるようにソースがあまりきれいではありません。

しばし、WordPressでページの引っ越しなどでページ単位でリダイレクトをかけたい場合があります。

リダイレクトさせたいページ毎に投稿を編集でJavaScriptなど記述してリダイレクトさせる方法もありますが、便利なプラグイン「Simple 301 Redirects」を発見したのでメモとして残します。

WordPress › Simple 301 Redirects « WordPress Plugins

WordPressカスタムフィールドプラグインの決定版「Advanced Custom Fields」(ACF)のご紹介です。

最近では開発コストの面からCMSをスクラッチでゼロから開発する事も少なくなりました。
一方で既存のフレームワークやCMSをカスタマイズする事が多くなってきたのですが、その中でもWordPressをベースにした案件が多いです。

WordPressを改造するにあたり、必須となるのが「カスタムフィールド」。今回はACFの導入方法とそのメリットについて検討します。

ACF { Advanced Custom Fields Plugin for WordPress

WordPressを含め、ブログサイトにソーシャルボタンは欠かせないツールとなりました。

メジャーなSNSボタンにはTwitter、はてなブックマーク、Facebook、Googleプラス、mixiなどのサービスがありますが、これらの技術仕様は全て異なるので、複数のボタンをブログに設置するにはそれなりの労力を必要とします。また、その機能は日々進化しており、予期なく仕様が変更されることもあるので、その管理は大変です。

そこで、これらの管理を一括できるWordPressのプラグインを探していたらありました。

「WP Social Bookmarking Light」
このプラグインを利用することで、先に述べたSNSボタンの他、数十種類ものサービスを管理画面から一元管理できます。

ホームページ制作においてダミー画像などを作成する場合がありますが、「placehold.it」を利用すると便利です。
Placehold.it – Quick and simple image placeholders

バナーなどがまだ確定していない状態でホームページをテストアップする場合に、PhotoshopやFireworksなどグラフィックソフトでダミー画像を作成することがあります。
ダミー画像が多い、サイズが様々、変更が多い時などは、その作業がめんどくさいです。

そんな時に「placehold.it」を利用すれば、コードを書くだけでダミー画像が生成できるので便利です。

Monthly Archives