読者です 読者をやめる 読者になる 読者になる

Timers Tech Blog

カップル専用アプリ「Pairy」, 子育て夫婦アプリ「Famm」を運営している Timers inc. の公式Tech Blogです。

Timers Inc.のコーポレートサイトをリニューアルしました!

Web CSS JavaScript Sass ES6 WordPress

f:id:timers-tech:20151106150817p:plain

初めましてiOSエンジニアのかっくんです。
11月の頭にTimers Inc.にジョインしました。
これからよろしくお願いします。

入社したばかりですがコーポレートサイトのリニューアルを任されました。

iOSエンジニアなのにいきなり違う事やってますが、
前職ではウェブ開発がメインでiOSは自己学習や少しだけ受託開発という感じだったので経歴を上手く生かしてもらえたと思っています。

ベースとなるデザインは社長デザイナーの高橋に作ってもらいました。
デザインのデータは最近流行りのSketchを利用しています。
SketchはMac専用のアプリでMac App Storeでも配信されています。

f:id:timers-tech:20151106150559p:plain

このデータを受け取って僕がHTML/CSS/JavaScriptのコーディングを行いました。

CSSフレームワークはBootstrapベースのhonokaを利用しています。
また、CSSの作成にはCompassSassを利用しました。

Sassではファイル名がアンダースコアで始まるもの(例:_header.scss)はCSSファイルとして書き出さないという仕様があります。
これを利用してセクション毎にScssファイルを作成する事で後で修正が入ってもどのファイルを修正すれば良いのか明確になります。

JavaScriptjQueryをベースに、独自のファイルはES6で作成しBabelでコンパイルを行っています。
また、BrowserifyとBabelifyを利用してrequire構文・import構文が使える様にしています。

こちらもセクションや機能毎にファイルを作成してrequireで必要に応じて呼び出す様にしています。
最終的にUglifyで圧縮しているのでリクエストの節約と簡易な難読化が出来ているかと思います。

これらをGulpでwatchして都度コンパイルを行い、Browsersyncでリアルタイムにブラウザに反映されます。

一通りHTML/CSS/JavaScriptの実装が完了したらWordPressのテーマ作成を行いました。
基本的にはCodexを見ながら必要な機能を実装するのですが、
構築の際にコンテンツはなるべく管理画面から更新出来る様に意識しました。
その為、サービス・カルチャー・メンバーはカスタム投稿機能を利用して、
文言等はウィジェット機能で編集出来る様にしています。 更新頻度は多く無いかもしれませんが、細かい修正の為にわざわざテーマを編集しなくて済むので対応してよかったです。

リニューアル前は社員の追加・編集をする為にエンジニアが手を入れなければいけなかったのですが、
管理画面から出来る様になったので今後はちゃんと更新されていくはずです!
また、リニューアル前から話題だったツイートボタンの「キテ。」も健在です!

是非新しくなったTimers Inc.のコーポレートサイトを見に来て頂ければ嬉しいです!


子育て家族アプリFamm、カップル専用アプリPairyを運営する Timers inc. では、現在エンジニアを積極採用中!急成長中のサービスの技術の話を少しでも聞いてみたい方、スタートアップで働きたい方など、是非お気軽にご連絡ください! 採用HP : http://timers-inc.com