CMSでプロフィールページを生成するシステムを構築する機会があり、PHPで生年月日から年齢を求める方法を探していました。
当たり前の事ですが、ロジカル的な話をすると、生年月日は月日が経っても変わりませんが、年齢は増えてゆくので動的でなければいけません。
当初は年齢を直接入力する仕様でしたが、そうすると誕生日をむかえるたびに編集しなければならないので、入力項目から除外し生年月日から動的に計算する仕様に変更しました。
ちょうどその時、Wikipediaの人物ページにある「生年月日」と「年齢」を見ながら「そういえばこの「年齢」って自動的に更新されてるのかな」なんてなんとなく眺めていたりしました。そんなタイミングと重なって、仕様変更を提案するに至ったわけです。
「ページトップへ」のボタンを押した時に、縦スクロールしてページのトップまで戻るjQueryのライブラリを、以前に紹介しましたが、今回はよりシンプルにjQueryのみで実装する方法です。
前回は「ScrollTo」というライブラリを使用した方法でしたが、もうだいぶ古い情報なので、他に方法はないかと調べていたところ、何のことはない、ライブラリは不必要なのです。
あの頃は私もjQuery 1年生だったので、何でもかんでもライブラリを引っ張ってきていました。今は最低限の知識は得たつもりですが、その程度で十分に実装可能です。
方法はとても簡単です。「ページTOPへ」のクリックイベントに対して、以下のJSを組み込むだけです。
CSSのフォント指定で「Helvetica」を指定した際に、そのサイトをIEで表示できないという致命的なバグがあるようです。
普段、IEなんて使いませんが、たまたまある案件でIEを使用する事がありました。いろんなサイトを何となく閲覧してまわっていたのですが、とあるサイトが表示されないという問題にぶつかりました。
例えば以下のサイトが閲覧できません。
恵比寿 美容室|HELVETICA hair
※あくまで1例です。個人的にもお仕事的にも関連はございません。
「。。。の表示中に問題が発生したため、Internet Explorer は互換表示を使用して Web ページを更新しました。」
というエラーメッセージが表示され、背景や一部画像は表示されますが、テキスト文字は一切表示されません。
いろいろと原因を探していたところ以下の記事がヒットしました。
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ | Oxy notes
また、たまたまはてなブックマークサイトを見ていたら同件の記事をみかけました。
IE9, IE10が抱えるHelvetica問題について初めて知った件 | IDEA*IDEA
レスポンシブWebは、PCやスマフォなどモバイル端末の見栄えを、1ソース（同一HTMLファイル）で最適化しようという最近注目の技術です。
つまり、PC用サイトと、スマフォ用サイトを別々に構築する方法がありますが、レスポンシブWebでは1ソースで管理し、CSSで見た目の最適化を図ろうということです。
海外サイトではよくみられますが、最近では日本のサイトでもみかけますね。
以下、参考までに、レスポンシブWebサイトをまとめたサイトです。
http://mediaqueri.es/
このレスポンシブWebを作成するのに有効なJSライブラリ「mediaqueries.js」と「Respond.js」のお話です。
ソフトバンクからauにMNPで乗り換えてから約半年が経ちますが、早くもスマホが故障してしまいました。
正確にはメーカーに故障とはみなされていないようなので「不具合」ですかね。
そもそも、乗り換え当初から不具合は発生していたのですが、その経緯を今後のためにメモとして残しておきたいと思います。
私の購入した機種はauの「AQUOS PHONE SERIE ISW16SH」です。当時は発売したばかりの機種でした。
購入してしばらく使っていると、不意に再起動するという不具合が発生。また、ブラウザなどアプリが使用中にいきなり落ちる。
ネットで調べてみると一部ユーザで同様の現象が起こっている様子。どうも同機種の中でも当たりはずれがあるようです。
まあ、スマートフォン、特にAndroid端末は発売からしばらくの不具合はつきものという話をよく聞くので、その後のアップデートなどで改善することに期待していました。
実際にauショップに何度か相談に行きましたが、ショップの方はまったく判断できないようす。他のキャリアもそうかもしれませんが、スマホになってから、不具合などはメーカーしか判断できないケースが多く、ショップでは扱ってくれないことが多いようです。
店員さんからも、現在故障相談が込み合っているので、メーカーに渡すとなると、最悪1か月ぐらい処理にかかる可能性があるということだったので、やはりしばらく様子をみることにしました。
スマホサイト制作において役に立ちそうなツールを見つけたのでご紹介します。
クロスブラウザテスト、携帯シミュレータ | Adobe Edge Inspect
Webサイト制作のコストとして、クロスブラウジングというものがあります。
作成したWebサイトがいかなるOS、ブラウザ上でも同等のコンテンツを提供できているか保障しなければなりません。（厳密に全く同じように見えているのかという事ではなく、同等のコンテンツ内容を提供できているかというのがポイント。）
最近ではスマートフォンの普及が加速し、これらの端末でもきちんとWebが表示するように制作時には設計する必要があります。スマホの種類も日々急速に増え続けているので、その確認作業コストは増加傾向にあります。
スライドショーやアコーディオンメニューなどのアニメーションをjQueryベースに構築することも一般的になりました。一昔前は簡易的なアニメーションもFlashで構築していましたが、徐々に、そして確実にJSに移行しています。
jQueryはクロスブラウザ対策を目的に導入されることもあります。しかし、複雑なアニメーションなどを構築する場合に、IE8では問題が発生することがあります。
そこで、IE8の問題とその対策手段をまとめてみたいと思います。
iPhoneやAndroidのブラウザでサイトにアクセスした際に、ファーストビューでヘッダ部分にページURLなどの情報を持ったアドレスバーが表示されたままになります。
上の写真のようにヘッダにアドレスが表示された状態になっていますね。
この状態からフリックして画面を下にスクロールすると、アドレスバーは消えます。
スマートフォンは画面サイズが小さく、その限られたスペースにアドレスバーが居座るのを嫌うユーザもいます。特にデザイナは、ファーストビューでそのサイトデザインとは関係のないアドレスバーがヘッダに表示されるのはあまり気分が良くないようです。
ソフトバンクからauにMNPで乗り換えてから約半年が経ちます。
MNPに至った経緯はこちらより
ソフトバンクからauに乗り換えました(MNP)
J-PHONE、vodafone、ソフトバンクと看板は何度か変わりましたが、10年以上使用し続けた後の初めてのキャリア変更。
そんな私が単純にソフトバンクとauを比較した個人的な感想を書きたいと思います。
ここで、携帯のキャリアの話題については何だか派閥のようなもので、よく友人同士で自慢大会や欠点の指摘し合いになりがちです。
しかし、最初にことわっておきますが、個人的にはどちらも応援していませんし、ネガティブキャンペーンもするつもりはありません。なるべく中立的に、率直な感想を書きたいと思います。
先日、知人から「運営しているサイトへのアクセスが突然ゼロになった！」ということで、その原因を調べてほしいとの相談がありました。
まず原因を調べるにあたり、これまでのアクセス状況を聞きました。
これがある日、突然ページビューがゼロになったそうです。（正確には日に1～3アクセスがあったりなかったり）