目次
まえがき
今月も始まりました、このお時間。今回は苦難の地図コーディング編です。
だいぶ苦戦したので色々思い出しながらお話ししていきます。コーディング以外のことにも触れていくため、みなさんも楽しみながら読んでいただければと思います。
最後の研修
今月はとにかく濃かったですが、まずはこのお話から。
長きに渡ってお話ししてきた新入社員研修の最後の回がありました。
この研修、距離が遠かったのもあって疲労はありましたが、同期で揃って活動する時間としても、他社の同期と話す機会としても、とても良い時間でした。
最後の回は、研修らしい内容は少なく、振り返りワークをしつつコミュニケーションを主とした内容でした。
社会人としてのスキルもたくさん学びましたし、講師の方とも色々なお話ができてとても良かったです。
自分を客観視する大切さ
研修を通して学んだ”社会人コミュニケーション”というものは、仕事だけでなく、普段の生活にも強く紐付いています。
自分にとって都合の良い意思だけを伝えたり、コミュニケーションエラーや失敗が起きた時「相手が悪い」と決めつけて、お互いに寄り添おうとしなかったり...そういったコミュニケーションは子供によくありがちですよね。小さい子たちはたくさん喧嘩しますし。
つまり、大人と呼ばれる我々は、それらを正しく導いていく必要があります。
その上で、まずは自分達が"今のコミュニケーション大丈夫だったかな"と常に疑問と模索を続けることが大切です。
あまりこういう事を書くのは・・・と思いつつも、大切な事なのでストレートにお話ししますが、こういう大人のコミュニケーションは想像の何十倍も難しい話です。
そのため、できていない大人が大多数だと思います。もちろん僕もできているという自信はありません。ですから、僕はできている気にはならないようにしています。
「自分の伝えたかったことがちゃんと破綻せずに伝わったかな？」「伝え方間違っていなかったかな？」と考え続ける事を継続し、コミュニケーションをとった後も「もっといい伝え方、言葉選びはあったんじゃなかったか？」と考え続けることが大切です。
より良いコミュニケーションを図るために
突然ですがここで僕の好きな名言を少し紹介します。
- ステージに上がったとき、自分が一番上手いと思え。ステージを降りているとき、自分は一番下手だと思え。
ーエリック・クラプトン
少し大それている内容に見えるかもしれませんが、いかなる場面でもこういう感覚や考え方を大事にしています。
発言する時とか、こちら側主体でコミュニケーションをとる時は「こう考えた自分の意見を聞いてくれ！」と自信を持って伝えようとします。が、発言が終わったり、発言の途中などで指摘があり"一度でもステージを降りたら"より良いコミュニケーションを図るために俯瞰して考えるようにしたり、今の発言を振り返ったりしています。
結局のところ、物事の本質は自分の発言を通すことではなく、ある目標を実現させるためで、そのためにコミュニケーションをとるということです。
そんな風にできる人がかっこいい大人なのかなと思います。
日々の生活と業務
自分の活動とのバランス
入社して半年ほどが過ぎました。2024年は、入社前から目まぐるしい日々が続いて、振り返ると充実した毎日でした。
そんなこんなで半年を駆け抜け、今年も残すところあと少しとなり、時間の流れの早さをひしひしと感じています。
そんな日々の生活と業務について、よく聞かれることを、ここでもお話ししておこうかなと思います。
まず、僕は一人暮らしで家事などもしながら個人の創作活動をしながら生活しています。そのため、意外と毎日忙しなく生きています。8月までは自分のイベントもあり、10月や12月もイベント各所にご招待いただき、お仕事していました。
普段の業務、活動、生活・・・と、てんやわんやで、途中で大きく体調を崩していました。
季節の変わり目ということもありますが、最近の日本はおかしいです。この気候変動で通常運転できる人は人造人間か何かです。
食生活も買い出しに行く時間がないと崩れがちで、最近美味しいものを食べたな〜みたいなことは少ないです。この頃は、燃料補給のために摂取している感覚が近く、「食べたいものは何？」と聞かれても「うー...ん」ってなったりするのかな、と（聞かれることがないのでわかりませんが）。
実はこういう生活はかれこれ3年目で、一人暮らしクリエイターはこれが普通になるのかもしれません。
毎日の朝礼終礼での気づき
そんな中で日々の業務にあたっているのですが、ここ3ヶ月くらい続けている朝礼・終礼の文化が自分のチームにはあります。
朝と夕方に、今日の予定や業務の進捗を共有していて、個人的にすごい良いなと感じています。
この朝礼・終礼が無い頃は、1日で言葉を発するのが独り言しかないという寂しい人でした。話したとしても店員さんくらいで、会話はあまり発生していませんでした。
それに、1日で何をやったかを再確認することでレポートなども書きやすくなり、明日何をやるのかも明確で、やりやすいなと感じています。
新人なので、どう相談すれば良いかな？とか、コミュニケーションのきっかけを作るのが苦手な自分としては、とても良いシステムだなと感じています。
あとは、貴重なフィードバックをもらうこともできます。
この月刊レポートでお話しできそうなことがあったら、またこのような内容も書いていこうと思います。
苦難の地図コーディング開始！
さぁ、前回に引き続き、今度は地図のコーディングに挑戦です。
どうやら地図コーディングは魔境らしく、苦戦しそうな予感がプンプンでしたが、早速取りかかってみました。
まずは、デザインの調整から始めました。
なんとなく予想で「物件件数とか地図の画像とかが難しいだろうな・・・」と感じていたため、手短なボタンや各項目のデザインから始めました。
やることは今までのコーディングと基本変わらず、検証ツールを用いて確認しながらコーディングツールで作業、の繰り返しです。
しかしながら、本当に作業スピードが上がっているのを身をもって感じます。やっていけばもっと早くなって、コーディングの負担が減ると良いなと思います。
手探りながらまずは実践
あらかたデザインの調整が終わり、いよいよ本題の地図の部分に移っていきます。...と言っても、地図のコーディングなんて初めて触るので、本当に全てがわからない状態で何か質問しようにも「ナニをどうすれば？」となっていました。
やりたいことはわかるのです。広域の部分の画像をそれぞれ挿入して、ホバーした時にその部分が表示されて、そこをクリックすると...という風に。
でもわからないんです。やり方が。「こうしたら出来そうだな」が、一ミリもないと言っても過言じゃないくらいに。
...とりあえず、プロトタイプの画像を差し替えてみることにしました。
画像のファイル名にもルールがあるようで、それらをクリアするように差し替えました...が、出てこない...。コーディングツールの中では、画像の置換が完了しているように見えますが、前の画像が出力され続ける...。キャッシュ生成しても変わらない。間違ってて良いから少しくらいは変われよ、と思いました。
相談と解決
この状態になったら相談だ。ということで「これしたいんですけど、わからないです」とアバウトだけど、正直に相談したところ以下のような手順を踏むことが必要とのこと。
- 1.Batchという色々設定する場所で今回の課題に必要な情報を反映させること。
- 2.PhotoshopでデザインをSVGで書き出し、それを反映させること。
- 3.CSSで調整をすること。
- 4.マップの範囲を司っているPHPのファイルでうまく反映できるように記述すること。
ざっくりこんな感じです。
まず、SVGでの書き出しに苦労しました。レイヤーがそれぞれ分かれているのを、可視化させたり、不可視化させたりしながら、必要なデザインを抽出する作業は慣れているはずなのに、少しやり方が変わるだけでてんやわんやでした。
あと、CSSでの調整も、分かればそこまで複雑ではありませんでしたが、いつもと少し違う感じで触ると、わからなくなることもありました。
他にもPHPの部分。本当に、何が書いてあるかを読み解くことが難解で、今自分が何をやろうとして、どこを触っていたかがわからなくなるんです。文字通り五里霧中でした。
先輩と共に成長していく
ここでは、コーダーチームの皆さんの助けをフル活用して記述しました。メモを取るのも必死な作業で、本当に画面録画機能が現代にあって良かったと思っています。
あとで自分で録画を見返し、メモした記述を見ながら作業して、無事に実装し終えることができました。
特に難しかった点を挙げると、【str_replace】を活用して、指定したCSSを反映させる点です。言い換えると「ココだけ変えたい！」という要望に変えられるようにする、ということですね。
色やフォントサイズを細かく変えているデザインの場合、プロトタイプの状態からクラスを増やして適応させないといけない部分が多く、今回もそこで苦戦しました。
記述の仕方によっては、変わってほしくないところが変わってしまったり、記述のせいでうまく処理されず、全部消えたりしました。とにかく慣れないうちは、ここが苦戦するんだろうな〜と感じながら、記述し終えることができました。
自分の伸びしろ
試行錯誤再開、一難去ってまた一難。
デザインとの齟齬がないようにコーディングするも、肝心のエリアの情報がうまく反映されていない状態でした。
それは良くない。ということで、地図コーディングのラストスパートです。
まず、参考課題など色々読んで対応しましたが、到底1人ではできませんでした。何せ、難しすぎる。
今回の課題は、少し条件も特殊で、対応内容としては『該当のエリアの要素を配列で組み立てる』というところに着地しました。
最初は、「物件王のサイトの骨組み部分で処理しているため、”Batch”を操作し、ナンバリングが合うようにするのが適切なのかな」と、考えました。
しかし、今回はこの方法が難しく「1グループはこんな感じですよ」と、記述してあげて、処理するときにその配列から呼び出すように記述しました。
配列に関しては、事前の研修でも触れていたのと、参考を見ながらだったこともあり、そこまで躓くことなく書くことができました。が、問題はここから。これをどうやって反映して見せるか。
うーん...よし、相談だ。
相談と解決その２
こういう時は、画面共有で教えてもらいながら、実際に自分で書いてみることをイメージして学ぶと、成長が早いと感じます。
ただ、今回は何やら難問だったようで、本当に授業を受ける生徒的な感じで進めました。
結果的には以下のようなプロセスでした。
- 1.まず、誰がどのグループなのかを指定する。
- 2.そこで指定した内容が処理されるように記述をする。
※例外で、処理が止まってしまった場合、「例外もあるよ〜」とPHPくんに教えてあげる内容の処理を実装。 - 3.そこで組み込まれた変数を、実際に処理する場所に反映させて処理がうまく通るように工夫。
正直、難しすぎて「そんなの記述できないよ> <」となりました。が、何を書いていてどう処理をしているのか、ゆっくりではありましたが、読み取ることはできました。
地図コーディングを振り返って
ここまでを振り返って、自分のやり遂げたかったこと...言い換えるとミスが二つありました。
- 1.今回の設定条件をちゃんと設定できているか確認する。→やっていましたが、調整する段階で何度も変わってしまい、確認しておく必要があった。
- 2.配列を見てどう記述すべきかを判断する。→できている瞬間もありましたが、「これで合ってんのか？」や「参考ではこう表示されているけど、今この変更を加えたら全部消えるってことは違うのか？」と迷いもあった。
もっと、「この記述で合っているから、今度はこれを反映させよう」と自信をもって、自分の力で解決できるようになりたいですね。
そんなこんなで一旦、地図コーディング修正は終わりました。
おそらく、次号も地図コーディングに触れていくと思います。
その時に「地図完了ぅ！！！」と叫ばせてください。
一つずつ知っていく専門要素
新しいお仕事をいただきました。
『Web APIを使用してリアルタイム取得』と、『キャッシュ生成の処理を洗い出してまとめる』と言うものです。
？？？
な、なんだこれは。どうすれば良いんだ？
って言う状態でした。
言っていることは何となくわかるけど、実際何をするべきなんだ？と、いうふうに迷ったため、早速聞くことに。
どうやら、プロジェクト内でそれぞれの処理をしている場所を探し、その内容を書き出す。
その探し方として【get_data】か【get_cache】で探し出すという内容でした。
これがまた超単調作業で、とにかく、探して書き出して、を繰り返す内容でした。
慣れていないこともあり、探し出すことがかなり難しく、分かりやすいものは分かりやすいのですが、「何してるかは大体分かるけど、どう書けば良いんだこれ？」となるものも多くありました。
熟知していれば、その辺りも何となく理解できるかもしれません。が、ほとんどのAPIさんに「初めまして〜」と挨拶をしている状態で、単純な作業ながら意外と苦戦しました。
余談にはなりますが、この対応中に大きく体調を崩して、それもあって辛い思い出があります。ですが、チームの皆さんのお力添えもあって、無事終えることができました。
触れなかったところの記述を見ることもできて、良い経験だったと思います。
これでAPIさんとは顔見知りです。
あとがき
いかがでしたでしょうか？
今月は色々と濃く、心身ともに疲労を感じる月でしたが、様々な面で成長できた月でもありました。
あとは、最近本当にグンっと寒くなって僕も本調子が出ないままです。
皆さんも無理せずにお過ごしください。
それではまた来月お会いしましょう。