皆様こんにちは。とろあ( @tohroa )です。

実は当ブログ「いるみお」は、もう少しで1周年を迎えます。

それに先駆けて、気合いを入れて数ヶ月前からコツコツと新しいブログテーマの考案・コーディングを開始してきました。

そして、昨日7月9日に、やっとスマホ側のテーマを反映することが出来ましたので、ご報告と簡単な紹介をしておこうと思います。

ポートレートとランドスケープの表示切り替え

まず、今回こだわったのがスマホを縦に持った時と、横に持った時のメニュー位置の切り替えです。

「こだわり」というよりも、「こんな感じで出来ないかな？」と思ったものを、実装したものなのですが。

まず、縦持ち時(ポートレート表示)が上図。

メニューは画面最下部に固定で表示しています。

続いて、画面を横にした際の表示。いわゆるランドスケープ表示です。

メニューを画面右側に固定表示しています。

ポートレート表示でも、ランドスケープ表示でも、ある程度スクロールすると、TOPボタン出てきます。タップ頂ければ、ページ最上部まで特急でご案内致します:)

上図は、Menuボタンをタップした時の表示です。

サブメニューが、画面下からにゅっと生えてきます。もう一度タップすると非表示に。

ランドスケープ表示時。

Searchボタン、Shareボタンも用意しており、それぞれタップした際には、サブメニューが切り替わるようになっています。

「こだわり」

とりあえず、サクッとした説明は以上です。

上の方で、「こだわり」と書きましたが、細かくいうと以下の2点を叶えるための実装になっています。

• ・メニューを手元に近い下部に固定したい
• ・縦、横持ち表示で画面の占有を抑えたい

1点目は読んで字のごとくです。

「下の方にあった方が押しやすいんじゃないかなぁ」っていう思い込みが、そもそものハジマリでした。

2点目は、1点目の思い込みを実装するにあたって、横持ちの時に「これ画面下にあったら…邪魔だな」という思いから。

「横持ちした時に、左右どちらかに固定出来たら、画面の占有率かわらないじゃん！！」というひらめきから実装まで出来たことには満足しています。特許でも申請しておこうと思います…ウソです。

実は4月頭から始めていたのですが、僕の中で決めていた、1周年までにという納期が危うくなり、慌てて対応している部分もあるので、ソースとかグチャグチャです:(

表示や動作がおかしいところがありましたら、ご指摘頂けましたら幸いです。

上記以外にも「こだわり」があったりするのですが、それはまた次回以降に細かく書いていきたいと思います。

本当はボタンとか、おしゃれなアイコンを使って表示したいんですが、今回は見送っています。追い追い変えて行きたいなぁ〜

あ、あとPC版も近々更新予定です！

余談ですが。

「こだわり」っていう言葉は、「変なことを、細かく気にする」みたいな、少しネガティブな言葉らしいです(*_*)

ちょっと前につけっぱなしていた何かのテレビ番組で言ってました。