どうも、まさとらん(@0310lan)です!
今回は、普段から使い慣れているGoogleスプレッドシートを高品質なWebサイトに変換できるWebサービスをご紹介します!
ユーザーがやることはセルの値を変更するだけというお手軽さと、Webサイトのレイアウト構成を細かく変更したり上級者向けにJavaScriptやCSSを編集する機能も無料で提供されているのが特徴です。
手っ取り早くクオリティの高いWebサイトを作成したい人にも最適なので、ぜひ参考にしてみてください!
【 Siteoly 】
■「Siteoly」の使い方
それでは、「Siteoly」をどのように使えばいいのか詳しく見ていきましょう!
まずはサイトのトップページにアクセスして、画面上部にある【Login】ボタンから無料のユーザー登録をしておきます。
Googleのアイコン部分をクリックしてください。
するとアカウント選択画面が表示されるので、利用したいアカウントを連携しましょう。
以下のようなダッシュボードが表示されたら準備は完了です!
この画面からGoogleのスプレッドシートを活用した新規のWebサイトを作成できるようになっています。また、詳細なチュートリアルやドキュメントも充実しているので、最初にざっくりと目を通しておくといいでしょう。
■スプレッドシートからWebサイトを作ってみよう!
それでは「Siteoly」を利用してもっとも基本的なWebサイトを実際に作ってみましょう。
まずはダッシュボードから【Create new site】ボタンをクリックして新規プロジェクトを作成するところから始めます。
高品質なWebサイトのテンプレートがいくつか表示されるので、自分の好きなタイプを1つ選択してみてください。今回はサンプルとして「Book List Template」を選んでみました。
テンプレートを選択したら画面下部にある【Go To Next Step】ボタンをクリックします。
好きなプロジェクト名を設定してから、もういちど【Go To Next Step】ボタンをクリックしましょう。
次にGoogleスプレッドシートと連携する画面が表示されます。ただし、まだスプレッドシートを作成していないので、初回は「STEP1」の項目に表示されているアイコンをクリックしてください。
するとテンプレートに利用できるサンプルのスプレッドシートが表示されます。
現状のままだと編集ができないので、「ファイル」→「コピーを作成」をクリックしてスプレッドシートのコピーを作成しましょう。
自分のGoogleドキュメントからコピーされたスプレッドシートを開いて、アドレスバーに表示されているURLをコピーしてください。
コピーしたURLを「Siteoly」に貼り付けて【Go To Next Step】ボタンをクリックします。
最後にWebサイトの公開用URLをカスタマイズしましょう。
【①Check Availability】ボタンをクリックするとURLが重複していないかをチェックできます。問題なければ【②Finish and Create Site】ボタンをクリックすればWebサイトの完成です!
ダッシュボードに戻ると、さきほど作成したWebサイトのURLが表示されているのでクリックしてみましょう。
Webサイトが公開されているのが分かります!
あとはこのURLをメールやSNSでシェアすれば、誰でも閲覧できるようになります。
■スプレッドシートからWebサイトをカスタマイズしよう!
「Siteoly」ではスプレッドシートを編集するだけで、手軽にWebサイトを自分好みにカスタマイズできるようになっているのでご紹介しておきます。
そこで、さきほど作成したスプレッドシートをもういちど見てください。画面下部に複数のシートがすでに作成されているのが分かります。
これらのシートのなかでWebサイトを直接編集するのに必要なのは以下のシートになります。
- Navbarシート
- Headerシート
- Bodyシート
- Footerシート
上記シートは、Webサイトのレイアウト構成に従って以下の部分に対応しています。
今回選択したテンプレートに置き換えると次のようになります。
つまり、Webサイトの編集したい部分に対応したシートを編集すれば自分好みにカスタマイズができるというわけです。
たとえば「Navbarシート」を開くと、さまざまな設定項目がセットアップされているのが分かります。ここで「Style」の項目から背景色を変更してみましょう。
これはセルの値を編集するだけなので簡単ですね。
また「Menu」の項目から「Home」と記述されていた箇所を日本語で「ホーム」と書き換えてみます。
ブラウザを再読み込みして確認すると、画面上部にあるメニューの背景色と文字が変更されているのが分かります。
このようにセルの値を変更するだけで、Webサイトの対応している部分が自動的に更新されるわけです。カスタマイズするにあたりコードを変更する必要はありません。普段から表計算を扱っている人であればすぐにでも使いこなすことができるでしょう。
さらに「Bodyシート」に関しては、「Body-Cards」と「Body-Text」という2種類のシートが連動しています。
たとえば、「Body-Cardsシート」を開くと書籍のリストが表示されます。
これはWebサイトに表示されていた本のリストに対応しています。つまり、ここへ好きな本の情報を追加するとWebサイトも更新されるというわけです。簡易的なデータベースとして使えるので便利ですね。
ちなみに「リンク」部分にはAmazonなどのURLを貼り付けることもできますが、書籍の詳細ページを追加することも可能です。この場合は「DetailePagesシート」を開いてマークダウンで情報を自由に追加できるようになっています。
情報を追加したあとにWebサイトの本をクリックすると、その本の詳細ページが表示されるようになるのです。
簡単に好きなページを追加できるようになるので、慣れてくるとユニークなWebサイトが作れるようになります。
また「Body-Textシート」はWebサイトに好きなHTML要素を追加できる機能を提供しています。たとえば、Contentの箇所にHTMLで何か適当な要素を記述してみてください。
するとWebサイトの「Body」部分のトップに新しいHTML要素が追加されます。
テキストだけでなく画像なども自由に配置できたり、背景を画像にして自由度の高いWebデザインも構築できます。
このように「Siteoly」を利用すると、Webサイトのカスタマイズがすべてスプレッドシートのセルを編集するだけなので誰でも簡単に更新作業ができるようになるわけです。
■テンプレートの設定を変更してみよう!
「Siteoly」では、Webサイトをカスタマイズする以外にもテンプレートの初期設定を自由に変更できるオプションが提供されているので合わせてご紹介しておきます。
スプレッドシートを開いて「Site Settingsシート」を選択してみてください。
このシートでは、Webサイトのレイアウトを構成する「NavBar」「Header」「Body」「Footer」をそれぞれ表示するか非表示にするかを選択できるようになっています。たとえば、ヘッダー部分が不要だなと思ったら非表示にしてシンプルなWebサイトを構成することも可能です。
「Advanced Settingsシート」では、独自のJavaScriptやCSSを追加できるようになっています。
上級者向けの機能ですが、Webサイトに個性を出したり独自の機能を追加したい場合にはとても便利なオプションになるはずです。
ちなみにpaizaラーニングでは、JavaScriptやCSSの基本を学べる動画講座を公開しています。環境構築不要でブラウザさえあればスタートできますので、これを機にプログラミングもやってみたい!という方はぜひごらんください。
「Other Settingsシート」では、主にMetaタグ関連のカスタマイズができるようになっています。
さらにGoogleアナリティクスと連携させたり、ファビコンを変更したりなどもできます。他にも、Driftなどのチャットサービスと連携させて、手軽にWebサイトへチャット機能を追加するのも簡単です。
■動画&ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!
■まとめ
今回は、GoogleスプレッドシートでWebサイトを手軽に作成できるサービスについてご紹介しました。
普段から使い慣れている表計算をWebサイトに変換してくれるアイデアはとても面白く、また誰でも簡単に扱えるのは大きな魅力です。カスタマイズ性についても非常に高く、初心者から上級者まで幅広く楽しめるはずです。
これからWebサイトを作成しようと考えている人も含めて、ぜひみなさんもオリジナリティ溢れるページを作成してみてください!
<参考リンク>
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら