シンプルな生活

June 7, 2011

スマートフォンサイトの作り方(1/8) - 概要

仕事でiPhone(Android)サイトを構築する機会があったので、実装方法についてメモしておきます。 構築条件としては「横幅固定レイアウトのPC向けサイトをスマートフォン用に最適化する」つまり「PC画面と同じHTMLを共有する」こと。 大まかな処理としては、以下になります。 スマートフォンサイト・・・» スマートフォンサイトの作り方(1/8) - 概要の続きを読む
June 7, 2011

スマートフォンサイトの作り方(2/8) - UserAgentの判定

スマートフォン端末の判定方法です。環境変数のUserAgentを判定します。UserAgentの判定はクライアントで行ってもサーバー側のどの言語で行っても良いのですが、JSとPHPの両方を書いておきます。 スマートフォンでない携帯端末であれば、キャリアのIPで判定を行うケースも多いのですが、スマート・・・» スマートフォンサイトの作り方(2/8) - UserAgentの判定の続きを読む
June 7, 2011

スマートフォンサイトの作り方(3/8) - 横幅の最適化

CSSによるリキッド化 PC版で固定レイアウトになっている箇所をスマートフォン専用のCSSでリキッドに変更します。 iPhoneの場合は固定レイアウトでも問題ありませんが、Androidの場合は端末ごとに横幅が異なるという事情もあります。また、固定レイアウトでデザインされた画面をAndroidで縦持・・・» スマートフォンサイトの作り方(3/8) - 横幅の最適化の続きを読む
June 7, 2011

スマートフォンサイトの作り方(4/8) - フォントサイズの最適化

スマートフォンサイトの作り方(4/8) - フォントサイズの最適化
スマートフォンでの文字サイズ スマートフォンの場合、PCのブラウザよりも画面が小さいわけですからそれなりに文字サイズも大きくする必要があります。 スマートフォンの画面解像度はPCよりも高いので、小さな文字もくっきりと移りますが、人間の視力でどの程度の大きさであれば可視性を保てるのか?というのが最終的・・・» スマートフォンサイトの作り方(4/8) - フォントサイズの最適化の続きを読む
June 7, 2011

スマートフォンサイトの作り方(5/8) - メニューデザインの最適化

スマートフォンサイトの作り方(5/8) - メニューデザインの最適化
メニュー画像をCSSで代替する スマートフォンの画面解像度(厳密にはスマートフォンに搭載されているブラウザの解像度)はほとんどのケースでWindowsやMac環境の72dpiよりも高くなっています。 そのため、PC向けに作成した72dpiの画像をスマートフォンで表示すると他のテキストやCSS描画要素・・・» スマートフォンサイトの作り方(5/8) - メニューデザインの最適化の続きを読む
June 7, 2011

スマートフォンサイトの作り方(6/8) - Viewportの設定

スマートフォンサイトの作り方(6/8) - Viewportの設定
問題児のViewport。いろんな端末でいろんな挙動を示すらしく、Viewportに何を指定するのか悩みました。 リキッドで横幅320pxをターゲットとしている場合 最低の横幅を320pxと想定して作成されたリキッドの画面であれば何も悩まずに以下を指定すればOKですね。 <meta name=・・・» スマートフォンサイトの作り方(6/8) - Viewportの設定の続きを読む
June 7, 2011

スマートフォンサイトの作り方(7/8) - アドレスバーを隠す処理

javaScriptでアドレスバーを隠す処理 iPhone、Android共通で、ブラウザのアドレスバーをjavaScriptで隠します。厳密には隠すというよりは、画面全体をアドレスバー分だけ下に移動する処理です。この処理により、アドレスバーが擬似的に非表示になってくれます。 function do・・・» スマートフォンサイトの作り方(7/8) - アドレスバーを隠す処理の続きを読む
June 7, 2011

スマートフォンサイトの作り方(8/8) - 入力フォームの最適化

スマートフォンサイトの作り方(8/8) - 入力フォームの最適化
数字用キーパッドの指定 PC画面の場合はさほど問題になりませんが、スマートフォンで入力値が数値の場合(郵便番号や電話番号など)には、数字入力用キーパッド(HTML5のinput type="number")を指定してあげるつユーザービリティーが向上します。 ただし、PC版のほとんどのブラウザではHT・・・» スマートフォンサイトの作り方(8/8) - 入力フォームの最適化の続きを読む
May 2, 2011

PHPでCSVを読み込むと文字化けする時の対処。

 PHPでCSVファイルを読み込んだ際、一部で文字化けする時は「fgetcsv()」を呼び出す前にPHPのローケートを設定するために、「setlocale(LC_ALL, 'ja_JP');」を記述すると解消します。 setlocale(LC_ALL, 'ja_JP');$xxx = fg・・・» PHPでCSVを読み込むと文字化けする時の対処。の続きを読む
March 30, 2011

MTで縦長横長の画像を判定する。

個人的にやろうと思ってやっていなかったMTで縦長と横長の画像を判定して、それぞれ別のサイズ指定で縮小表示させる方法。 <$mt:AssetProperty>にて画像の横幅と縦幅が取得できるので、その数値を比較して処理する流れです。意外に簡単ですね。 <mt:If tag="[カスタ・・・» MTで縦長横長の画像を判定する。の続きを読む
September 8, 2010

MT5でカスタムフィールドが表示されない。

MT4からMT5にアップグレードしたら、MT4で作成済みのブログ記事に関するカスタムフィールドが記事投稿画面に表示されないという事象が発生したので対処方法を記載しておきます。 MT4からMT5へのアップグレード方法はこちらから。 結論から言うと、「mt_plugindata」テーブルの「plugin・・・» MT5でカスタムフィールドが表示されない。の続きを読む
September 8, 2010

XREAでMT4からMT5へアップグレードする方法。

レンタルサーバーのXREAでMT4からMT5にアップグレードを実行しましたのでメモを残しておきます。 アップグレード自体は簡単でスムーズでした。念のため、バックアップを取りながら進める方法を記載しておきます。 MT5の新規インストール方法はこちらをご参照ください。 大まかな考えは、以下です。 MT4・・・» XREAでMT4からMT5へアップグレードする方法。の続きを読む
September 5, 2010

wuauclt.exeが重い。

wuauclt.exeが重い。
会社のXPがリブート後に重かったので、タスクマネージャーでプロセスを調べていたらwuauclt.exe(Windows or Microsoft Updateの履歴監視のプログラム)がメモリを喰っておりました。 XPの立ち上げで5分以上掛かってしまっています。立ち上げ直後はハードディスクにアクセスし・・・» wuauclt.exeが重い。の続きを読む
June 20, 2010

FireFox起動時のURLをショートカットごとに変更。

FireFox起動時のURLをショートカットごとに変更。
できるのは分かっているけど、なかなか面倒でやっていない機能のそのひとつ。 FireFox起動時にホームページに指定できるのは通常は1ページだけです。ただ、それだと作業効率が悪い場合があります。そこで、ForeFoxのショートカットをデスクトップに作成して、右クリック→プロパティー→で以下のように記述・・・» FireFox起動時のURLをショートカットごとに変更。の続きを読む
June 20, 2010

ベーシック認証のダイアログを表示しない方法。

ベーシック認証のダイアログを表示しない方法。
ベーシック(基本)認証が設置されているサイトにアクセスする際に、ID・PWを入力することなくアクセスする方法です。 http://個々にID:ここにパスワード@ここにURL/ URL内に認証ID・PWを埋め込んでおきます。開発者には便利な機能ですよね。これで、認証ダイアログが表示されずに、URLへア・・・» ベーシック認証のダイアログを表示しない方法。の続きを読む
June 15, 2010

デスクトップに作成されたスクラップブックを削除する。

デスクトップに作成されたスクラップブックを削除する。
Windowsのデスクトップに作成されたスクラップブックを削除する方法です。 普通にゴミ箱に入れられない場合やコマンドプロンプトで削除できない場合には、以下の方法で削除できました。 削除したいスクラップブックを右クリックしてプロパティーを選択 全般タブ内にある「場所: 」に記載してあるパスをコピー(・・・» デスクトップに作成されたスクラップブックを削除する。の続きを読む
May 26, 2010

手書き風日本語フォント

手書き風日本語フォント
昨今のWEBデザインで流行の手書き風。とは言え、自分で手書きするとスキャンする手間も掛かかりますよね。私の場合は手間よりも自分の書いた字の綺麗さに自信がないのですが。 http://www.abilitydesign.net/2010/05/post-231.htmlのコメントでご質問いただいたし、・・・» 手書き風日本語フォントの続きを読む
April 9, 2010

写真をジオラマ風に加工してくれるオンラインサービス

写真をジオラマ風に加工してくれるオンラインサービス
デジカメ等で撮影したjpg写真をジオラマ風に加工するオンラインサービスを発見しました。使い方は簡単です。 http://tiltshiftmaker.com/にアクセス 写真をアップロードし 設定値をスライダーで調整 なんだか病みつきになりそうです。・・・» 写真をジオラマ風に加工してくれるオンラインサービスの続きを読む
February 18, 2010

MTで「この記事を編集する」リンクを設置する。

MTで「この記事を編集する」リンクを設置する。
MTでサイトを構築するのは楽しいし、フルスクラッチでサイトを作りよりも簡単ですが、「記事を編集するのが大変」「特に管理画面で該当の記事を探すのが面倒」という方は多いと思います。私の場合は「bookmarklet」か「記事本内に [この記事を編集する] リンク」を設置する方法で対応しています。 boo・・・» MTで「この記事を編集する」リンクを設置する。の続きを読む
February 10, 2010

MTのファイルアップロード先を設定する。

MTのファイルアップロード先を設定する。
MovableType4.X以降のファイルアップロード機能は、画像等のファイルをアップロードするたびにアップロード先のディレクトリ(フォルダ)を指定しないといけないので手間が掛かります。ここでは、ファイルのアップロード先にデフォルト値を指定する方法をご紹介します。 ファイルのアップロードのデフォル・・・» MTのファイルアップロード先を設定する。の続きを読む
 1   2  全て »

育児日誌

千葉市動物公園へ。

千葉市動物公園へ。

お姉ちゃんになってきました。

お姉ちゃんになってきました。

パパ、パンどうぞ、ぱっぱりやめたー。

パパ、パンどうぞ、ぱっぱりやめたー。

Profile

シンプルな生活 - プロフィール

北欧家具が好きな千葉県鎌ケ谷市在住の三人家族。育児日誌をはじめ、シンプルな生活やシンプルな暮らしぶりをブログにしています。妻は靴職人(現在は育児で休業中)で夫はサラリーマン。「マイペース」「家族全員でよく笑う」をモットーに子育て奮闘中。小さな日常に沢山の喜びを感じられるあたたかい家族でありたいと思っています。