paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

コードエディタとブログが融合!ソースコードを記事にできるWebサービス「Poet」を使ってみた!

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

今回はブラウザ上で利用できるコードエディタと、ブログ記事の作成・公開ができるエディタが融合したちょっと変わった無料のWebサービスをご紹介します!

HTML / CSS / JavaScriptを利用したプログラミングをすることができるのですが、ソースコードを解説するための記事を簡単に作成できるという点がとても特徴的なサービスになっています。

ソースコードを視覚的に分かりやすく伝えることができるので、ご興味ある方はぜひ参考にしてみてください!

Poet

f:id:paiza:20190529134048p:plain
 

■「Poet」の使い方

それでは、まず最初に「Poet」の使い方から見ていきましょう!

サイトにアクセスしたら、画面上部にある「Login」をクリックしてください。

f:id:paiza:20190529134107p:plain


自分のGitHubアカウントと連携する画面になるので緑色の「Authorize」ボタンをクリックします。

f:id:paiza:20190529134118p:plain

これだけで準備は完了です。


「Create a new story」と書かれたリンクが表示されるのでクリックします。

f:id:paiza:20190529134135p:plain


デフォルトでVueやReactなどいくつかテンプレートが用意されているのですが、今回はゼロから始めたいので「Blank story」を選択します。

f:id:paiza:20190529134145p:plain


すると、コードエディタがブラウザ上で起動します。

f:id:paiza:20190529134157p:plain

このコードエディタは、一般的なプレイグラウンドとしてHTML / CSS / JavaScriptを利用したプログラミングができるほか、作成したソースコードを活用してブログ記事も書くことができるスグレモノです。

そこで、このエディタについてもう少し詳しく見ていきましょう!

■「Poet」エディタの基本的な使い方

まずはコードエディタとしての基本的な使い方から見ていきましょう。

デフォルトの状態だと画面の構成は次のとおりです。

f:id:paiza:20190529134225p:plain

後述しますが、画面のレイアウトは自分の好きなようにカスタマイズができます。


最初はJavaScriptファイルだけが表示されていますが、【+】アイコンをクリックして任意のファイルを追加することができます。

f:id:paiza:20190529134250p:plain


ファイル名を入力して【CREATE】ボタンをクリックするだけです。

f:id:paiza:20190529134301p:plain


任意のファイルをいくつでも追加していくことができます。

f:id:paiza:20190529134315p:plain


追加したファイルはJavaScriptから次のようにimportすることで適用されます。

import 'style.css';
import 'index.html';


f:id:paiza:20190529134358p:plain

ちなみに【Ctrl + S】のショートカットキーでコードの保存と実行を同時におこなうことができます。

■ソースコードを活用したブログ記事を作ろう!

それでは「Poet」の大きな特徴でもあるブログ記事の作成を試してみましょう!

まずは、画面上部のメニューから【Editor】を選択します。

f:id:paiza:20190529134437p:plain


すると、エディタのレイアウトを自由にカスタマイズできる画面が表示されます。

f:id:paiza:20190529134450p:plain

ブログ記事を作成するのに不要なHTMLやconsoleウィンドウは削除して、【story】と【story-preview】のウィンドウを新しく追加してみましょう。


エディタのレイアウトは以下のようになります。

f:id:paiza:20190529134507p:plain

もちろん自分の好きなレイアウトを構成しても構いません。ただ、記事を書くときにコードエディタに記述したソースコードを利用するので【editor】ウィンドウは残しておくほうが便利です。


記事の書き方ですが、まずは【New commit】ボタンをクリックしましょう。

f:id:paiza:20190529134631p:plain


テキストエディタが表示されるので、あとは普通にマークダウンで文章を書いていくことができるようになっています。

f:id:paiza:20190529134643p:plain

【Ctrl + S】で保存するとプレビューに整形された記事を確認することもできます。


次に、ドロップダウンリストから【position#1】を選択しましょう。

f:id:paiza:20190529134656p:plain


画面上部にある【View Story】をクリックします。

f:id:paiza:20190529134711p:plain


すると、新規タブでブログ記事として確認することも可能です。

f:id:paiza:20190529134726p:plain

これは最終的に記事を公開する時の画面になるので、定期的に確認しておくといいかもしれません。


さらに面白いのはソースコードを活用した記事を作成できる点です。

たとえば、記事の途中でソースコードを挿入したい場合は、対象のファイル名をリストから選択すればいいのです。

f:id:paiza:20190529134746p:plain


すると、マークダウンに対象のソースコードを意味する記述が自動挿入されて、プレビューにはコードが表示されているのが分かります。

f:id:paiza:20190529134759p:plain


また、コードを部分的に解説するようなケースはよくあると思いますが、文章と対象となるコードを視覚的に分かりやすくリンクでつなげる機能も搭載されています。

たとえば、querySelectorを使って解説するときにまずはマークダウンでリンクを記述します。

f:id:paiza:20190529134815p:plain

( )の中にカーソルを置いた状態にしておきましょう。


そして、説明しようとしている対象のソースコードをドラッグします。

f:id:paiza:20190529134828p:plain


すると、ソースコードのリンクが挿入されます。

f:id:paiza:20190529134838p:plain

この状態で保存したら記事を確認してみましょう!


querySelectorの文字にマウスを近づけると対象となるソースコードが視覚的に分かるようにビジュアライズされるのです!

f:id:paiza:20190529134857g:plain

これにより、ソースコードのどの部分を解説しているのかをより把握しやすくなるというわけです。

このようにPoetには、文章とソースコードを活用したブログ記事を書くための仕掛けが搭載されているのがユニークな点です。

■記事を公開してみよう!

最終的に記事を公開する前に、基本設定をおこなっておきましょう。

メニューから【Story】を選択します。

f:id:paiza:20190529135016p:plain


記事のタイトルや概要を入力することができます。

f:id:paiza:20190529135033p:plain

オプションとして、コメント欄を挿入したりコードエディタを埋め込んだりすることも可能です。


概要へ入力した文章は記事の冒頭部分に自動挿入されます。

f:id:paiza:20190529135052p:plain


また、コードエディタ自体を埋め込むタグを発行することもできます。

メニューから【Share/Embed】を選択します。

f:id:paiza:20190529135105p:plain


【Embed】に表示されているコードをHTMLに貼り付けることで、Poetのエディタがそのまま挿入されます。

f:id:paiza:20190529135124p:plain

また、ZIP形式で静的ファイルもダウンロードできるので、自分のサーバで公開したい場合に利用することができます。

このように、プログラミングから記事の作成・公開までを無料でできる上、Poet1つですべての作業を完結できてしまうという非常にお手軽なサービスと言えるでしょう。

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


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

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

■まとめ

今回はコードエディタとブログ記事の作成エディタが融合したWebサービスをご紹介しました。

他にも、自分のポートフォリオ的なプロフィールページを作れたり、エディタをフォークして新しい作品を作れる機能など楽しい仕掛けがたくさん搭載されています。

プログラミングや記事ライティングなどにご興味ある方ならきっと楽しいと思いますので、ぜひ気になった方は試してみることをオススメします!


<参考リンク>





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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud