ID:21716さん

# 1.概要 このプロジェクトは、コロナ禍における医療機関の補助金申請システムの構築である。 補助金申請後のフローはBPOセンター内の別システムを利用するため、公開側の「補助金申請」、管理側の「CSV出力」という至ってシンプルなシステムとなっている。 本プロジェクトでの特徴は、とにかく「短納期」であった。 # 2.チームメンバー + プロジェクトマネージャー：1名 + インフラエンジニア：1名 + システムエンジニア・プログラマ：1名 自身はシステムエンジニア・プログラマを担当。 要件をもとにシステムのフローの決定、設計を実施。 デザイン性が求められないプロジェクトであったため、CSSフレームワーク（Bootstrap）を用いてフロントエンドマークアップ〜バックエンド開発までを一貫して行った。 # 3.開発期間 本プロジェクトは非常にタイトなスケジュールであり、発注が決まってから公開までに15営業日の期間で構築〜試験〜リリースを行う必要があった。 機能としては、 【公開側】 1.会員登録（メールアドレス認証、reCAPTCHA v3の導入あり） 2.会員ログイン 3.新規申請作成 4.過去の申請の修正 5.過去の申請をコピーして新規登録 【管理側】 1.管理ログイン 2.CSV出力（期間絞り込み） であった。 最初の5営業日で顧客との要件を決めつつ、並行して開発着手 8営業日までで開発完了 11営業日までで社内検証＋修正 14営業日までで顧客確認＋修正→顧客承認 15営業日目に無事にリリースとなった。

# 概要 このプロジェクトは出版社様の文書検索サービスの構築となります。 当初、数百記事の全文検索を想定されていたプロジェクトで、WordPressを用いてのシステム構築が検討され、ディレクターにより要件検討が行われていました。 私が参画を開始し始めた設計段階から数万記事〜数十万記事の全文検索が必要であることが判明し、WordPressではなく、Laravel＋ElasticSearchでの検索システムの構築に舵を切り替え、構築することになりました。 # 納期との調整 当初WordPressのみの開発を想定していたシステム開発ではフロントエンド、バックエンド共に開発担当予定でしたが、Laravel＋ElasticSearchという構成は未経験であり、学習コストが必要であり工数が大きくあがりました。 フロントエンドとバックエンドの作業を切り分け、フロントエンド箇所をメンバーに依頼し、進捗管理を行いながら、バックエンドの担当を行いました。 # 大量アクセス対策 大量アクセスによりElasticSearchサービスがダウンするという状況が発生しました。 サーバ担当者に対し、一定時間内・一定回数以上のアクセスをDoS攻撃として判定してもらう処理の設定を依頼。 システム側でも一定回数アクセス以上の処理については検索を実行させないように実装し、大量アクセスによるシステムダウンを防ぐよう改修を行いました。

# 1.概要 このプロジェクトは既存眼科WEBサイトの全面リニューアルである。 「眼科」を探している人がターゲット層となり、弱視であったり老眼であったりといった視覚に対して何かしらの問題を抱えているユーザを想定する必要がある。 また、眼科への来院患者を増やすためにSEOの対策を積極的に行いたいという要望があった。 # 2.課題に対する対応 ## 2-1.視覚に問題を抱えているユーザへの対応 一般的なWEBサイトではアクセシビリティ対応のために文字サイズを変更する機能を備えていることが多い。しかし、今回のターゲットを考えると、一般的な拡大率では足りないのではないかという問題があった。 そこで、文字サイズを100%〜200%まで段階的に変更ができる機能をjQueryで実装し、また拡大率200%において表示崩れが発生しないように調整を行なった。 視覚の症状によっては背景白＋黒文字のデザインで文字が読みにくいことがある。ボタン１つで背景色黒、文字色白に全て変換させる機能をjQueryで実装をした。 アクセシビリティを上げるため、色のコントラスト比の水準AA対応を行い、かつグローバルデザインフォントのWEBフォントを導入。 マークアップとCSSの工夫により音声ブラウザ対応も行なった。 ## 2-2.SEOに対する対応 現在のWeb検索システムでは、記事の有用性や更新頻度が検索順位に反映されると言われている。 そこで、眼に関する病気や症状の説明コンテンツをCMSにて実装した。 顧客（眼科病院）の担当者が感覚的に操作でき、かつただしいマークアップ言語が崩れないような形で記事を作成できるCMSを整備することによって、コンテンツの充実を図り、症状を調べる→治療内容の説明を読む→来院という導線を作成した。

# 1.概要 このプロジェクトは、某連合会向けの資料ダウンロードサイトである。Salesforceで運用をしている既存の資料ダウンロードサイトがあり、サイトをWordPressで再構築をした。 ユーザはログインID/PWでWordPressの購読者としてログインをし、ログイン後のユーザのみが資料のダウンロードを行うことができる。 私は、要件定義、設計、コーディング工程に担当し、実際のコーディングを行った。 # 2.案件の詳細 ## 2-1.サーバ 今回の案件では、AWSを利用することに決定した。ダウンロード資料の総データ容量が20GBを超える大容量であり、AWSサーバは容量・通信料に対し従量課金制であることから、EC2+S3に環境にWordPressを構築することに決定した。WordPressに最適化されたnginxのAMIMOTO AMIを使うことに決定。（インフラは別途インフラ担当者が担当） WordPressでのEC2+S3環境においては、配布されているプラグインの活用を行った。 ## 2-2.ファイル名の隠匿 今回の構成では、S3にダウンロード用のデータを一括アップロードを行う。S3にアップロードされたファイルは意図せず公開されてしまい、今回の要件ではS3側にアクセス制限をかけることができなかった。 そこで、WordPressからアップロードされた際にランダムな半角英数字のファイル名へと実ファイル名を変更し、ファイル名を推測して直接アクセスする可能性を極力下げるという形で提案をし、顧客からの承認を得た。 また、ファイルダウンロード画面ではファイルURLを画面上に埋め込まず、JavaScript+AjaxでファイルIDをPHPに投げ、PHP側でファイルコンテンツを取得し強制ダウンロードさせるという仕組みをつくり、ファイル名を直接的に表示する箇所がなくなるように設計を行い、実装した。 強制ダウンロード時にはアップロード時の元ファイル名でダウンロードさせることで、ユーザに「ファイル名が隠匿されている」ことを意識させない作りとした。 # 3.得られた成果 今回のプロジェクトの「Salesforceからの移行」の最たる目的は、カスタマイズ費用の削減だった。今回、WordPressに移行することによって、社内での内製ができるようになり、社内の生産金額の上昇と、最終的な開発・運用費用の低下という双方にとってプラスの結果を得ることができた。 また、顧客からの直受けで作業をできることによって細かなカスタマイズ、要望を叶えることができた。 WordPressという汎用的なCMSパッケージを利用することで、管理画面の操作感の学習コストも抑えることができ、以降高い評価をいただいたまま現在に至る。

# 1.概要 フロントエンド開発として、LPページのコーディングを行っている。過去に作成してきたLPの一例としては、官公庁案件（労働についての周知LP）、美術館の特設展示LP、車ディーラーの印刷連携キャンペーン周知LP、などがあげられる。 デザインデータの作成はデザイナが担当するが、デザイナが作成したPSDファイル（時としてaiファイル）を元にコーディングを行う。 # 2.LP実装例 ## 2-1.官公庁案件 官公庁案件での特徴としては、厳しいアクセシビリティへの対応が挙げられる。総務省のアクセシビリティツール（miChecker_v2）、バリデーション対応（W3C）に加えAnother HTML lint5（http://www.htmllint.net/）に適応する形で作成をする。 主に品質に重きをおいたコーディングを行う。 ## 2-2.美術館の特設展示LP 美術館の特設展示ということで、ユーモアのあるサイトが求められた。jQueryやCSS Animationを用いたアニメーション導入やWEBフォントの導入等を行い、動きのあるLPの作成を行う。 ## 2-3.印刷連携キャンペーン周知LP 印刷と連携したLPの場合、印刷データが完了してからのWEBデータ制作となるため、比較的納期が厳しいことが多い。 また、印刷データは非常に色彩の利用範囲が広く、そのままWEB用の画像に変換を行うとファイルサイズが非常に大きくなり、LPとして致命的な「読み込み速度の低下」が発生する可能性が高い。 印刷データをWEBのサイズに切り出した上で、遅延ロードの導入、背景など繰り返し画像とできるところの調整等を行い、ファーストビューの速度改善を行った。 印刷データの仕上がりとキャンペーン開始までの期間が非常に短く、この案件では、デザインデータ納品から2営業日以内でレスポンシブLPページの納入を行った。 このように、LPページとひとえにいっても制約条件が大きく変わる。 LPページの企画段階からスケジュールや制約条件等を確認し、タスクスケジューリングを行ったうえでLPの作成を行っている。

# 1.概要 このプロジェクトは、印刷データとWEBシステムを連携し、書籍と同一のWEBページを構築するシステムの構築である。書籍にシリアルナンバーを付与し、シリアルナンバーを入力することでシステムにログイン、その後書籍の内容の検索・ハイライト表示などを行う。 # 2.印刷データとの連携 今回のプロジェクトでは、「書籍との連動」が第一の目標である。今回の書籍データはInDesginで作成されているため、InDesgin上にXMLのタグ付けをしたテンプレートを作成。印刷データの制作は別部署であったが、テンプレートに従ってInDesignを作成するように指示をした。InDesignデータのXMLタグ付け機能では、テキストエリアのデータは抽出ができるものの、画像データの出力ができない。そこで、InDesign用のスクリプトを作成し、書籍データから命名規則に従った画像名で画像が出力されるように実装をした。 完成したInDesignデータからXMLを出力、XMLデータを構造分解してDBに保存する。そしてWEBページ生成ボタンの押下で、DBに登録されたXMLデータからWEBページを作成するという方法をとった。 以降、書籍の版を重ねる際に、 印刷データの作成→XML出力→DBへのXML取り込み→WEBページ生成 という流れを実行することで、実際のコーディング作業無しで印刷データとWEBページの連動をさせることができるようになった。