<h1 id="h047b2e097e">マイカーズの開発のお話</h1>どうも！代表の河東です。社内の新人教育の一環で、車検日をLINEメッセージで事前通知するアプリの開発を実施しています。今回は第一弾として、PH1.0のお話をまとめてみました。<h2 id="ha7981fd118">開発の背景</h2><ul><li>車検や免許更新は数年に一回のイベントである</li><li>ハガキが届くまで把握しづらく、忘れやすい</li><li>LINE通知でお知らせしてくれると良いのではないか？という発想から、アプリの開発を決定しました。</li></ul><h2 id="he28f874094">開発手法</h2><ul><li>アジャイル開発</li><li>PH1.0を２ヶ月でリリース(2024/07/09現在：デプロイ前)</li><li>ウェブアプリケーション(近日中にiOSアプリもリリース予定)</li></ul><h2 id="hdfd68d00bf">開発構成</h2><ul><li>デザイン：FigmaでのUIデザイン</li><li>フロントエンド：Next.js, Vercel</li><li>バックエンド：NestJS, GraphQL, Prisma</li><li>インフラ：AWS</li></ul><h2 id="hb49db8b1d5">体制</h2><ul><li>PDM</li><li>ディレクター</li><li>UIUIXデザイナー</li><li>フロントエンドエンジニア</li><li>バックエンドエンジニア</li><li>インフラエンジニア</li></ul><h2 id="h5801b498e6">制作中のUI事例</h2><figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/937cf4b4f8bd4e9997afa7c71f0eaf20/%E3%83%9E%E3%82%A4%E3%82%AB%E3%83%BC%E6%83%85%E5%A0%B1%E7%99%BB%E9%8C%B24.png" alt="" width="462" height="1000"><figcaption>はじめにマイカー情報を登録する</figcaption></figure><h2 id="h768efef3d0">実現したいこと(初期要望)</h2><ul><li>車検日の入力、期限の通知(LINEメッセージでの通知)</li><li>免許更新月の入力、期限の通知(LINEメッセージでの通知)</li><li>最適な車検工場の広告案件の実施</li></ul>絶賛開発中ですので、次のブログを楽しみにお待ちください♪

車検日と自動車運転免許証の更新日を事前通知してくれるアプリを開発しています。

車検日通知アプリ【マイカーズ】開発のお話①

4月に入り、少し時間が取れているので、ナレッジ整理や業務振り返りしていまして。振り返ると…やること満載というか、まだまだこのクオリティではやばいぞ101というとこもあったり…まだまだ会社の基礎をつくる段階であるということを痛切に感じています。ビジネスを理解し、ユーザーの要望を理解し、UI UXに強みを持ち、システム基盤（インフラバックエンド）を掌握し…やっぱり全部できないと「本質的につくる集団」にはならんよね、ということで、期初から様々な会議をしたり、タスクをこなしたりしています。メンバーも20名を超えてきて、引越ししたオフィスも3ヶ月でほぼ満員近くになって、1to1を毎週やろうとしたら全然時間が足りたなかったり…そんな忙しい！という喜びを噛み締めています。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/58d07caa47d74468a8955b58cdc5e13a/IMG_9808.jpg?w=2000&amp;h=1519" alt="" width="2000" height="1519"><figcaption>今年、新しくなったオフィスの入り口</figcaption></figure>でも人がめっちゃ好きなんですよね、カワトウ。なので、仕事も人生も、人がほんとに大切。どんな人たちと時間をともに過ごすか、どのようにお互いを尊敬し合いワークするか。そういったことをひとつひとつ丁寧に考え、工夫しながら…まずは自分が楽しむ、仕事を楽しむことかなと思っています。トップがバカみたいに楽しそうな会社、雰囲気悪くはならないはず…ということで、西鉄バスが博多五町バス停につくので今日はこんなところで🙏今期もカワトウ、がんばります！<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/5ad85a58f83c48d79dd63d09a03b3d1d/IMG_0050.jpg?w=2000&amp;h=1500" alt="" width="2000" height="1500"></figure>

4月に入り、少し時間が取れているので、ナレッジ整理や業務振り返りしていまして。

11期目の春、カワトウの近況

イチマルイチデザインではこの度、<a href="https://www.mapbox.jp/" target="_blank" rel="noopener noreferrer nofollow">Mapbox</a>を用いた地図開発を行いました。今回は、開発を担当したフロントエンドエンジニアの吉永さんにMapboxの開発にまつわる話を聞いていきます。<h2 id="h0c3cdb1d8e">今回お聞きするプロジェクトは、Mapboxを用いた地図開発とのことですが、どのような案件だったのでしょうか。</h2>災害時に様々な情報を地図上でリアルタイムに表示する「災害情報マップ」のプロトタイプの実装という案件です。災害時の避難情報や浸水・洪水の危険度分布といった様々な情報を地図上で提示し、災害時に利用者が周囲の危険を適切に理解し、避難行動を判断することを目的としています。最初は土地や道路の色などのベースとなる地図のデザインとその上に乗る重畳データ（浸水や洪水の危険度分布、停電情報、台風情報、ハザードマップなど）の色味などの各種UIデザインをFigmaで制作して納品するというお話だったのですが、Figma上で完結するのが難しく、実際にプロトタイプを制作して納品という形になりました。<h2 id="hdfe59b0802">このプロジェクトはどのような体制とプロセスで進められたのでしょうか。</h2>弊社では、9名（ディレクター1名、UIデザイナー2名、UIデザイン品質サポート1名、テックリード兼フルスタックエンジニア1名、フロントエンドエンジニアサポート2名、契約管理2名）で体制を組みました。まずはベースマップのデザイン制作ということで、Mapboxの提供するMapbox Studioというツールを使うことになりました。これはマップのカスタマイズをウェブブラウザ上でGUI（Graphical User Interface）で行えるツールです。Mapbox Studioでカスタマイズできる項目の洗い出しを行い、クライアント様から指定のあったベースマップの設定の一覧と照らし合わせながら、Mapbox Studio上のどの機能に当たるのかをリスト化しました。その後、デザイナーがベースマップの作成に入ったので、技術面のサポートとして私たちエンジニアがそれぞれのデザイナーのサポートを行っています。その間、ベースマップの上にのせる重畳データのサンプルについては、クライアント様からご共有いただいたので、Mapbox GL JSというライブラリを使用して私の方でローカルでの描画テストを行いました。またUIのデザインに入ってからは、弊社で作ったDev環境でワイヤーを見ながら、機能の雛形の実装とサンプルデータの描画に入りました。表示の速さというところも大事だったので、言語はReactでフレームワークはNEXT、ホスティングにはVercelを使用しています。そして、UIデザインがほぼ固まった段階で、UIの実装に入りました。同時にデザインのフィードバックもあったので、デザインの変更もリアルタイムで行いながらの実装です。現在、UIの実装はひと段落し、実際の調査用のデータを組み込んだり追加のフィードバック分を反映しているところです。<h2 id="hcc7757fb23">Mapboxのはじめの印象はいかがでしたか？</h2>Mapboxのウェブサイト上に「自由自在に地図描画」という言葉があるのですが、カスタマイズ性の高さに驚きました。ベースマップのカスタマイズもGUIで行えるので、非エンジニアでも手軽に行えるのが便利だと思います。例えば、ズーム値によって色を変えたり、幅を変えたり。本当に細かい部分の設定が変えられるんです。特に今回はベースマップのデザインの提案も含まれていたので、エンジニアを介さずデザイナーが直接マップを触りながらデザインを反映できたのが良かったと思います。直接見ながらデザインを反映することで、イメージも湧きやすかったのではないでしょうか。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/7264f8c5eba544d589bc0d44db656ecf/mapbox_studio2.png?w=1000&amp;h=634" alt="" width="1000" height="634"><figcaption>Mapboxは直感的にわかりやすく、操作性が高い</figcaption></figure><h2 id="hdce13217f1">開発にあたり、特に気を配った点や工夫をした点はありますか？</h2>ベースマップの作成時にセンシティブな地名の表記は避け、海外の情報は地形のみに絞りたいとの要望があり、その点は気を使いました。特に元々作っていたデザインを崩さず日本だけの情報を表示させたり、一部施設のラベルやアイコンをデザイン的に変更したいという要望をMapbox Studio上で再現する方法を見つけるのに苦労しましたね。ベースマップのスタイルはJSONドキュメントなので、マップをカスタマイズする際にJSONを編集するか、Mapbox Studioを使って編集するかの2通りなのですが、まさに“これ”というドキュメントが見当たらなかったので、とにかくドキュメントを隅々まで読み込んだり、直接Mapbox Studioを使いながら方法を探りました。<h2 id="hd3c3764d52">プロジェクトを振り返って、印象的だったことはありますか？</h2>台風の進路図をJavascriptで描画するのが大変でした。台風の進路情報から緯度や経度などの必要なデータを取得し描画するのですが、よくニュースなどで見かける予報円同士を繋ぐ線を描画するのに時間がかかりました。今回は円同士の距離の計測にTurf.jsというライブラリを使用しています。単純に繋ぐだけだと円が重なったときに線も重なってしまい綺麗に見えないので、円で線を分割し、必要な線のみ描画させました。初めての経験だったため、テックリードの松井さんにサポートしていただきながら何とかやり遂げることができ、とても印象に残っています。<h2 id="h124d6035a4">今後、どのように活かせると思いますか？</h2>デジタル地図の開発は、地図表示や住所の検索、道路探索や道案内など、様々なサービスで需要があるかと思います。今後、様々な地図プラットフォームが検討される中で、カスタマイズ性やデザイン性の高さ、コストの低さといった点でMapboxが選択肢の一つとなることも多くなっていくのではないでしょうか。またMapboxを使用したプロジェクトに参加する機会があれば、デザイン面・実装面ともに今回の経験を活かしたいと思っています。

イチマルイチデザインではこの度、Mapboxを用いた地図開発を行いました。今回は、開発を担当したフロントエンドエンジニアの吉永さんにMapboxの開発にまつわる話を聞いていきます。

【社内インタビュー】Mapboxを用いた地図開発について

こんにちは。イチマルイチデザイン株式会社でフロントエンドエンジニアをしている亀井です

この度、自社コーポレートサイト（https://101de-sign.com/）のアクセシビリティ向上の取り組みを始めました。

今回の記事では、アクセシビリティ向上に取り組み始めた経緯や取り組み内容を、備忘録として書いています。

アクセシビリティ周りのちょっとした解説も交えていますが、がっつり解説はしていません。後述していますが、アクセシビリティ向上を実際のプロダクトで行うのは初めてで、この記事は振り返り目的が強めです。

間違いなどございましたらご指摘いただけると幸いです。

※ 自社コーポレートサイトはNext.jsを用いて開発されています。そのためコードはjsx記法を用いて解説しています。
また、スクリーンリーダーはMacのVoiceOverを利用してチェックしています。

自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話 (2023年5月22日)

<h2 style="text-align: start" id="hd511607e06">使用するライブラリ</h2><h2 style="text-align: start" id="h47e54ab280">Recoil とは</h2>Facebook 製（現 Meta 社）の React 用の状態管理ライブラリです。<h2 style="text-align: start" id="h12633f74eb">実装内容</h2>まずはこちらが全体のコードです。<pre><code>import { atom } from &quot;recoil&quot;;
const LOCAL_STORAGE_KEY = &quot;LOCAL_STORAGE_KEY&quot;;
const getToLocalStorage = () =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return &quot;&quot;;
 }
 const value = window.localStorage
　　　　.getItem(LOCAL_STORAGE_KEY);
 return value ? JSON.parse(value) : &quot;&quot;;
};
const saveToLocalStorage = (value: string) =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return;
 }
 window.localStorage
 .setItem(LOCAL_STORAGE_KEY, JSON.stringify(value));
};
export const recoilWithLocalStorage = atom&lt;string&gt;({
 key: &quot;recoilWithLocalStorage&quot;,
 default: getToLocalStorage(),
 effects_UNSTABLE: [
 ({ onSet }) =&gt; {
 onSet((newValue) =&gt; {
 saveToLocalStorage(newValue);
 });
 },
 ],
});</code></pre>以下、解説となります。<pre><code>if (typeof window === &quot;undefined&quot;) {
 return &quot;&quot;;
}</code></pre>window オブジェクトの未定義エラー回避のため、関数式 <code>getToLocalStorage</code> と関数式 <code>saveToLocalStorage</code> 内で <code>typeof window === &apos;undefined&apos;</code>を条件としてif文を定義しています。<pre><code>const getToLocalStorage = () =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return &quot;&quot;;
 }
 const value = window.localStorage
　.getItem(LOCAL_STORAGE_KEY);
 return value ? JSON.parse(value) : &quot;&quot;;
};</code></pre>Local Storage から値を取得するための関数式です。 Local Storage に値がない場合、空の文字列を返します。 （※今回は値の型は <code>String</code> とします。）<pre><code>const saveToLocalStorage = (value: string) =&gt; {
 if (typeof window === &quot;undefined&quot;) {
 return;
 }
 window.localStorage
 .setItem(LOCAL_STORAGE_KEY, JSON.stringify(value));
};</code></pre>引数として渡された値を Local Storage にセットする関数式です。<pre><code class="language-javascript">export const recoilWithLocalStorage = atom&lt;string&gt;({
 key: &quot;recoilWithLocalStorage&quot;,
 default: getToLocalStorage(),
 effects_UNSTABLE: [
 ({ onSet }) =&gt; {
 onSet((newValue) =&gt; {
 saveToLocalStorage(newValue);
 });
 },
 ],
});</code></pre>Recoil の <code>atom</code> を定義します。 デフォルトの値として、`getToLocalStorage` から取得した値を <code>default</code>として設定します。 `effects_UNSTABLE` に新しい値がセットされたタイミングで <code>saveToLocalStorage</code> に新しい値を渡す処理を設定することで、Recoil のデータストア側の値と Local Storage の値を同時に更新して、実質的にデータを共有しているような実装が可能となります。<h2 style="text-align: start" id="h4d849f4362">使い方</h2><pre><code class="language-typescript">import React from &quot;react&quot;;
import { useRecoilState } from &quot;recoil&quot;;
export const MyComponent = () =&gt; {
 const [value, setValue] = useRecoilState(recoilWithLocalStorage);
};</code></pre><code>useRecoilState</code> や <code>useRecoilValue</code> などの Recoil が提供しているカスタムフックの引数に定義したストアを渡すことで、`RecoilRoot`内であればどこのコンポーネントからでもステートの呼び出しやセットが可能となります。<h2 style="text-align: start" id="hcbec2bf0d9">終わりに</h2>株式会社イチマルイチデザインでは、私たちと一緒に React・Next.js、TypeScript などの技術を使った WEB アプリケーションや WEB サイトの開発をするフロントエンドエンジニアの仲間を募集しています。デザイナーやバックエンドエンジニアの方も募集をしておりますので、興味がある方はご連絡お待ちしております。

こんにちは。
イチマルイチデザインのフロントエンドエンジニアの高橋です。

今回は、Recoil と Local Storage のデータを共有させる方法を共有します。
言語は TypeScript です。

Recoil と Local Storage のデータを共有させる方法 (2023年5月18日)

ちなみにこんな感じ。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/5b935afb05944bd0aaf3f8b58ec56034/picture_pc_75ecb22396c654bd9b4dd0dd373ce8c7.gif" alt="" width="383" height="207"></figure>この機能、検索すると英語の作成動画や説明記事などは多く見かけるのですが、日本語版がないな…と感じまして記事を作成してみました。ぜひこの記事で使い方を覚えてもらえると嬉しいです。それでは、作成方法に進みます！1. 追従ヘッダーの作成 2. 追従ヘッダーのスクロール範囲決定 3. アニメーション設定と、とてもシンプルなステップになってます。 今回はデスクトップでの作成ですが、同様の手順でスマホVer.の作成も可能です。<h2 style="text-align: start" id="he8dd2d3fdf">1.追従ヘッダーの作成</h2>好みのデザインでヘッダー(通常)を作ります。 続いて、変更したデザインのヘッダーも作成します。※これが追従ヘッダーになります。 注意点としては、グループでヘッダーを作成ではなく、フレームとしてヘッダーを作成してください。 ヘッダー(通常)を選択し、 右のパネルのConstraintsで「Fix position when scrolling」(スクロールした時に位置を固定する)のチェックマークをオンにしてください。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/aaa943280c2f40628c1fa498ed0a0f38/figma1.webp" alt="" width="2000" height="1002"></figure><h2 style="text-align: start" id="hdbf8e93e38">2.追従ヘッダーのスクロール範囲決定</h2> ここで制作するのが、追従させたい範囲です。 rectangle(四角ツール(R))で追従を始めたい場所から、終わりたい場所まで四角(塗り、罫線はナシ)を作成するだけです。<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/a8a7a74a671f48918bc650947556e1fe/figma2.webp" alt="" width="2000" height="1000"></figure><h2 style="text-align: start" id="h48c9c6026e">3.アニメーション設定</h2>最後に、前述で作った四角にプロトタイプでアニメーションを設定するだけ。 まず、追従範囲の四角を選択し、続いて画面右側にあるDesign、Prototype, Inspectパネルのうち、Prototypeを選択します。 右側パネルでInteraction設定が可能になります。こちらの調整によりアニメーション設定が可能になります。 選択した四角のトリガーを①で作成したヘッダーにつなげると、右に「Interaction Details」というパネルが出てくるので、下記のように設定。(上から順に)Interaction Details  ・どのような時(ホバーしたり、クリックしたりなどの設定) →While Hovering ※ここでのアクションが、四角内で行われてる時に追従ヘッダーが表示される仕組みです。・何をしたいか(遷移したり、入れ替わったりなどの設定) →Open OverlayOverlay ・どこに表示させたいか(真ん中なのか、右なのかなど) →Top CenterAnimation ・アニメーションの設定 →Instant<figure><img src="https://images.microcms-assets.io/assets/7d7a1b8fb3fa465eb9b8d462cc6446ba/85df45099026452d9510781a2d392604/figma3.webp" alt="" width="2000" height="999"></figure>これで完了です。<h3 style="text-align: start" id="ha214098e44">まとめ</h3>今回は追従ヘッダーとしてアニメーションの設定を行いましたが、 ヘッダーのみならす、ページ途中などでポップアップを表示したい時など、色々汎用性が高いアニメーション設定で、おすすめです。また、Animationの設定によって見え方も調整可能ですので、お好みの演出ができるかと思います。ぜひお試しください！なお、101では一緒に働ける仲間を絶賛募集しております！ 興味のある方は是非！！！カモン！！！！！

101デザインの佐々木と申します。

前職は広告制作会社でデザイナーをしており、2021年4月に101に入社し、デザイン、ディレクション業務を行なっております。

ウェブデザインを始めた当初はXDを使用してましたが、最近はもっぱらFigmaを使用してデザインをしております。

そんな私が101に入社し覚えた、Figmaの便利なアニメーション機能についてご紹介いたします。

今回はみんな大好き「追従ヘッダー」のご紹介で、トップからずっと追従するタイプではなく「スクロール中に変化する追従ヘッダー」になります。

BLOGS

車検日通知アプリ【マイカーズ】開発のお話①

11期目の春、カワトウの近況

【社内インタビュー】Mapboxを用いた地図開発について

自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話 (2023年5月22日)

Recoil と Local Storage のデータを共有させる方法 (2023年5月18日)

Figma おすすめアニメーション (2022年7月29日)

.css-1dps8af{font-size:24px;}BLOGS

11期目の春、カワトウの近況

【社内インタビュー】Mapboxを用いた地図開発について

自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話 (2023年5月22日)

Recoil と Local Storage のデータを共有させる方法 (2023年5月18日)

Figma おすすめアニメーション (2022年7月29日)

BLOGS