paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

Googleドキュメントでブログが作り放題になるWebサービス「Nocode」を使ってみた!

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

今回は、普段使っているGoogleドキュメントをブログとして使えるようにしてくれるWebサービスをご紹介します。

ブログの記事はすべてGoogleドキュメントで作成・管理できるようになっており、ボタンをクリックするだけでネット上に公開できる非常にお手軽なサービスです。

最近話題のノーコード(NoCode)でブログが作れるサービスとしても活用できるでしょう。

Nocode

f:id:paiza:20200715121627p:plain

■「Nocode」の使い方

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

まずはサイトのトップページにアクセスして【GET STARTED】ボタンをクリックしてください。

f:id:paiza:20200715121642p:plain


Googleアカウントとの連携画面になるので、ボタンをクリックして認証をしておきます。

f:id:paiza:20200715121654p:plain


次に、作成するWebページのテンプレートが選択できるのですが、今回は【Blog】を選んでみましょう。

f:id:paiza:20200715121712p:plain

(※他にも通常のWebサイトやポートフォリオなども作れます)


以下のようにWebページ作成用のエディタが表示されたら準備は完了です!

f:id:paiza:20200715121724p:plain

このエディタと自分のGoogleドキュメントを連携させながら、誰でも簡単にWebページを作っていけるのが「Nocode」の大きな特徴になっています。

どのような手順で作成していくのか、次の章から詳しく解説をしていきます。

■新規の記事を投稿してみよう!

今回はブログ用のテンプレートを選択したので、さっそくですが新しい記事を1つ投稿してみましょう。

まずはエディタ画面にあるメニューから【+ Add】ボタンをクリックします。

f:id:paiza:20200715121747p:plain


いくつか候補が表示されるので【Google Document】を選びます。

f:id:paiza:20200715121759p:plain


Googleドキュメントのファイル名を入力して【SAVE】ボタンをクリックします。

f:id:paiza:20200715121834p:plain

ちなみに、ここで入力するファイル名は最終的に公開用のURLに含まれるため英数字で入力しておきましょう。


次に、ブログへ投稿する記事を書くためにGoogleドキュメントで編集します。表示されているボタンをクリックしてみましょう。

f:id:paiza:20200715121845p:plain


すると、新規タブで通常のGoogleドキュメントが開きます。

f:id:paiza:20200715121900p:plain

これは自分のGoogleドライブに生成されたドキュメントであり、いつもどおり文章を書いていくことができます。


そこで、試しに何か適当な文章を記述してみてください。

f:id:paiza:20200715121911p:plain


そして「Nocode」の画面に戻ってみると、Googleドキュメントに記述した文章が反映されているのが分かります。

f:id:paiza:20200715121929p:plain

このようにGoogleドキュメントの内容が、そのままブログの記事として反映される仕組みになっているので非常に簡単ですね。


最後に設定ボタンをクリックします。

f:id:paiza:20200715121941p:plain


【Build Website】ボタンをクリックしましょう。

f:id:paiza:20200715121955p:plain

するとブログ用のWebページを自動的に生成してくれます。


次に、プレビュー用の【①リンク】が表示されるので内容を確認したうえで、【②PUBLISH】ボタンをクリックしましょう。

f:id:paiza:20200715122042p:plain


作成したブログがネット上に公開されて、正式なURLも一緒に表示されます。(URLはあとで変更可能)

f:id:paiza:20200715122051p:plain


また、Googleドライブを確認してみると「Nocode」が作成したフォルダが自動的に生成されているのが分かります。

f:id:paiza:20200715122133p:plain

このフォルダ内に投稿したブログ記事やウィジェット関連のファイルがまとめられています。投稿した記事が不要になったらGoogleドライブから直接削除すればいいだけなので管理も簡単というわけです。

■Googleドキュメントの利点を生かそう!

Googleドキュメントはそもそも文章を書くことに特化したサービスなので、「Nocode」を使ったブログとは相性がとてもいいのです。

たとえば、見出し・色分け・スタイル・リンク・注釈…など、ブログを書くうえで必要な機能はすでに提供されているので、そのまま「Nocode」のブログにも使えるわけです。

f:id:paiza:20200715122159p:plain


ちょっとした表を作成するのも簡単ですね。

f:id:paiza:20200715122223p:plain


もちろん画像や動画などはドラッグ&ドロップで貼り付けられるのもGoogleドキュメントの特徴でしょう。

f:id:paiza:20200715122233p:plain


また、スプレッドシートと連携したグラフ・チャートの作成も簡単に挿入できます。

f:id:paiza:20200715122246p:plain


Googleドキュメントには「目次」を作成する機能も提供されているので、長文のブログ記事を書くときにも重宝するでしょう。

f:id:paiza:20200715122259p:plain

このようなメリットを活用して書いた文章は、「Nocode」を利用してそのままブログ記事として公開できるので、誰でも簡単に読みやすい記事を作成できるわけです。

■ブログをカスタマイズしてみよう!

「Nocode」には他にも便利な機能がいくつか提供されているので、特に重要なポイントについてピックアップしてご紹介しておきます。

ブログの投稿エディタ画面を開いているときに、メニューから【+ Add】ボタンをクリックしてみてください。

f:id:paiza:20200715122316p:plain


するといくつかのウィジェットを追加できる画面が表示されるので、試しに【Image】を選択してみましょう。

f:id:paiza:20200715122329p:plain

この【Image】を追加するとアイキャッチ画像のような機能を追加できます。


手持ちの画像をアップロードしたりGoogleドライブに保存してある画像を利用できるのですが、「UNSPLASH」ボタンをクリックすると高画質なフリー画像を選ぶこともできます。

f:id:paiza:20200715122349p:plain


キーワードを入力すると関連した画像が表示されるので、好きなものを1つ選択しましょう。

f:id:paiza:20200715122406p:plain


すると、記事の冒頭部分に画像が追加されるわけです。

f:id:paiza:20200715122434p:plain


今度は、ブログのトップ画面で【+ Add】ボタンをクリックしてみましょう。

f:id:paiza:20200715122447p:plain


【Widget】の項目を選択します。

f:id:paiza:20200715122502p:plain


次に【Search】を選んでみましょう!

f:id:paiza:20200715122603p:plain


ブログのトップ画面上部に検索ボックスを追加できます。

f:id:paiza:20200715122622p:plain

この検索ボックスにキーワードを入力すれば、該当する記事の候補が出るようになるので訪問者の利便性がアップするというわけです。(日本語にも対応)


さらにブログの設定をクリックしてみてください。

f:id:paiza:20200715122634p:plain


【FEATURES】タブからブログサイトを2カラム・3カラム構成にレイアウト変更できるので、試しに【Right Navigation】にチェックを入れてみましょう。

f:id:paiza:20200715122653p:plain


すると画面右側にサイドバーが追加されているのが分かります!

f:id:paiza:20200715122703p:plain

【+ ADD CONTENT】ボタンをクリックして、Googleドキュメントからコンテンツを同じように作成していくことができます。

たとえば、おすすめの記事一覧コンテンツを作ったり、自分のプロフィールページを作成するなどの使い方もできるでしょう。


また、同じ設定画面にて【Domains】メニューを選択すると、ブログの公開用URLを編集できます。

f:id:paiza:20200715122720p:plain

URLは「【任意の英数字】.nocode.works」のような構成になっており、先頭部分の英数字を自分の好きなものに変更可能です。(独自ドメインも設定可)

他にも、ロゴやファビコンの変更、テーマカラーの編集といったこともできるので、自分のテーマに合わせてカスタマイズしてみると楽しいでしょう。

このように「Nocode」を活用すると、誰でも手軽にブログを作成して記事を公開できるようになります。また、ブログ以外にも通常のWebサイトやポートフォリオなども作れるので、手っ取り早く作って公開したい人にもおすすめできると言えます。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は、Googleドキュメントで誰でも簡単にブログを作れるサービスについてご紹介しました。

「Nocode」はまだ開発途中のサービスであり、現在進行系でサービスのブラッシュアップと機能改善・追加がおこなわれています。まだまだこれから新機能が追加されていく予定なので、興味のある方はいまのうちから慣れておくといいでしょう。

今回ご紹介した内容はすべて無料で利用可能です。ぜひみなさんもオリジナルのブログやWebサイトを作ってみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

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

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

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

paizaのおすすめコンテンツ

PPG proken プログラミングゲーム「初恋 プログラミング研究会〜海に行こうよ〜」 PPG Bingo プログラミングゲーム「コードレビューBINGO!!」
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.