ども〜、facebook乗っ取られ系エンジニア 中尾こと、 Hawk(と呼ばれたい) です。

いや〜、先日見事に乗っ取られまして、フレンドにメッセージが勝手に送られていたようで、多大なるご迷惑をおかけしました。
この場を借りて深く謝罪いたします。
(☝ ⊙ਊ ⊙)☝ モウシワケゴザイマエンデシタ!!!

さて、舛添 某東京都知事並みの全身全霊の謝罪をしたところで、早速本文に行きたいと思います!

今回、遅ればせながらスマートフォン版(以降、SP版)をリリースすることができました!
6/1にPC版をリリースした当初は、「エンジニアのブログなんだから、みんなPCで見るっしょwww SP?気が向いたらでいいYOwww」 と舐めておりました。。。
実際リリースしてみると、約半数がSPからのアクセス...

弊社のエンジニアからも 「SP版ないなんてありえなくない?」 「だから、あいつらモテないんだよ!」
と社内で陰口を叩かれる始末、、、
そんなこんなで、涙でキーボードを濡らしながら急ピッチでSP版をリリースいたしました!
そこで、今回SP版リリースにあたり気をつけたとことを書いていこうと思います!

通信量を考えてあげて!!!

皆さんは、スマホの月額通信量契約は何G契約にしてますか?
ちなみに、私の通信量は2Gです(泣)

私のようなデータ難民のためにSP版の通信量を抑えるような実装にしないといけませんよね?
PC版では背景動画を使っていましたが、こちらを gif動画 に変更しました!
もともとスマホ版にvideoタグで動画を埋め込み autoplay にしても自動再生できません。
また、動画を再生しようとタップすると機種によっては動画再生用のアプリが起動したりします。
つまり、そもそもが背景動画に適さないのです。
ですので、今回は gif動画 でお茶を濁しました(笑)
また、本ブログは画像を多く使用しているため、できるため画像の読み込みを減らそうと、PC版と異なるレイアウトにし、デザインに然程影響が出ない程度に画像を減らしております。

地味なことですが、ユーザーに優しいブログサイトを実装したつもりです。

端末ごとに見た目を変えないで!!!

SP版を実装するとき皆様はどの端末をベースに組みますか?
大半の人がiPhon6かiPhon5かと思います。
しかし、この2機種でも横幅が違います。
どちらかをデザイン通りに組むと、もう一方が妥協したデザインになりがちです。
そこで今回用いた方式が viewport を使う方式です。
SP版デザインが 640px とiPhon5サイズでしたので、ひとまずiPhon5用に実装。
その上で、SP版では下記のコードをheadタグ内に追記。

<meta content="width=320" name="viewport">

こうすることで、不思議なことにどんな横幅でもデザインの崩れが起きません。
(古い端末では起きるかも。。。。)
詳しい解説は 面倒臭いので いずれ行います!(多分)
ちなみに、viewportでSP対応する気満々の場合は、デザイン通り640pxの横幅で組んでviewportのみで調整するのも一つの手ですよ!

記事内のデザインもしっかりして!!!

実は地味にめんどくさかったのが、記事内のレイアウトです。
記事の投稿方式はPCと共通のため マークダウン方式 になっています。
railsのgemがマークダウンで入力されたものをよしなにHTML化してくれる優れものなんです!
しかしながら、便利なものには落とし穴が、、、
 
DOM構造を自由にイジれない!!!!!
 
これには、ほとほと頭を悩ませました。
さらに、もう一つ問題が!
SP版ですと、コードやテーブルはほぼ画面から溢れてしまうので、スクロールバーを表示しスクロールを促さなければいけません。
しかし、ブラウザによっては標準のスクロールバーだとデザインが当てられないんです(泣)
そのためPC版ではmCustomScrollbarというプラグインを使っております。
SP版もこれでいける!!! と思ってのですが、思わぬ落とし穴が、、、、
横スクロールできるDOMの上で縦スクロールしようとすると、横スクロールと干渉しあい、上手く動かない。。。。
なんてこった、、、ここまできて神はさらに試練を与えるというのか、、、
そこで神に逆らって考えた結果、 webkitでCSSをカスタマイズ する方法をとりました。
webkitとはsafariとchromeに対応している ベンダープレフィックス です。
SP版は大半のユーザーがsafariかchromeでブラウジングすることからこの方法をとりました。
「Androidブラウザのユーザーはどうなるんだ!!切り捨てる気か!!」
まぁ、頑張れ(笑)

最後に

なんやかんや、あってようやくSP版もリリースできましたし、一応体裁は保てたかと思います。
今後の展開もあるのですが、しばらくしっかり運用してみようかな、と思ってます。
そろそろ、面白ギミックとかいれたいな|ω・`)チラ

Shere
  • はてなブログ
  • Twitter
  • Facebook
徒然なるままにSPの開発秘話とかを語って見た(ディレクション&フロント編)

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。