float で並べた2つの要素の高さを揃える方法

2カラムレイアウトや3カラムレイアウトでdivでfloatするレイアウトを作成することが多いですよね。
また、レスポンシブルレイアウトに対応させるために、CSSで各要素を横並びしたりすることがよくあります。
そんな時に、背景色等の問題で高さを揃えたい時に使えるテクニックです。

親コンテンツに対してのCSS

親コンテンツには、

• min-height: 100%;
• overflow: hidden;

を指定しておく。

子コンテンツに対してのCSS

子コンテンツには、

• padding-bottom: 32767px;
• margin-bottom: -33767px;
• height: 100%;

を指定しておく。

Windows8でのメール設定

Windows8になって、ユーザーインターフェイスが大きく変わりました。ユーザーインターフェイスが大きく変わっただけでなく、メールソフトも大きく変わってしまいました。

いつも多くの方からご質問いただくWindows8でのメール設定についてまとめてみたいと思います。


Windows8に標準で搭載されているメールアプリは弊社を含め一般的に使用されているPOP3接続には対応していないようです。
つきましては、以下の2種類のどちらかの方法が必要になります。

※参考
http://www.microsoft.com/ja-jp/atlife/tips/windows/windows8/024/default.aspx

■outlook.comを介してPOP3接続を行う方法
-メリット
Windows8標準搭載のメールアプリと同様に使用する事が出来ます。
-デメリット
Outlook.comのアカウントを新たに取得する必要があります。これにより、お使いのPCの様々な情報をマイクロソフトへ提供することになってしまいます。
-具体的な設定方法
http://www.microsoft.com/ja-jp/atlife/tips/windows/windows8/024/01.aspx#2-1

■Windows8のデスクトップアプリ（Windows Liveメール又はOutlook13等）を利用する
-メリット
今までのWindowsと同じ操作感で利用できます。（従来のメールと同じ）
-デメリット
デスクトップアプリとなりますので、Windows LiveメールもしくはOutlook13をインストールする必要があります。
なお、Windows Liveメールはマイクロソフトが提供する無料のソフトとなっています。
outlook13につきましては、ExcelやWord等Microsoft Office がインストールされていれば入っていると思います。

-Windows Liveメールの詳細・インストールについては
http://windows.microsoft.com/ja-jp/windows-live/essentials-other#essentials=overviewother
インストール方法につきましてはこちらが分かりやすいと思います。
http://qa.nifty.com/cs/catalog/faq_nqa/qid_14631/1.htm

-Windows Liveメールでの設定方法
http://windows.microsoft.com/ja-jp/windows-live/essentials-other#essentials=mailother

流れとしてはクラウド化ということで、メールもサーバー上で保存して使う流れにしたいのだと思いますが、標準でPOP3が使えないというのは、PC初心者にとってどうなんでしょうかね。surface普及への布石とも言えるかもしれませんね。

iPad,iPhoneのカレンダーに祝日を表示

iPadやiPhoneは、MacやWindows、そしてiCloudと自動で同期してくれる機能が多く搭載されています。カレンダーアプリもその一つで、スケジュール管理に利用している方も多いと思います。

このカレンダーアプリですが、標準では祝日の表示がされていません。自分で祝日を登録されている方や、祝日を登録してくれるアプリをインストールされる方もいらっしゃると思いますが、実はもっと簡単に、あっという間に表示することが出来ます。

ということで、iPhoneやiPadの祝日の表示方法についてアップしておきます。

まずは、いかのアドレスにアクセスして下さい。
http://www.apple.com/downloads/macosx/calendars/japaneseholidaycalendar.html

といっても、上記のアドレスを間違いなく打ち込むのはちょっとって方は、Safariで
「Japanese Holiday Calendar」
を検索すると、検索結果上位に表示されます。

上記のページの「Download」をタップし、メッセージが表示されますので、「照会」をタップして、「完了」です。

その後、カレンダーアプリを見ると、祝日が表示されているはずです。
知らなかった方は、今すぐお試し下さい。

した事リスト

2013年がスタートしました。
『一年の計は元旦にあり！』
と、何かと目標や計画を立てる機会が多い時期ですが、いかがですか？

計画を立てるときに良くするのが、「ToDoリスト」の活用です。
ホームページ制作会社アクシーメディアステーションのスタッフも、数多くのホームページを制作させて頂いておりますので、ToDoリストを活用しようといままで何度かトライしてみましたが、実はなかなかうまくいきません。

ToDoリストは、「やりたいこと、するべき事をまとめたリスト」ですが、この「やりたいこと、するべき事」がくせ者なんです。あれもしよう、これもしようと、ついつい欲張ってTodoリストに詰め込んでしまうと、リストがどんどん溜まってしまって、大変な事になってしまいます。気ばかり焦って、なかなか成果が出なかったり、あれこれ手を出しすぎたりで、結局何をしたのか分からなくなってしまうことがあります。

そこで、「やりたいこと、するべき事をまとめたリスト」を作るのでは無く、「やったこと、終わったことをまとめたリスト」を作るようにしました。リストが増えていくと、達成感も味わえるし、仕事の流れが見えるようになってきます。あれこれ手を出しても、やったことを記録することで、続きをするときに、何から手をつければ良いか確認できるようになります。

この「した事リスト」は、具体的には、一般的なブログサイトを利用して書き込んでいます。もちろん、非公開にしていますが、ブログサイトは日付の管理がしやすいですし、どこでも書き込みが出来ます。モブログやスマートフォンにも対応しているものもありますし、無料で手軽に使えます。写真や画像を添付することも出来ますから、メモツールとしてかなり便利に使えるのです。

Web制作会社の業務は、内容が多岐にわたりますし、あらゆる業種のサイトを管理している為、さまざまな情報が存在します。メモ的に「した事リスト」をつけておくと、情報の整理にもつながりますので、効率的な管理が出来るわけです。

日記を付けようと思っている方も多いはず。日記の代わりに「した事リスト」をつけてみてはいかがでしょうか？文章にしなくても、箇条書きでした事をつけるだけでしたら簡単ですよね。

ホームページ上にTwitterのタイムラインを表示

Twitterは今では重要なコミュニケーションツールの一つとして定着してきました。また、Twitterは情報発信ツールとして利用されている方も多いと思います。

このTwitterのツイートをホームページやブログに公開することができます。Twitterをやっていない人にTwitterからの情報発信を閲覧してもらったり、新たなフォロアーの獲得が期待できます。

これは、Twitterのウィジット機能を利用して、ホームページやブログに貼り付けることで実現可能です。ツイートのほかに様々なタイムラインを表示できます。

プロフィールウィジェット

Twitterの最新のツイートを表示します。

検索ウィジェット

検索結果をリアルタイムに表示します。ライブイベントや生中継、会議、TV番組などや、最新のニュースを追うのに最適です。

お気に入りウィジェット

お気に入りに登録したツイートを表示できます。あなたがお気に入りとして登録したツイートをリアルタイムで取得し表示します。特定のツイートのみ表示するのに適しています。

リストウィジェット

お気に入りのユーザーをリストにまとめて、彼らのツイートをウィジェットで紹介できます。このウィジェットもツイートを選別して表示するのに適しています。


ウィジットの取得方法はこちらからどうぞ。

Word:mac2011でアウトライン表示・下書き表示の改行設定

ホームページ制作等で原稿を作成するときに、アウトラインプロセッサを使うと効率良く文章が作れることがあります。
アウトラインプロセッサとは、大まかな文章構成を決め、見出しを先に作っておいて、その見出し毎にブロック単位で記述を追加していけるもので、全体の構成がツリー表示され、全体の中での編集位置を把握しながら文章を追加していけるものです。
ブロック単位で階層構造を上下に移動させたり、位置を入れ替えたりすることが出来ますので、ホームページのページ構成を検討する際に便利です。

このアウトラインプロセッサ専用ソフトも数多く存在しますが、ホームページ制作時に原稿としてWord文書が支給される事が多いため、Wordのアウトラインプロセッサ機能を使っています。
ただ、使用の際、デフォルトでは改行位置が決まっていて、ウィンドウ幅まで文字を表示させたい場合、設定を変えなくてはいけません。
Windows用Wordの設定変更方法は、Webのあちこちに掲載されているのですが、mac版での情報が少ないため、まとめておきます。

メニューバーの【word】から【環境設定】を選択します。

環境設定ウィンドウが表示されますので、その中の【表示】をクリックします。

その中の【ウィンドウ】項目内にある、【ウィンドウ幅に合わせる】にチェックを入れて【OK】をクリックします。

改行がウィンドウ幅でされるようになります。

この「ウィンドウ幅に合わせる」オプションは、下書き表示とアウトライン表示の時のみ有効でそれ以外の表示モードでは、用紙設定に依存します。
ホームページの原稿を作成する場合に、wordのアウトラインモードを利用してみて下さい。

エスケープが必要な文字

Perlで文字の置き換えを行うのは非常に簡単ですが、特別な意味を持つ文字が含まれている場合、エスケープが必要になります。
エスケープとは、\(バックスラッシュ)もしくは¥(円マーク)をその文字の前につけて、特別な意味を無効にする事です。
以下、エスケープが必要な文字です。

¥ * + . ? { } ( ) [ ] ^ $ - | /

URLで使用する事の多い、「.」や「/」も含まれているため、ハマリがちです。

li,dt,ddで画像の上下の隙間を詰める方法

li,dt,ddで画像を並べる際に、画像の上下に隙間ができます。隙間無く表示させたいとき、marginやpaddingを0pxにしても詰まらないですよね。
そんな時には、以下の2つの方法があります。

imgにvertical-align:bottom;を指定する方法

li img, dt img dd,img {
    vertical-align: bottom;
}

font-sizeとline-heightを0pxにする方法

li, dt, dd {
    font-size: 0px;
    line-height: 0px;
}

htmlspecialcharsを使う

PHPでWebアプリケーションを開発するにあたり、htmlspecialcharsは非常によく使う関数です。Webページでは、タグに使用される文字、

< > & '

の様な文字をホームページ上に表示させるためには、

< > & "

と置き換える（エンコード）必要があります。その置き換えをしてくれるのが、htmlspecialchars関数です。

逆に、エンコードされた文字を元の文字に変換したい場合（デコード）に、phpのバージョンによって使える関数が違うため、はまってしまう事があります。

php5.2以上であれば、htmlspecialchars関数の逆を行ってくれる関数が用意されています。

htmlspecialcharas_decode関数

それ以下のバージョンを使用している場合は、

html_entity_decode("変換したい文字列", ENT_NOQUOTES)

を使う事で同等の事が可能です。

動的アドレスを静的アドレスへ変換

PHPやCGIでシステムを構築すると、URLに動的アドレスを入れる必要があります。
しかし、アドレスに「？」や「＆」が入るのが嫌な時があります。
そんな時には、.htaccessファイルを利用してアドレスを書き換える事が出来ます。

例えば、test.php?id=123をtestpage-123.htmlに書き換えたいとき、

RewriteEngine on
RewriteRule ^testpage-([0-9]+)¥.html$ test.php?id=$1

と記述すれば、testpage-123.htmlでアクセスが可能になります。

引数が2つ以上の場合、例えば、test.php?id=123&ct=456をtestpage-123_456.htmlに書き換えたい場合は、

RewriteEngine on
RewriteRule ^testpage-([0-9]+)_([0-9]+)¥.html$ test.php?id=$1&ct=$2

となるわけです。

これで、testpage-123_456.htmlでアクセスが可能になります。

sendmailのログ出力について

サーバー管理でsendmailのログをチェックするときに、怪しい配信等で細かに挙動をチェックしたいときがあります。

そんな時に、/var/log/maillogを確認するわけですが、実はこのログ出力の詳細レベルを変更することが出来ます。

sendmailの設定ファイル、sendmail.cfの中にあるconfLOG_LEVELがそれで、0〜98までが設定でき、通常は0〜15を設定します。16以上はデバッグで使用されます。

デフォルトでは9ですので、特に通常時は9のまま運用すれば良いですが、より細かな内容をチェックしたいときには、9以上を設定します。

sendmailの挙動がおかしい場合など、解決の糸口をつかむためにもお試し下さい。

ウィンドウの高さに合わせたブロック要素

CSSで高さ100%のブロック要素を作成したい場合、heightプロパティに対して100%の指定をしても反映されません。

これは、CSSの仕様で、親要素のheightに対しての割合で反映されるため、親要素に明示的にheightが指定されていない場合は、height:autoが継承されるようになっています。

ウィンドウの高さに合わせたブロック要素を作成したい場合、htmlタグとbodyタグのheightプロパティを100%と指定しておくことにより、height100%のdiv要素を作成することが出来ます。

Macでのインターネット共有

最近はWiFiにつなぐ機器を持ち歩く事が多くなりました。
iPhoneやiPad、そしてもちろんMacBookです。
ホテル等で有線LANが提供されている場合は、MacBookと有線LANを接続し、インターネット共有をONにする事で、MacBookをアクセスポイントとして利用する事が出来ます。

設定する箇所は、

• 共有する接続経路を「Ehternet」にする。
• 相手のコンピュータが使用するポートを「AirMac」にする。
• 「AirMacオプション」で、適当なネットワーク名（半角英数字）と、暗号化の設定をする。（しなければ電波の届くところなら誰でも接続出来てしまいますので、なるべく設定して下さい。）

で、簡単に利用する事が出来ます。

しかし、最近はWiFiのみ提供されている場合があり、有料の場合、WiFiに接続する機器毎に課金される事になりますので、コストがかかります。

そんな時、小型の無線LAN親機を利用すれば、解決出来ます。

MacBookで公衆無線LANに接続し、無線LAN親機のWANポートをMacBookのEthernetにつなぎます。

次に、インターネット共有設定を行うわけですが、ここで、MacBookのEthernet設定を変更しなくてはいけません。

設定する手順は、

• システム環境設定の「ネットワーク」よりEthernetの設定を開きます。
• IPv4の構成を手入力にし、IPアドレスは「192.168.2.1」サブネットマスク「255.255.255.0」に変更
• 「共有」から「インターネット共有」で、共有する接続経路を「AirMac」にする。
• 相手のコンピュータが使用するポートを「Ethernet」にする。

そして、無線LAN親機のWAN設定で、

• アドレス設定を手動にして、IPアドレスを「192.168.2.2」ネットマスク「255.255.255.0」ルータを「192.168.2.1」DNS「192.168.2.1」とする。

そうすることで、MacBookのAirMacのインターネット接続を、Ethernetポート経由の無線LAN親機をアクセスポイントとして、複数端末を同時にインターネットへ接続する事が可能です。

GDで日本語フォントの使用

PHPで開発を行う際、GDで日本語フォントを使う際に、注意しないと文字化けが起こります。
最近ではUTF-8が標準になりつつありますが、過去の資産や開発環境によって、日本語コードに、EUC、JIS、Shift-JISを使用しなければならない場合もあります。

GDの環境情報を取得する場合、

gd_info();

にて確認が出来ます。
その返値で、'JIS-mapped Japanese Font Support' が TRUE の場合は、GD側にてコード変換が行われますので、特に対処は必要ありませんが、FALSE の場合は、UTF-8 へ変換しなければ文字化けしてしまいます。

mb_convert_encording("[出力する文字列]", "UTF-8", "[使用日本語コード]");

PHPでのメモリ不足

PHPでプログラム作成時、プログラムが動作しないので、サーバーログを見ると

PHP Fatal error: Allowed memory size of xxxxxxx bytes exhausted

と、エラーを出力していました。
今回は、GDライブラリで画像加工を行っているため、メモリが必要になったのだと思われます。

PHPで割り当てメモリを増やす方法としては、

方法１）

php.iniのmemory_limitを増やして再起動

方法２）

該当スクリプトに、
ini_set("memory_limit","●●M");
と●●に増やしたいサイズを指定する。

の方法があります。

iPad(iPhone)でのtwitterのUI変更方法

TwitterをiPadやiPhoneからアクセスすると、UI（ユーザーインターフェース）がモバイル版になります。
モバイル版UIはシンプルな画面で見やすいのですが、登録されているメールアドレスを変更したいときや、非公開アカウントの場合に、フォローリクエストを承認しようとしても出来ません。
そんな時に、UIをパソコン版に変更する方法があるようです。

https://mobile.twitter.com/settings/change_ui

にアクセスすると、パソコン版のUIに変更されます。
モバイル版に戻したいときは、

https://mobile.twitter.com/

にアクセスすればOKです。
なお、Twitterサイトの仕様変更で使えなくなる可能性はあります。

PHPのmb_send_mail関数

PHPのmb_send_mail関数を使う場合、日本語が化けることがあります。
PHPスクリプトを書くエンコードに起因するのですが、対処方法は、

■文字コードEUC-JPで書いたスクリプトであれば、
mb_language("Japanese");
mb_internal_encoding("EUC-JP");
■SHIFT-JISで書いたスクリプトであれば、
mb_language("Japanese");
mb_internal_encoding ("SJIS");
■UFT-8で書いたスクリプトであれば、
mb_language("Japanese");
mb_internal_encoding("UTF-8");

をmb_send_mail関数を使う前に書いておけば良いようです。

let it snow

Googleで「let it snow」と検索すると雪が降ります。
しばらくすると窓ガラスの様に曇ってきます。
マウスでドラッグすると、曇を拭き取れます。
検索ボタンが、「Defrost」になって、クリックすると霜が取れます。

クライアント様からも、この時期になると、ホームページに雪を降らせて欲しいという依頼がちらほらと。
この数日、本当に寒い日が続いています。
本物の雪でも降り出しそうです。

spanのwidth指定について

SpanタグにWidthの指定を指定してはいけません。
SpanはInline要素ですから、Widthを設定するのはおかしいと言えます。
といってもDisplay設定でBlock要素にすればOKと言えますが、その場合は、SpanでなくDivを使えば良いわけですから、特殊な事例といえます。

とは、分かっていても、SpanにWidthをかけてIEで表示すると、指定の幅だけ空いてくれるわけです。
もちろん、これは、IEのバグといえるわけで、他のブラウザでは当然、隙間は空きません。

なるべく、ハックを使わず、共通のCSSで表現できるように考えるようにしていますが、IEとその他のブラウザとのCSS解釈の違いで、よくはまってしまいます。

pearコマンドが動かない時の復旧方法

久々にWebアプリの開発を古いサーバ行う事に。しかし、pearコマンドが動きません。

# pear upgrade-all
HTTP error, got response: HTTP/1.1 410 Gone
Didn't receive 200 OK from remote server. (HTTP/1.1 410 Gone)

いろいろ調べて復旧した記録を留めておきます。

PEAR - PHP Extension and Application Repository
の指示通りに、

pear upgrade --force http://pear.php.net/get/Archive_Tar　http://pear.php.net/get/XML_Parser　http://pear.php.net/get/Console_Getopt-1.2.2
pear upgrade --force http://pear.php.net/get/PEAR-1.3.3 (1.3.3より古いバージョンを使用している場合)
pear upgrade --force http://pear.php.net/get/PEAR-1.4.3.tar
pear upgrade PEAR

で最新版にアップグレードできるとのことでしたが、

File http://pear.php.net:80/Archive_Tar-1.3.1.tgz not valid ...

のエラーが出て、うまく行きません。
ですので、まずは、これを強制的にアップグレードしました。

# pear upgrade --force http://pear.php.net/get/Archive_Tar-1.3.1

その後、

pear upgrade --force http://pear.php.net/get/Archive_Tar http://pear.php.net/get/XML_Parser
pear upgrade --force http://pear.php.net/get/PEAR-1.4.3.tar
pear upgrade PEAR
pear upgrade-all

で、最新版へ復旧が完了しました。
なお、追加のパッケージを入れるときは、依存関係でエラーになる事があるので、

pear install --alldeps インストールパッケージ名

でインストールすると、関連ファイルも自動的にインストールされます。