マップリンク – ReactとSVGで、簡単なインタラクティブ地図制作ツールを作ってみた
この短い記事では、僕がどのようにしてインタラクティブな地図アプリ「MapLink」を作成したかについて説明します。このアプリでは、拡大、縮小、左右上下への移動がスムーズにでき、ダブルクリックで好きな色付けをし、完成した地図をPNGファイルとしてダウンロードすることが可能。
依頼を受け、今までに制作してきたサイト集
この記事を読むのに約2分かかる
掲載日：
以下は、僕がフリーランスとして開発したコーポレートサイトの一部です。
これらのプロジェクトはすべて：
- 僕が唯一の開発者であり、すべてのコーディングとホスティング管理を担当しました
- デザインはビジネスパートナーが行い、そのデザインを使用し制作しています
- CMS として Wordpress を使用し、クライアントがサイトのテキストや画像を簡単に追加、削除、操作できるようにしました
株式会社モリコー 建築・リフォーム
注目すべき機能：
- カスタムローディング画面
- （ページが読み込まれる前に表示される画面）
- ブログ一覧にある「もっと見る」ボタン
- 新しい記事が最初に読み込まれた後に、古い記事をページに読み込ませることができるボタン (この機能は AJAX と Wordpress REST API を使用しています)
- PC のホームページでのスクロールプログレスの指針
- サイドバーにある黄色いハンマーのアイコンは、現在見ているセクションに応じて位置が更新されます
ジャーニー 英語アカデミー
注目すべき機能：
- 完全にカスタマイズ可能なカテゴリーベースの FAQ ページ
- ページ遷移のアニメーション
ラフラ 訪問介護
注目すべき機能：
-
画面下の波と画面右横のマスコットキャラクター仏陀のアニメーション（SnapSVG で作成された）
-
柔軟で再利用可能なブロック式のページビルダーで、独自のページを作成可能（ACF で作成された）
- ギャラリー、ミックスコンテンツ（タイトル／テキスト／画像／ボタン）、埋め込みコンテンツ、テーブルなどの様々なブロックタイプを使ってページを構成することができます
- ページのテーマ（色、アイコンなど）は、ユーザーがカスタマイズすることもできます
-
求人情報を掲載するキャリアコンテンツシステム（ページを見る）
- 各求人情報は、エリアや職種ごとに分類され、ユーザーは該当する求人情報をナビゲートして見つけることができます
HDC 人材育成コンサルティング
注目すべき機能：
- カスタム「サービス」投稿タイプ
- 簡単に複数のカテゴリーに分割することが出来ます
- 再利用可能なブロック式のページビルダーで独自のページを簡単に作成
他の記事
Contact Form 7のwpcf7_spamフィルターでしっかりスパム対策を行おう
日本語以外の入力を許可しないことで、スパムロボットを阻止しよう. この記事を読んで「wpcf7_validate」 と 「wpcf7_spam」 のContactForm 7のフィルターを使って、お問い合わせフォームのバリデーションとスパム対策を行う方法をご紹介します。