効率よく開発するための技術

より早く、より柔軟に、そして効果的なWeb開発を行うために、私たちは様々なツールを使い分けています。
B2CやC2Cなどのデータベースを用いた複雑なWebシステム開発にはRuby on Railsを、コーポレートサイトなどの静的なWebサイト開発にはMiddlemanを用いています。

より早く、より柔軟に、そして効果的なWeb開発を行うために、私たちは様々なツールを使い分けています。

Web開発には細かく様々な形態が存在しますが、大きく分けて動的サイトと静的サイトの2つに分かれます。動的サイトは常にプログラムを用いてページを構成する形式であり、ユーザーの操作によってページ内容が変化するタイプのサイトです。例えばブログや通販サイトが該当します。静的サイトはプログラムを用いないサイトであり、1度作ってしまったら内容は変化しません。例えばコーポレートサイトやランディングページが該当します。このページでは、動的サイト開発のことをWebシステム開発、静的サイト開発のことをWebサイト開発と呼びます。

動的サイトの開発、すなわちWebシステムの開発にはRuby on Railsフレームワーク(以降Rails)を用いて開発しています。Railsはそれまでのフレームワークに比べて、早く、効率的に、そして柔軟にサイトを構成することができます。Railsを用いている他社の事例としては、クックパッドや食べログ、初期のTwitterなどが有名です。また、海外のスタートアップなどで利用されることが多いです。これは展開の早い事業においてシステムを素早く変化させていくためには、柔軟に対応できるRailsが適しているからです。一定以上のアクセス数を超えたシステムはRailsを卒業して、より堅固なフレームワーク構成に移ることもあります(Twitterの事例のように)。しかしながら、多くの事例はRailsで対応可能です。

私たちはRailsフレームワークを用いていますが、CakePHPやFuelPHP、Laravelの知識もあります。もし、既存システムの改修でこれらのフレームワークを用いた事例や継続的開発がありましたら、ご相談ください。

一方、静的サイトの開発、つまりWebサイトの開発においては、Middlemanを用いています。Webサイトの開発において、手間がかかるのはコーディングです。Webの構成、デザイン、配置、もしくはアニメーションなどを決定し、コーディングの作業に入ります。しかし、一度作業を始めてしまうと後で変更しにくい場面が出てきます。これは静的サイトの場合、ページを1枚1枚、手書きでコーディングしていくからです。動的サイトのようにページのパーツを分けて、組み立てるように構成すれば変更の手間は少なくなりますが、動的サイトを動かすためには運用の費用が多少かさみます。動的サイトを作成する手順で静的サイトを作成することができるMiddlemanフレームワークを用いてサイトを作成することで、変更の手間を削減します。また静的サイトはAmazonの提供するS3を用いて配信することでコストを下げます。大量アクセスにも耐えることができ、機会損失を防ぎます。

以下がWebサイト開発、Webシステム開発に用いたソフトウェア一覧です。

IDE
Intellij

データベース
MySQL
PostgreSQL
SQLite

Git
GitHub
GitLab

Slack
Skype
Chatwork
効果的に見せるための技術

Webサイトをただ開発するだけでは、使いにくいサイトになってしまいます。
そこで私たちは表示するまでの早さにこだわります。
また、モバイルサイトに適応したレスポンシブな構成も0から作成することができます。

例えばスマートフォンを対象としたモバイルサイトの開発の場合、PCに比べて小さな画面を想定して構成する必要があります。PCに見せるサイトと同じような構成をスマートフォンで表示すると、文章が読みにくくリンクが押しにくい状態になる場合があります。ここ数年でWebサイトをスマートフォンで閲覧するお客様が増えています。お客様が扱いやすいモバイルサイトを提供できるように高速化、レスポンシブデザイン、軽量化などの工夫があります。

スマートフォン向けのサイトの場合、お客様が不快に思われる大きな原因は読み込みにかかる遅さです。期待を持ってお客様がサイトにアクセスしていただいたのにも関わらず、読み込みがいっこうに終わらず、サイトの表示をあきらめてしまったこともあるのではないでしょうか。GoogleやAmazonなどの大手がページを表示するまでの早さと売り上げの関連性について調査をした結果、0.1秒遅くなるごとに1%の売り上げが失われ、1秒経過するとサイトから離れて行ってしまう…といった報告もあります。

サイトの読み込みが遅くなる原因は「Webサーバの反応が遅い」「送るデータ量が多い」「サーバが国内ではなく海外に存在する」「ページ内のプログラム(JavaScript)に時間がかかっている」など、事例に応じて様々です。私たちは、サイトの表示を遅くさせる要因について原因を明らかにして、改善のための技術をつぎ込むことで、より早く表示できるように努めます。

レスポンシブデザインは、PCとスマートフォン向けサイトを1枚のページで表現する技術です。PCでブラウザのサイズを変更すると見え方が変化するサイトが存在します。ブラウザで表示している横幅に応じて、サイトのデザインを変化させることができます。そうすることによって、1つのURLでPCでもスマートフォンでも、見やすくレイアウトすることができます。ただし、スマートフォンのみのサイトが必要でPC向けのサイトが必要ない場合は、無理にレスポンシブデザインにする必要はありません。お客様のご要望や将来のご予定に合わせて、レスポンシブデザインの採用を判断します。

また管理サイトのように必要最低限のデザインでよいサイトの構成には、Twitte BootStrapなどのような既存のデザインフレームワークを用いることで、デザインのためのコストを削減できます。

ページの中に画像などのスライドショーを表示したり、ページ内にTwitterやFacebookなどを表示するJavaScriptも対応します。

以下がWebページを効果的に見せるために用いたソフトウェア一覧です。

HTML5

CSS3
SCSS
Twitter
BootStrap

JavaScript
CoffeeScript
AngularJS
jQuery

PhotoShop
Illustrator
安定的に運用するための技術

Webサイト・システムの運用にはサーバが必要です。
サイト・システムの規模、内容に応じて、国内もしくはAmazonが提供しているAWSなどのデータセンタを使い分けることによって、コストを抑えて効果の高い運用を目指します。

システムの内容に合わせて適切なサーバ構成を提案します。 サーバ構成を決定するためには、システムの持つ性質や予想される来客数(アクセス数、負荷)を想定する必要があります。今後、より多くのお客様を引き入れる予定があるが最初は小さく始めたい場合、私たちはスモールスタートの提案をさせて頂きます。

当初はサイトの利用者様が少ないことを想定してサーバ1台でコストを抑える構成。利用者様が増えてきましたら、そのサーバが行っていた仕事を、データベース専用のサーバ、Webアプリケーションのためのサーバと切り分けていきます。そうして、利用者様の数に合わせてサーバの数を増やしていくことをスケールアウトと呼びます。一方、サーバの性能をアップさせることをスケールアップと呼びます。スケールアウトとスケールアップでは、スケールアウトの方がサーバ費用は安く済みますが運用が複雑になります。スケールアップは費用が割高になりますが、運用は単純です。私たちは利用状況に応じてスケールアウト・スケールアップを使い分けることで、費用と運用の手間のバランスの取れたサーバ構成を提案します。

加えて、こうしたサーバはセキュリティリスクを回避するために、ソフトウェアのアップデートなど継続的に保守する必要があります。適切に保守されないサーバは、システムの利用者様にリスクを押し付けることになってしまいます。私たちは、継続的な保守運用にも対応していますので、ご相談ください。

以下がサーバを安定的に運用するために用いたソフトウェア一覧です。

Linux
CentOS
Ubuntu
Debian

Webサービス
Apache
Nginx

AWS S3
Lambda
API Gateway

Heroku
さくらのVPS

お名前ドットコム