初めてのベースコーディングレポート【前編】

Posted on by

こんにちは！コーダーの小島です。
10月に入ってどんどん涼しくなってきましたね。特に朝と帰りの通勤時間はちょっと寒いなと常々感じております。このくらいちょうど良い気候はなかなかないのでできるだけ長く続いて欲しいです。

さて、今回初めてベースコーディングに挑戦したので、その様子を感想ベースで共有させていただければと思います。

1.Gitのリポジトリを作る

まずリポジトリの名前を決めます。基本的にサイトをリニューアルするときは現行しているサイトのURLを元に決めます。同じサーバーを使用しているサイトがある場合は一工夫必要なので要注意です！被らないよう命名規則に従ってリポジトリ名を決めていきます。

次にリポジトリの設定をしていきます。このとき”add gitignore”にチェックを入れておくと不要なファイルがGitにアップされずに済みます！この一手間で不要なファイルを削除する手間を省略させることができます。実は今回、初めにこの一手間をスキップしてしまった影響で不要なファイルが生成されてしまい、削除する手間が発生してしましました…
もっと効率よくコーディングを進めるためにも先輩方からどんどん新しい知識を学んで、次に活かしていきたいなと思います！

そして作ったリポジトリに会社のメンバーのアカウントを招待します。開発中のアカウントはプライベートモードになっているのでチームを招待しないと自分だけしかそのリポジトリで作業したり、更新したりすることができません。

Gitはチームで円滑にコーディングするためにとっても重要なツールだなと日々感じています。更新や運営をするときにも重宝するのでその元を作っているという意識をしっかり持って慎重に作業していきたいです！

2.チャットグループを作る

まずはそのサイトを作るチームの皆さんとコミュニケーションを取るためにチャットグループを作ります！弊社ではChatworkというコミュニケーションツールを使用してチームで協力をしてサイト制作に取り組んでいます。

チャットグループにチームのメンバーを招待したら、概要を入力していきます。本アップまでのざっくりとしたスケジュール、ディレクターさんがお客様と相談しながら作成したサイトマップのリンク、テストアップサーバーのサーバー、テストアップサイトのリンク、backlog（お客様とコミュニケーションを取ったり、どのようなサイトを作るかをまとめることが簡単にできるツール）で立てた課題（それぞれのプロジェクトごとに作ることができ、プロジェクトごとに情報をまとめたり、チャット機能を利用してコミュニケーションを取ることができる）のリンクなどを入力します。これをすることにより、各々がそれぞれ担当のページをスムーズに作成することができます。

余談ですが、チャットグループを作った人はチャットのアイコンを決めることができます！（時間に余裕がある時ですが…）サイトに関係のあるかわいいアイコンを見つけて設定することが密かな楽しみにもなっています。笑
デザイナーさんが作ったかわいいアイコンを見るとこんなにシンプルでかわいいのにひと目見ただけでなんのアイコンかわかるのは流石だなといつも感動します！

3.サイトの骨組みを作る

Gitとチャットの準備ができたらサイトの骨組みを作っていきます。
そのサイトがワードプレスで簡単に更新できるようにするか、ファイル納品（弊社でサーバーを用意せずにデータのみの納品をすることも稀にあります！）にするか、何の言語でコーディングするかを参考に以前弊社で作成したサイトを元に新しいサイトを作っていきます。

この参考にするサイトを見つけるという作業が意外と難しく、より効率良くベースコーディングに取り組むためにとても経験が必要な作業だと実感しました。初めてということもあり、今回は先輩方にアドバイスをいただいて元にするサイトを決めましたが、自分で広い視野で先読みをして自分の力で判断できるよう経験を培っていければと思います。

元にするサイトを決めたらそのデータを複製して元になったサイトの気配を消す作業に入ります。不要なデータを削除し、必要最低限の情報を残します。古いバージョンのプラグインがローカルに保存されている場合は最新の物をダウンロードし直し、差し替えます。日々アップデートされるプラグインをより良い状態で使うためです。ダウンロードしたプラグインを使うことでアップデートによるバグなどを防ぐこともできます。

サイトの骨組みを作る工程における一つ一つの心がけによってお客様が安心して運営できるサイトの基礎を固めるとても重要なポイントだと今回改めて認識いたしました！

4.サンプルページを作る①

骨組みを作ったら、実際のコーディングに入っていきます。今回私がベースコーディングに挑戦したサイトはファイル納品かつhtmlのみで作成するサイトだったのでイレギュラーな部分が多かったのですが、とても良い経験ができたなと感じています！

サンプルページを作る手順は前回の記事でも軽く触れたかと思いますが、まずはデザインから画像を書き出すことから始まります。その中で今回特に苦戦したのがストライプ模様の背景の素材を書き出すことです。
規則性のある画像は一部を切り取って反復させて表示させるやり方があるのですが、その反復させる画像の書き出しに苦戦しました。いつものように画像を書き出すと画像の周りに余白ができてしまい綺麗なストライプにならないという現象が起きてしまいました。
選択範囲を利用してクリッピングマスクを作成していたことが原因で、オブジェクトを使用してクリッピングしたところ余白のない綺麗な画像を書き出すことができました。一つのやり方に固執せず、場合によって柔軟に対応できるようPhotoshopの知識の幅も広げていきたいなと思います！

画像が書き出せたらまずはheaderとfooterを作っていきます。今回はheaderが途中まで表示されて消えるというUIだったのでユーザーが使用したときに心地よいスピード感になるようJavaScriptを使用して調整しました。速すぎず遅すぎない心地よいスピード感が身につけられるよう色々なサイトを見て研究していきたいです。

また元にしたサイトがPHPで記述されていたのでheaderとfooterの記述を直接書き直し、htmlでも表示されるよう工夫しました。
headerとfooterを作ることができたらサンプルページの中身を作っていきます。

その詳細は来月のブログで書かせていただきたいと思いますので、どうぞよろしくお願いいたします！

初めてのベースコーディングレポート【前編】　まとめ

今回は私の初めてのベースコーディングについて共有させていただきました。
先輩方にご教授いただきながら挑戦する中でより良いサイトの開発をするための工夫やその先の運営への配慮を知り、とても勉強になりました。
弊社では長く運営できるだけでなく細かいUIにも配慮し、離脱率の低いサイトを作成しています。少しでもご興味をお持ちの方はお気軽にご相談ください！

ご相談はこちらから↓
https://www.medical-design.co.jp/contact/

This entry was posted in コーディング. Bookmark the permalink.