paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

Googleスプレッドシートが高度なWebサイトに大変身するノーコードサービス「Siteoly」を使ってみた!

f:id:paiza:20210616110703j:plain
どうも、まさとらん(@0310lan)です!

今回は、普段から使い慣れているGoogleスプレッドシートを高品質なWebサイトに変換できるWebサービスをご紹介します!

ユーザーがやることはセルの値を変更するだけというお手軽さと、Webサイトのレイアウト構成を細かく変更したり上級者向けにJavaScriptやCSSを編集する機能も無料で提供されているのが特徴です。

手っ取り早くクオリティの高いWebサイトを作成したい人にも最適なので、ぜひ参考にしてみてください!

Siteoly

f:id:paiza:20210616111520j:plain

■「Siteoly」の使い方

それでは、「Siteoly」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトのトップページにアクセスして、画面上部にある【Login】ボタンから無料のユーザー登録をしておきます。

f:id:paiza:20210616111533j:plain


Googleのアイコン部分をクリックしてください。

f:id:paiza:20210616111545j:plain


するとアカウント選択画面が表示されるので、利用したいアカウントを連携しましょう。

f:id:paiza:20210616111611j:plain


以下のようなダッシュボードが表示されたら準備は完了です!

f:id:paiza:20210616111621j:plain

この画面からGoogleのスプレッドシートを活用した新規のWebサイトを作成できるようになっています。また、詳細なチュートリアルやドキュメントも充実しているので、最初にざっくりと目を通しておくといいでしょう。

■スプレッドシートからWebサイトを作ってみよう!

それでは「Siteoly」を利用してもっとも基本的なWebサイトを実際に作ってみましょう。

まずはダッシュボードから【Create new site】ボタンをクリックして新規プロジェクトを作成するところから始めます。

f:id:paiza:20210616111636j:plain


高品質なWebサイトのテンプレートがいくつか表示されるので、自分の好きなタイプを1つ選択してみてください。今回はサンプルとして「Book List Template」を選んでみました。

f:id:paiza:20210616111646j:plain

テンプレートを選択したら画面下部にある【Go To Next Step】ボタンをクリックします。


好きなプロジェクト名を設定してから、もういちど【Go To Next Step】ボタンをクリックしましょう。

f:id:paiza:20210616111657j:plain


次にGoogleスプレッドシートと連携する画面が表示されます。ただし、まだスプレッドシートを作成していないので、初回は「STEP1」の項目に表示されているアイコンをクリックしてください。

f:id:paiza:20210616111708j:plain


するとテンプレートに利用できるサンプルのスプレッドシートが表示されます。

f:id:paiza:20210616111718j:plain


現状のままだと編集ができないので、「ファイル」→「コピーを作成」をクリックしてスプレッドシートのコピーを作成しましょう。

f:id:paiza:20210616111728j:plain


自分のGoogleドキュメントからコピーされたスプレッドシートを開いて、アドレスバーに表示されているURLをコピーしてください。

f:id:paiza:20210616111737j:plain


コピーしたURLを「Siteoly」に貼り付けて【Go To Next Step】ボタンをクリックします。

f:id:paiza:20210616111746j:plain


最後にWebサイトの公開用URLをカスタマイズしましょう。

f:id:paiza:20210616111759j:plain

【①Check Availability】ボタンをクリックするとURLが重複していないかをチェックできます。問題なければ【②Finish and Create Site】ボタンをクリックすればWebサイトの完成です!


ダッシュボードに戻ると、さきほど作成したWebサイトのURLが表示されているのでクリックしてみましょう。

f:id:paiza:20210616111848j:plain


Webサイトが公開されているのが分かります!

f:id:paiza:20210616111859j:plain

あとはこのURLをメールやSNSでシェアすれば、誰でも閲覧できるようになります。

■スプレッドシートからWebサイトをカスタマイズしよう!

「Siteoly」ではスプレッドシートを編集するだけで、手軽にWebサイトを自分好みにカスタマイズできるようになっているのでご紹介しておきます。

そこで、さきほど作成したスプレッドシートをもういちど見てください。画面下部に複数のシートがすでに作成されているのが分かります。

f:id:paiza:20210616111915j:plain

これらのシートのなかでWebサイトを直接編集するのに必要なのは以下のシートになります。

  • Navbarシート
  • Headerシート
  • Bodyシート
  • Footerシート


上記シートは、Webサイトのレイアウト構成に従って以下の部分に対応しています。

f:id:paiza:20210616111938j:plain


今回選択したテンプレートに置き換えると次のようになります。

f:id:paiza:20210616111947j:plain

つまり、Webサイトの編集したい部分に対応したシートを編集すれば自分好みにカスタマイズができるというわけです。


たとえば「Navbarシート」を開くと、さまざまな設定項目がセットアップされているのが分かります。ここで「Style」の項目から背景色を変更してみましょう。

f:id:paiza:20210616111957j:plain

これはセルの値を編集するだけなので簡単ですね。


また「Menu」の項目から「Home」と記述されていた箇所を日本語で「ホーム」と書き換えてみます。

f:id:paiza:20210616112008j:plain


ブラウザを再読み込みして確認すると、画面上部にあるメニューの背景色と文字が変更されているのが分かります。

f:id:paiza:20210616112018j:plain

このようにセルの値を変更するだけで、Webサイトの対応している部分が自動的に更新されるわけです。カスタマイズするにあたりコードを変更する必要はありません。普段から表計算を扱っている人であればすぐにでも使いこなすことができるでしょう。


さらに「Bodyシート」に関しては、「Body-Cards」と「Body-Text」という2種類のシートが連動しています。

たとえば、「Body-Cardsシート」を開くと書籍のリストが表示されます。

f:id:paiza:20210616112036j:plain

これはWebサイトに表示されていた本のリストに対応しています。つまり、ここへ好きな本の情報を追加するとWebサイトも更新されるというわけです。簡易的なデータベースとして使えるので便利ですね。


ちなみに「リンク」部分にはAmazonなどのURLを貼り付けることもできますが、書籍の詳細ページを追加することも可能です。この場合は「DetailePagesシート」を開いてマークダウンで情報を自由に追加できるようになっています。

f:id:paiza:20210616112049j:plain


情報を追加したあとにWebサイトの本をクリックすると、その本の詳細ページが表示されるようになるのです。

f:id:paiza:20210616112207j:plain

簡単に好きなページを追加できるようになるので、慣れてくるとユニークなWebサイトが作れるようになります。


また「Body-Textシート」はWebサイトに好きなHTML要素を追加できる機能を提供しています。たとえば、Contentの箇所にHTMLで何か適当な要素を記述してみてください。

f:id:paiza:20210616112216j:plain


するとWebサイトの「Body」部分のトップに新しいHTML要素が追加されます。

f:id:paiza:20210616112225j:plain

テキストだけでなく画像なども自由に配置できたり、背景を画像にして自由度の高いWebデザインも構築できます。

このように「Siteoly」を利用すると、Webサイトのカスタマイズがすべてスプレッドシートのセルを編集するだけなので誰でも簡単に更新作業ができるようになるわけです。

■テンプレートの設定を変更してみよう!

「Siteoly」では、Webサイトをカスタマイズする以外にもテンプレートの初期設定を自由に変更できるオプションが提供されているので合わせてご紹介しておきます。

スプレッドシートを開いて「Site Settingsシート」を選択してみてください。

f:id:paiza:20210616112239j:plain

このシートでは、Webサイトのレイアウトを構成する「NavBar」「Header」「Body」「Footer」をそれぞれ表示するか非表示にするかを選択できるようになっています。たとえば、ヘッダー部分が不要だなと思ったら非表示にしてシンプルなWebサイトを構成することも可能です。


「Advanced Settingsシート」では、独自のJavaScriptやCSSを追加できるようになっています。

f:id:paiza:20210616112250j:plain

上級者向けの機能ですが、Webサイトに個性を出したり独自の機能を追加したい場合にはとても便利なオプションになるはずです。

ちなみにpaizaラーニングでは、JavaScriptCSSの基本を学べる動画講座を公開しています。環境構築不要でブラウザさえあればスタートできますので、これを機にプログラミングもやってみたい!という方はぜひごらんください。


「Other Settingsシート」では、主にMetaタグ関連のカスタマイズができるようになっています。

f:id:paiza:20210616112303j:plain

さらに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ラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.