ども、むったんです！

 

湿気すごいですね（書いている日は雨＆ジメジメ…
湿気がすごいと髪の毛は爆発するし、不快指数MAXでコーディングスピードも落ちます。
だから1年の中でこの梅雨時期がすごく嫌い！
怠くて、動きたくない…って私は猫かwww

 

そんな怠さの中でもコーダーに求められるのは、早くて安定したコーディング(　･`ω･´)ｷﾘｯ

 

先日、大野さんと千ちゃんに「むったんはどうやって、ちょっぱやコーディングしてるの？」と聞かれました。
むったん、なんと答えたと思いますか？

 

 

 

「気力です！」

 

 

「それはダメでしょ」って苦笑されました。
ですよねー。
でも、気力なんだよなー…と思ったのですが、無意識にやっていることもあるかも！と思ったのでブログにまとめます。
最終的に「気力」が答えだったらごめんなさい_(-ω-`_)⌒)_ 笑

 

そもそも「ちょっぱや」とは

最近フツーに使ってましたが、「急いで」「早急に」という意味のギャル語です。
私が小学生くらいだったか…その頃に流行ったのですが、今では死語と言われてます。

 

今まであまり使わなかったのですが、ふとしたことがきっかけで使ってます(^^;

 

 

ちょっぱやコーディングの順序

実例があった方が分かりやすいと思うので、今回は弊社の会社HPをコーディングする程でお話しします。
※HTML, CSS, JavaScriptを使用する事とします。

 

流れとしては以下のような感じです。

1. カンプ、画像データの有無確認
2. 構造の確認（レスポンシブ）
3. アニメーションの確認（CSS or JavaScript）
4. チェック表作成
5. コーディング（PC）
6. コーディング（タブレット & スマートフォン）
7. デバック作業

 

1. カンプ、画像データの有無確認

まず、カンプデータと画像データの有無を確認します。
…と言っても、私の場合はザッとしか確認しないんですがねw
なぜならスワローにはちゃんゆか先輩というスーパーマーケター＆デザイナーがいるからです！

 

「コーディングよろしく！」の声と共に必要データを一式渡してくれるんですが、抜けが無いのです。
カンプデータはAdobe XDで作成されてて、共有してくれています。
なので、ページ数がどれくらいあって、足りないものは無いかを確認します。
同時に画像データとして扱う物をザックリ確認しておきます。

 

 

 

カンプデータを確認したら、次は画像データの有無を確認します。
先ほどカンプデータで確認した画像データが書き出されているか見ていきます。
※スワローではちゃんゆか先輩が必要な画像データの書き出しもやってくれます（＾人＾）ｱﾘｶﾞﾀﾔ〜

 

データ名と画像サイズを確認して問題がなければ、次の作業に移ります。
※画像サイズは実際に使うサイズより大きいと「表示スピードが遅くなるぜよ！」とGoogle Search Console等に怒られるので、レスポンシブを考慮したサイズに収めるのがポイント
※データ名に日本語や全角英数、半角大文字を使っていない事をチェック

 

2. 構造の確認（レスポンシブ）

PCサイズ、タブレットサイズ、スマートフォンサイズ等々…レスポンシブデザインの場合、どこがどのように変化するのかを確認します。
例えば、スワローサイトのトップページはこんな感じ。

 

 

ナビゲーションの表示が変わったり、寄せてるものが画面サイズいっぱいになったり…。
こういう物も事前に確認しておけば、それを踏まえてコーディングできます！
※ちゃんゆか先輩にはPCサイズとスマートフォンサイズのデザインを作ってもらっており、タブレットサイズはPCとスマホそれぞれの中間ぐらいのデザインで私がそれとなく組んでいます。

 

レスポンシブデザイン対応サイトを初めてやった頃は、上記のような確認もできず…コードの行ったり来たり。
無駄に時間がかかるわけです。
ちなみにこの時点で私はこんな事を考えています（´-`）.｡oO

 

 

3. アニメーションの確認（CSS or JavaScript）

構造の確認をしたら、次はどこにアニメーションをつけるか確認です。
ザッとまとめるとこんな感じ。

 

 

ナビゲーションはハンバーガーメニューで三本線がクロスして、ふわっと出てくる感じか…(´ヘ｀;)
CSSでできるなヾ(ヽ･∀･*)

 

COMPANY以下のテキストは表示領域に入ったら下から上にフェードインで、下のMOREを左から右へフェードインか…(´ヘ｀;)
しかもMOREをホバーしたら線が伸びるね…(´ヘ｀;)
表示領域に入ったら部分はJS対応でそれ以外はCSSで間に合うなヾ(ヽ･∀･*)

 

…みたいな脳内会議を私は開催しています。

 

4. チェック表作成

脳内でもいいし、紙になんとなーく上記みたいなのまとめられたら、次はチェック表を作成します。
私はGoogleスプレッドシートにこんな感じで作成しています。

 

 

ページ名（titleにあたる物）、ファイル名、階層、ザックリ進捗率、備考が一覧にしています。
これをやっておくと、ファイル名の命名に迷ったり、社長や上司からいきなり「進捗率はどれくらいだね？」って聞かれた時にすぐに答えられますww
そう、弊社社長はたまに「むっちゃん、進捗率どれくらい？」って聞いてきて、私はテンパるので「それならもう見せよう！」という社長対策だったり（笑）いや、進捗率確認してくれる人がいるってとてもありがたい事なんですよ！！！

 

進捗率が上がってくると「もう少し！」と気分が高まって、モチベーション維持にもなりますし。
※大きいサイトほどゴールが見えなくて、モチベめっちゃ下がる（むったん談）

 

5. コーディング（PC）

さて、あとはコーディングしていくのみ！！
私はザックリ箱（articleやsection、divとかとか）を作成してから、中身をぶち込むスタイルです。
こうする事で、閉じ忘れによる大事件やコーディング抜けを防いでます。

 

id名やclass名はある程度、ルールを決めておいた方が後から修正する時にもすごく良いです！
class名に迷った時はここを参考にしています。
CSSのクラス名を決めるときに使うリストを作りました

 

ちなみに英語ができない私は、Google Chromeの拡張機能「Translate Anywhere」でチャチャッと調べて命名の手助けをしてもらってます。
※このような辞書系ツールは70%くらいの信用で使っており、翻訳内容に違和感があったらネットの海を彷徨います…（英語できないけど、なぜかそういうことには反応できる謎

 

HTMLのコード以外（本文ですね！）は、基本的にXDのコピー機能で行なっているのでタイプミスも減っています。
該当部分をクリック選択して、ワンクリックコピーでペーストというラクさ！
XD様様です。

 

あ、そうそう私は1ページ毎にHTMLを全部作ってCSSやJSを作ります。
なのでHTMLを書きながら頭の中で、今どうなってる＆CSSでどうしたいができあがっています（これは慣れやなヽ(*´∀｀)ノ

 

 

下層ページは他ページと共通デザインという場合も出てくると思います。
その場合は構造の確認の時点でどのページが対象となり、どんなパターンが出てくるかを把握しておきます。
そうすると汎用性のあるコーディングができるので、時間の短縮にも繋がりますね！

 

6. コーディング（タブレット & スマートフォン）

では次に、タブレット＆スマートフォンサイズのCSSを作成していきます。
メディアクエリを使用しているので、基本的にPCサイズのCSSに上書きしていくスタイルですが…なるべくスマートに書いていく事が重要です。

 

ちなみに私はこんな形でCSSに記述していっています。

 

 

上記のようにすると、共通する物を3回も書かなくて済むし、記述し忘れによる崩れも防げるかな、と私は思ってます。

 

7. デバック作業

さぁさぁ！！ラスト作業でございまする(*´▽｀)ﾉﾉ
作ったものは最後まで責任を持って（と、いつも自分に言い聞かせてる 汗

 

主にチェックするのは以下の項目です。

• レイアウトの崩れ
• リンク切れ（もしくは別のページにリンクしていないか）
• お問い合わせフォームが動くか
• 誤字脱字の有無

 

そして、デバック対象OSとブラウザは主に以下のものを見ています（2019年5月現在）

• Mac – Google Chrome
• Mac – Safari
• Mac – Firefox
• Windows – IE11
• Windows – Edge
• iPhone – Safari
• iPhone – Google Chrome
• GALAXY – 標準ブラウザ
• GALAXY – Google Chrome
• MediaPad – 標準ブラウザ
• その他、GoogleChromeの検証やVirtual Boxを利用したりします

 

まず、1つ, 2つブラウザ確認した時点で、共通するミス（リンク切れや誤字脱字）は修正します。
そうする事で確認する項目は減りますからね！
※私の手元に来る前にちゃんゆか先輩が入念なチェックをしているので、誤字脱字は無いのですが…私のコピペミスの可能性があるのでよくチェックしますw

 

私はチェックする際に、Googleスプレットシートにリスト化してチェックしています。

 

まとめ

上記のような感じで、私はコーディングを行なっております。
やり方としてはいたって普通かもしれませんが、ミスを少なくすることが早くコーディングすることに繋がるのかな…と思っています。

 

あとは、気力ですねwww

 

「このサイトのコーディングは…2週間くらいですかね？」と、ざっくり目安を伝えて「え、そんな早くできるの？」と聞かれると「いけますね！（ウソウソ、本当は3週間は欲しいよ！）」と返事しつつ、自分のお尻に火をつけますw
そして最初の1週間で2/3程度を気力で終わらせ、残り1週間で息を切らせながら終わらせます。
…私、どんだけドMなのかしら(；·∀·)
ちなみに学生時代、夏休みの宿題は前半に終わらせて、後半は遊んだり、夏休み明けのテストに向けてテスト勉強に時間をあてる派でした。

 

 

 

 

いかがでしたでしょうか。
結論として気力説が有力な気もしますが、むったんは普段こんな感じでコーディングしています。

 

そろそろ次のコーディングが来そうなので、いつでもお尻に火をつけるぜ！体勢でいる今日この頃。
ではまたっ！