目次

ここではWebフロントエンドのTipsをまとめていきたいと思います。

はじめに

Webフロントエンドとは

Webフロントエンドは、簡単に言うとWebサイトの表の顔のことです。Webサイトのレイアウトをイメージしていただければわかりやすいと思います。

しかし、一言で表の顔と言っても様々な要素を含みます。例えば、見た目はもちろんのこと、クリックしたときのエフェクトやフォームからの情報取得などです。

反対にWebサイトの裏の顔をここではバックエンド、サーバーサイド、インフラ系などと表現することがあります。

Webの仕組み

まずは一般的なイメージから説明すると、Webというものは作ったページをネットワークにアップロードし、世界中のどこからでもそのページにアクセスできる状態をイメージできます。

このような仕組みは、ドメインと言うネットワーク上の名前(場所と結び付けられた名前)と、ネットワークにつながっているサーバーによって実現されます。そして、Webページを閲覧できる状態にするサーバーをWebサーバーと呼びます。

ただし、ページにアクセスするには必ずドメインが必要になるわけではありません。WebサーバーのIPアドレスからもアクセスはできます。IPアドレスというのはネットワーク上の場所を意味するからです。しかし、グローバルIPアドレスは高いお金を払って固定しない限り、日々変動するのでアクセスが難しくなります。そこで、IPアドレス(場所)とアルファベット文字列を使った特定の名前を結びつけるのがドメインの役割です。

つまり、ページを作ってそれを公開する場所をWebサーバーといい、Webサーバーのある場所にアクセスしやすいようIPアドレスを名前解決するものがドメインということになります。

もちろん、ドメインの役割はそれだけではありませんが、詳しい解説は他をあたってください。

一般的にはWebサーバーを業者からレンタルし、ドメインを業者から取得(時間単位)して運用するのが一般的です。

この記事ではWebフロントエンド中心の解説になると思いますが、Webバックエンドに関する部分もWebサイトを始めるにあたって必要な部分はちょっとだけ紹介することにします。

ただし、本格的なものではありません。Webバックエンドを本格的に紹介するとなるとログやトラフィックの解析、ネットワークの構築、セキュリティ、ユーザー管理などをまとめなければなりませんし、非常に広範です。

方針について

当記事の方針の一つは、著者が後々利用しやすいように作っていく方針です。

一部、表現等に正確ではないものも含まれると思いますが、この記事では正確さよりも分かりやすさを重視します。もし正確な情報が欲しければ、公式ドキュメントを参照してください。

なお、内容が充実してきたら別ページにも保存するかもしれません。

著者のレベル

著者はWebフロントエンドについては初心者です。この記事は調べたものを載せるというより、ほとんどがアドリブで、定義なども単に自分のイメージを書いているに過ぎません。

Webバックエンド

有料の場合はXドメインXサーバーをおすすめします。非常に一般的で解約も簡単です。

この点、他の日本業者は悪質な業者も多く、有名なところでも疑問が浮かぶ業者は多いです。したがって、サービスを登録する場合、特に注意しなければなりません。ちゃんと下調べしてから契約することにしましょう。と言ってもこの辺りの分野だと検索しても本当の情報はなかなか入手しづらい状況です。したがって、身近に詳しい人がいればその人に聞くのが一番だと思います。

無料ドメインの取得

ドメインの.tkなどは無料でFreenomDot TKから取得できます。

取得したドメインはWebサーバーの運用を他人に任せている場合でも使用することができます。元のアドレスからリダイレクト(転送)するという選択もあります。

SSLの取得

無料でSSLを有効にするにはCloudFlareというサービスがあります。また、Webサーバーを運用している人はLet’s Encryptを使うことができます。

SSLというのは、通信の暗号化技術を指す言葉で、SSL証明書を取得することでWebサイトへのアクセスをhttpsプロトコルを使って通信できるようになります。httpsプロトコルを使って通信することで、通信内容は暗号化され、通信傍受などが困難になります。

httpsでWebサイトにアクセスし、ページの通信全体が問題なく暗号化されていればブラウザのアドレスバーに緑の鍵マークが表示されるようになります。

Webサーバーにホストする

Webサーバーの運用には、PaaS(Platform as a Service)と呼ばれるサービスを利用することもできます。

例えば、Heroku, OpenShift, Azure, Bluemix, AWS, Google Cloudなどを使うことができます。これらはWebアプリなどにも使われることが多いプラットフォームです。しかし、大抵の場合、Web Serverとしても機能し、Webサイトをホストすることができます。

個人的におすすめなのはHerokuGoogle Cloudです。しかし、フリーで使う場合はいくつか無料制限があるのにも気をつけなければなりません。例えば、Herokuでは1日中アプリを動かすことができません。6時間のスリープが必要となり、定期的に呼び出しがないと自動スリープします。したがって、Herokuでページをホストする場合でも最初のアクセスに時間がかかることがあります。もし有料で使うとしたら、こちらがおすすめです。

サービスを利用する

データベースやトラフィックを管理しないで良いなら、GitHubやGitLabのアカウントを使ってWebページを公開することができます。この場合、Webサーバーは当該ホストする企業が管理することになり、自分で管理することはできません。したがって、Webサーバー側の設定も自分で変更することはできなくなります。

多少の不便はありますが、Webサーバーの管理を任せることにはメリットもあります。Webサーバーの管理は、時間もお金もかかり、なおかつ高度なセキュリティ知識を必要とします。

PaaSと比較し、できることは減りますが、こちらのほうが良い場合もあります。

レイアウトを考える

レイアウト、要はサイトやブログの外見ですね。

これをどうしたらいいのかというと、まずは、自分が良いと思ったデザインを真似してみることから始めるのが良いと思います。

世の中には自分で考えたものよりも遥かに素晴らしいデザインやレイアウトが溢れています。そこからインスピレーションを分けてもらいましょう。何もないところから頭を絞って考えるよりも遥かに効率的です。

しかし、真似と言ってもソースコードから全部を真似をするのではなく、おすすめはコードは自分で書くけど、外見を真似するってことですね。もちろん、ケースバイケースですが、基本的な姿勢としてはそれが良いと思います。

私の場合、TwitterAppleのサイトがかっこいいなと思ったので、TwitterやAppleのサイトのレイアウトをポイントだけ抽出して、真似して作りました。

ポイントというのは、例えば、ヘッダーメニューなどです。色合いや文字サイズ、エフェクトや表示方法などです。

ただし、全部真似しているかというと、見ればわかりますが、そうではありません。

私のサイトは、あくまで部分を真似しているところはあるけれど、全部が全部、TwiiterのサイトやAppleのサイトになっているかと言いうとそうではありません。

なぜなら、いくらかっこいいサイトでも、全部が全部かっこいいのかというと、それは違うと考えるからです。どのサイトにも、「自分ならここはこうした方がいいと思う」という部分は必ずあります。

これはあくまで私の主観ですが、「こうやったほうが、この部分はかっこよくなる」というのが必ずどのサイトにもあるものです。それは、たとえプロが作ったサイトであってもです。

その部分に関しては、自分の感性を優先させます。これは非常に重要なことです。

つまり、最初はかっこいい!かわいい!を見つける作業ですが、最後にはここはこうした方がかっこいい!を付け足していく作業なのです。

割合で言うと8割は真似をして2割はオリジナルという感じです。

もちろん、自分の感性で良いと思った部分が5割ならその5割を優先させますが、私の場合、巷にあふれているサイトのほうがかっこよく仕上がっていると思うことのほうが多いのです。

ただ、一つだけ言えることは、自分が良いと思った部分、自分で考えたレイアウトは大切にしたほうがいいということです。

そもそもデザインやレイアウトというのは個人の感覚が最も強く現れる部分でもあります。

どのサイトであっても、たとえ全部他人のテンプレートを使っていたとしても、個性は現れます。それは選択という部分でも個性が出るからです。

しかし、既に並んだものを選択するよりも、まだ並んだことのないものを自分で作るほうが、より自分の理想に近づいたレイアウトになる確率は高くなります。

レイアウトを作る

レイアウトをどうやって形作っているかを簡単に説明します。

これは、インターネットブラウザの機能を使います。例えば、Google Chromeの場合、右クリックして検証を選択します。

すると、下の方にStylesという項目が出てきますが、そこの値を変更したりしながら、理想のレイアウトを探していく作業になると思います。

まずは自分がかっこいいなと思ったサイトを見つけ、そして、そのサイトを検証をしながら自分が「ここはこうやったほうがかっこいいな」と思うポイントを見つけていきましょう。

完璧なレイアウトは存在しませんし、流行りのデザインなども年々変化していきます。あの時はかっこよかったものでも、今はそれほどでもないということは多いかもしれません。

したがって、最も重要なのは、その時、その瞬間、自分がどう感じるかです。

それを忘れずに、かつ流行りのデザインの良い部分を見つけ、そして、それに自分が良いと思った変化を付け足していきましょう。

シンプルの先から

変化を付け足していくのとは逆の発想になるかもしれませんが、デザインやレイアウトを考える際には、引き算も大切です。

特に、ごちゃごちゃしたデザインには引き算が必要ですよね。

したがって、常に自分の価値を付け足していくということにこだわらず、時には自分の価値観で引き算をしていくことも大切だと思います。

私はどちらかと言うと、レイアウトを考える際には消していく作業のほうが最終的には多くなります。

ただ、最初から引き算で考えるのかというと、そうではありません。元がなければ引き算はできませんし、元が少なければ引き算はマイナスの効果しか生み出さないでしょう。

したがって、最初は足し算で元を大きくし、最後に引き算で一気に減量するというのが、私がデザインを考える際の大体のパターンになります。

最初からシンプルに設計する、考えるという方法もありますが、それでは種を巻いた直後に育ってもいない芽を切り取る作業になってしまい、せっかく育ったらいい芽になったのにということはあるかもしれません。そして、それは育ってみないとわからないことでもあります。

したがって、私はあえて無駄に見える一旦育ててから刈り取るという一連の流れを採用することが多いです。

もちろん、やり方は人それぞれで、最初からどうせシンプルにするんだからそこから考えたほうがいいと思う人もいるし、そのやり方が間違っているわけではありません。

しかし、私のやり方としてはシンプルを目指す前に、一旦、材料を増やす、無駄を生み出すという工程を経ることがあります。

直感的作業

デザインというのは何か法則があって、その仕組みに沿って出来上がっている、こうでなければならないみたいな主張を見かけることがあります。

しかし、私の考えは違います。過去から現在にかけてのデザインの流行を見てみても、そんなものはどこにもありません。

したがって、もっと自由で良いのだと思います。デザインは自由で良い。

でも、自由でいいと言っても漠然としすぎていますよね。

ということで、これがどういう意味なのかを説明します。

デザインは自由でいいというのは、直感で決めて良いってことです。

反対に、ルールを作ってそれに沿って仕上げてもいいです。

ただし、このルールを他人が作るのでは、それは自由ではありません。ルールは他人が作ったルールに従うのではなく、ルールは自分で作りましょう。

多くのデザイナーが「こういうルールがある、ああいうルールがある、こういう仕組みがある」と説明するのを見かけることがあるかもしれません。しかし、それは盲目的に従うべきものではありません。参考にするのは良いかもしれませんが、それは絶対的な仕組みでもなければ、ルールでもありません。もちろん、正しいことでもありません。正しさは自分自身で判断しなければなりません。やがて最新のデザインも過去のものになり、どんなものでも常に変化していきます。時には予測もできなかった変化もあるでしょう。

そんな中、変化に対応し、時に変化自体を作り出していくことが時代には求められていくと思います。

私はそんなふうに考えています。

PaaSからデータベースサーバーを使い一つの認証ページを作成する方法

基本的には、以下のような構成になります。この流れを見ていくことで、Webフロントエンド(多少のバックエンドを含め)についてなんとなく理解できるのではないかと思います。

  • ユーザー管理にDrupalを使い、そのホスト先としてPantheonを選択する

  • hedley-serverを使ってDrupalのProfileを自動生成する。

  • elm-hedleyを使ってページを作成する

  • ページをGitHub Pagesにホストする

デモは以下のページに作成しました。

デモ : https://syui.github.io/elm-hedley/