スマホの画面を作ってみて　可変対応とかハンバーガーメニューとか

こんばんは。

今関わってるサービスがスマホとPC両方なので必然的に両方の、
かつ、IE7,8対応まで迫られるという感じで。
Androidも確か結構変なのに対応が必要w
結構めちゃくちゃだと思いつつもなんとか6末にはリニューアルを。。

そんなこんなで、始めてスマホサイト(まあ、ネイティブアプリではないけど)に関わって、学んだ事をちょこちょこと。

PCの古いブラウザ対応もしつつだから、自分の中での許容範囲は結構広くなったんじゃないかと思うよ。

PCの横並びはfloat使うけど、スマホじゃあdisplay: box;とか。
ちょっと後でboxに関してもまとめておこう。

後はアニメーション部分。
スマホの場合はcss3使えるから結構綺麗に動く。
jsだとどうしてもカクッってなってしまう。。。

スマホは画面サイズがまちまちだから、基本的には固定幅NGだとおもう。

デザインがRetina対応というか、スマホは画質が良いからその辺りも考えないとね。
実際実機で表示して確認しないと、Photoshop上とはまた違うから。
それでデザイナーさんから後で修正とかきたりしたし。
まだまだスマホ対応に特化した人ってすくないのかなー。。

書きたい事はたくさんあるけど、メインに！ つぎね！

おまちかねの、ハンバーガーメニュー実装(スマホnotネイティブアプリ)

おなじみのハンバーガーメニュー(今もこの呼び方？w)

参考サイト

このサイトの方は本当すごいと思うなあ。よく見つけたなあと。

参考はこれなんだけど、今回元々ある程度他のエンジニアさんがくんでくれてて。それに組み込むのがなかなかこのタイミングでできないので、考え方を変えてみたよ。

私は私のレベルで。
正直綺麗な書き方じゃないとは思う。
結構無理矢理感が否めないので。。。

でも、こんなやり方もあるんだな程度に思っていただければ。
後は自分の備忘録と復習がてら。

まず、作りたかったのがfbのアプリ版の右上ボタンをクリックした時のようなやつ。

メニュー部分が右からニュルっと出るやつです。

で、今回私が悩んだのがそのニュルの部分ではなくて、
メニュー部分を立てスクロールした時にメインのコンテンツも一緒にスクロールしちゃう、、、ってやつ。

ちなみに、スライドのやり方も簡単に書くと、元々divかなんかでかこって作っておいて、hiddenで隠しておくと良いみたい。 で、right: -299px;みたいな感じでね。

これに関してはこちらとかが分かりやすいかな。

結局、どのサイトに書いてある事もやり方はこんな感じで。

話を戻すと、その両方スクロールしちゃう現象って普通に実装するとそうなってしまうモノで。プラスαの工夫をしなきゃだめみたい。

私がやったのは
* bodyとhtmlにheight: 100%;,overflow: hidden;
ちなみにこれで高さが画面いっぱいになるよ。

  • メインコンテンツの方にはJavaScriptのnoScrollを使って、スマホ特有のタッチイベントでスクロールできないようにしたよ。

// 禁止
$('#hoge').on('touchmove.noScroll', function(e) { e.preventDefault(); });

// 解除
$('#hoge').off('.noScroll');

結構有名みたいね。preventDefaultは特に。
今回の案件でも結構使ってる。

これで、見た目的にはfbさんと同じ。一応ね。

どうなのかは分からないけど、一応実装できました！

表示画像部分の、可変対応をしてみた。

こんにちは。
最初の仕様詰めが甘いと、色々やってくうちにあれ？あれあれ？
みたいな事がたくさん出てきて。

最近は、その対応に追われてる。
まあ、最初から全部考えつくとか無理だし、学んだ。

で、そこでやってる対応。

今回記事投稿がメインだから、投稿された画像が表示される部分があって。
もちろん全部がフロントの処理という訳ではないからまあ、参考程度に。
やりたい事としては、ユーザーさんがどんなサイズの画像を投稿してきても、 画像を当てはめたい場所にぴったり当てはめるってこと。

小さいサイズの時は、リサイズとかせずに表示場所の中心におく。
逆に大きすぎるときは横幅縮小して、縦幅は自動で。

そんなこんなで、ソースは下記です。 ちなみに、ダミー画像作成時はこちらを使用させていただきました。
今回始めて使った物なんだけど便利だよ。
ダミー画像作成参考サイト

See the Pen QbEbZg by megumin (@megumin23) on CodePen.

ちょー簡単だけど、本当可変は便利。

cssだけで三点リーダーを実装　スマホ用だよん

今回関わっているサービスはスマホ対応があって。
最近技術的な事あんまりかけてなかったから。

参考サイト様

結局、有名なtext-overflow: ellipsis;を使えばよくて。

ただ、今回学んだのは幅を固定しないでいけるってこと。
width: 100%;で端末によって幅が違っても、maxまで文字が入ってくれる。

See the Pen doMyQz by megumin (@megumin23) on CodePen.

ちょっっと例が雑なきもするけど、言いたかったのはこういう事。

フロントエンジニアの立ち位置とか、立ち振る舞いとか？

こんばんは。
だらだらとご飯つくって、アニメ見ていたらこんな時間。

今日は、仕事してて思ったフロントとしての他のポジションの人たちとの関わりとかとか。

仕事の流れとしては、 * 仕様書の確認(仕様が口頭のときはなし) * デザインがあればそれと照らし合わせて
* 作ります！

まあ、当たり前の流れで。

ただね、やっぱりその間に色んな事考える訳です。
例えば、動的なサイトな訳で、開発側にデータを組み込んでもらわなきゃいけない。
もちろん、HTMLを使いやすくくむってのは考えてる。
単純にマークアップ側でも、メンテナンスしやすいようにとも考えるけど。。
動的にデータが入ってるとこはこーやったらいいかなーみたいな。
あくまで、みたいな。の状態なんだけど。

後は、途中で仕様が変更になった時のもろもろ。
開発側に一旦マークアップのファイル渡した後だったりすると、
変に組み替えたりできないし、cssの調整くらいで終わらせたかったり。
この辺りが慣れてないから、手こずった。

あとは、ディレクターさん、デザイナーさんとかそもそも技術的な用語が分からない人に
説明する時の説明方法がなっかなか難しい。
普段から、技術者ばっかと話してるからカタカナを多用する癖が。
相手がどのくらい分かってるのか、どのくらい理解してもらわないと話が進まないか見極めて、
説明している。

ディレクターさんと、ここどうしようか？
みたいな時もある。最適解を見つけたいけど、、、まだまだ知識が少なくてうまくいかず。
自分で決断して、判断する事も必要だと思うしね。

開発側にはファイルの受け渡しが今回結構ミスってしまった。。。
何がどう必要なのか、確認すべきだったなあ。
画像とかSplite画像だから名前とか変なやつだし。
そのあたり、sass分かってくれる人ならもう少しらくだったかなと笑

デザイナーさんとは、まあとにかくきたデザインそのままマークアップに起こすしかないね。
実機で確認して、ちょっとfont小さい？余白狭くない？みたいな相談したり。
一応自分でもデザイン勉強してるから知識的にはここは困る事はなかったかと。

あと、1ヶ月弱のリリースに向けて頑張ります！

最近の勉強法　フロントエンジニアっぽいこととかね。

こんばんは。
こんな幼い文章でも、読んでくれている人がいるみたいで。
何か、お役に立てればとおもって、今日も書いてみる。

そんなエンジニア1年目さんのあれこれ。

最近の勉強法？としては。
まずはやっぱりRSSよんでるかなあ。
それよりも最近はざっくばらんにQiitaの記事読んでみたり、
はてぶのやつジャンル問わず読んでみたり。

Feedly使ってはいるけど、
前ほど読まなきゃ！みたいな感じではない。

メインで勉強してるのは、やぱりJavaScriptだな。
ライブラリもたくさんあるし、フロントとして外せないよね。
世の中的にも。
Reactが気になってるけど、ちょっと大規模なので有効ってのをみてそこまで、追えていないw
どっちかというと、ちょっと古いかもだけどAngularとかの方が、直近使うかなみたいな。何てったって、初心者なので。

そもそもJavaScriptとはなんぞや。
って部分から勉強してるよ。
そんな時に役に立つのは、

JavaScript 第6版

JavaScript 第6版

この子です。

言わずと知れた、この本。
正直さ、ネット上に基本中の基本はたくさん載ってるけど。
それより基本が知りたいというか。
その背景も知りたいというか。
ちょっと分厚めという人もいるけど、詳しくて、頼れる。
後は、ちょっと古いのかな。

他に利用してるのが、こんなのとかgitで他人のソースを読んでみたりとか、書き写してみたりとか。

ライブラリ系のはちょっと癖があったりして、正直まだ読み込めないし、理解不能フラグも。。。

結局、何か作ってみたりしないと知識バッか増えるようで、
結局たまってないからねw

という事で、最近はwordpressを使ってサイトの構築はじめました！(中華そばはじめましたみたいw)

まだ、ローカルにしか作成してないかつ、練習用の超シンプルなやつなので、、、お恥ずかしながら見せられませんが。

乞うご期待。

一年前にもWordPressは頑張ってて、その時は全く作れなかったのに、ローカルに環境が作れて、カスタマイズできるようになぜかなっていてw成長を実感。

最後に、でも結局一番やってるのは新しいアプリ(海外の)を入れてみて、動きとか諸々みて。楽しいし、活かせる。アプリも絶対作れるようになりたいし。

では。

wordpressのサイト作成をしてみたよよ

こんばんは。
ちょっと、ずっと１人でサイト構築をしたくて。
この業界にいるとやっぱりWP触れないって致命傷な気がしてね。

 

やってみましたよ。
思ったよりも時間はかかってしまったけど。

 

一旦ローカルに構築という事で、私はMacなので必要な物としては

* MAMP
* SublimeText
* wpをダウンロード、解凍したもの

 

これのみ！
結構色々調べたけど、構築自体はおそらくそんなに難しくないような。
MAMPはインストール→Apachの場所を解凍したwpの存在する場所にするくらい。

こちらのサイトさんを参考にさせていただきました

MAMPを使ってローカル環境にWordPressをインストールする方法

 

Sublimeの使い方はまあ、単なるテキストエディタなのでおいといて、
こちらのサイトにも記載されてるDBの作成はしないといけない。

wp-config.phpの修正は必要だよ。
ただ、テキストエディタからじゃなくて、そのままインストールしていけば手順の中にでてきてくれるみたい。

phpMyAdminとか使えなくたって平気！

 

案外初心者でも、インストールまでならいけちゃうよ。
あたりまえか笑

 

次はカスタムする時の事に関して書きます。