シーブレイン　IT翻訳サービス　WEBページリニューアル

お知らせ

2016.02.15

どうもfujiharaです。
春一番が吹き春がそこまで来て待ち遠しいですね。
と同時に、NHKテレビ小説『あさが来た』の終わり(4月2日)が刻々と近づいてきていることに切なさを感じております。

本日は弊社シーブレインのIT翻訳サービスのWEBページをリニューアルいたしましたので、そのお知らせとWEBページでfujiharaが実装した技術を簡単にご紹介させて頂きます。

背景

弊社シーブレインのホームページが現行のものになり大分日が経っており、全面リニューアルを計画しました。
第一弾として弊社主力サービスの1つであります、IT翻訳サービスのページリニューアルを実施しました。第二弾、三弾と続きますので乞うご期待下さい。

コンセプト

まずはコンセプトをご紹介いたします。

弊社IT翻訳事業部がもっとも大切にしていること、それは『品質』です。
それを如何にして実現しているか紹介するページが以下にあります。
TOP
TEAM

そして弊社サービスの紹介、弊社企業情報、弊社へのアクセス、弊社社員による技術紹介ブログ・つぼログがトップページに配置しております。

また上記カテゴリごとに、より詳しい説明があるものは下層ページに配置しました。各カテゴリにはそれを表現する動画を背景に差し込んで表示しております。

技術

ページを見ていただくとお分かりになると思いますが、今回は上記セクションごとにそれを表現する動画を表示しております。
動画はWEBページ用に弊社が懇意にさせていただいているデザイナーの方に今回作成していただいたものです。
カテゴリによっては下層ページへ遷移するものがあるのですが、この際にページ遷移が発生すると動画が再び最初から再生されてしまいます。
と言うわけで今回は HistoryAPIを使用し、トップから下層へ遷移する際には ajax で下層ページを取得し、URLを変更した上で下層ページのコンテンツを差し込むといった処理を行いました。
通常 ajax でページを取得した際にはURLが変わらないのですが、 HistoryAPIを使用することにより、現行URLを履歴として残しURLを下層のものに変更させます。
こうすることでブラウザの戻るボタンを押したときに下層からトップへの遷移が可能になります。

ボタンクリックで表現すると以下のようになります。


通常 

URL  http://localization.c-brains.jp  

ボタンクリック(ajaxで取得)差込

URL http://localization.c-brains.jp (変更せず) 


今回 

URL http://localization.c-brains.jp

ボタンクリック(ajaxで取得)差込

HistoryAPIを使用した履歴操作

URL http://localization.c-brains.jp/下層URL

まとめ

デザイナーの方から、トップから下層ページを表示するときに動画を変更しない要望があり、まず ajax の導入を決めました。
そして次に ajax で差し込んだは良いがブラウザバックをした際には本来トップページに戻るはずが、トップページの前に表示していたページに戻ってしまうことからHistoryAPIを使用した処理にいたしました。
トップからのページ遷移をご確認いただけると面白いと思いますので、是非お試し下さい。
シーブレインITD翻訳サービスページ
また弊社IT翻訳事業部へお問い合わせの方は以下のリンクよりお問い合わせ願います。
お問い合わせページ
今後は私 fujiharaが所属する　WEBサービスのページを行う予定ですので、そこでの技術等もご紹介できればと思います。乞うご期待下さい！！