40歳、介護士のイノスインターン生です。
先日、弊社Webサイトの修正をしました。
Editor.jsというブロックエディタの部分を修正したのですが、
初めて触れた機能で学びもありました。
そこで、弊社では「Editor.js」とはどのような機能なのか、勉強会を開催しました。
第19回はその勉強会と同じ様な内容でお伝えしていきますね。
：目次
- はじめに
- JabaScriptとは？
- Editor.jsとは？
- CDNとは？
Editor.jsとは、
ブロックエディタを開発できるJavaScriptライブラリのひとつ
のことです。
この説明だけだとよく解らないと思いますので、順番に解説していきますね。
JavaScript、略してジェイエスと呼ばれたりしています。
Javaと名前が似ているためよく間違われますが、全く違うプログラミング言語です。
JavaScriptは主に
「WEBページやWEBアプリケーションを利用するユーザーの使いやすさを向上させる」ために使われていて、
Webアプリケーションの開発に様々な場面で使われています。
JavaScriptがどのような場面で使用されているのかというと、
・ウェブサイトで操作をして表示を変化させたいとき
・画面を更新せずにサーバと通信をしたいとき
に使われています。
・ウェブサイトで操作をして表示を変化させたいとき
メルカリを例にすると、Webサイト上のある箇所にマウスを乗せると、
プルダウンが展開するような挙動を見たことがあると思います。
基本的にこれはJavaScriptで実装されています。
・画面を更新せずにサーバと通信をしたいとき
こちらは、いいね機能を思い浮かべていただくと解りやすいと思います。
いいねボタンをクリックすると、ブラウザ全体がリロードされることなく、
ボタンの表記だけが変わると思います。
この時「自分がいいね登録した」という情報はデータベースに保管されています。
そして、再度同じ場所をクリックすると「自分がいいね登録した」という情報はデータベースから取り除かれると思います。
この挙動は、その都度画面が再読込されたりしないので、操作がしやすいと思います。
この様な機能を実装する上でJavaScriptが利用されています。
上記の様な機能を実装し、
WEBページのボタンやメニューバーなどの使いやすさを向上させることで、WEBページの品質があがり、ユーザーの獲得につながるので積極的に利用されています。
そして、JavaScriptは世界中で活発に開発が行われていて、
たくさんの「JavaScriptライブラリ」が作られています。
・JavaScriptライブラリとは？
先程のボタンやメニューバーなどの機能を自分で1から作ろうとすると、
大変で時間がかかってしまいます。
ですが、その機能を作った方々がインターネット上で共有してくれています。
その共有してくれているものを「JavaScriptライブラリ」と言います。
「JavaScriptライブラリ」を使うことで、
開発が簡単になり、自分で1から作る必要がなくなるため、
時間を短縮することができます。
Editor.jsとは？
Editor.jsとは、
ブロックエディタを開発できるJavaScriptライブラリのひとつのことです。
ちょっと解りにくいかも知れませんので補足すると、
エディタとは何かを編集するためのソフトウェアのことです。
テキストエディタだと、テキスト（文章）の編集をするためのソフトウェアのことです。
メモアプリなどのことを言います。
ブロックエディタを使うことで、HTMLやCSSの知識がなくても、
文章や画像の位置やレイアウトの変更を簡単におこなうことができます。
Finderss!ではEditor.jsを実装することで下の画像のような、
記事本文の編集ボックス内に、ブロックのメニューバーが表示される様になっています。
Editor.jsでは様々な機能が用意されています。
Finderss!の記事本文の編集ボックスでは
・テキスト編集
・リスト表示
・ヘッダー機能
・画像添付
・クオート
の機能を使用しています。
それぞれの機能をひとつのブロック単位として追記し、編集する事ができます。
ブロック単位で編集するため、ブロックエディタと呼ばれています。
Editor.jsを使うことで下の画像のような編集ができるようになります。
上の画像では少し解りにくいですが、Editor.jsを使うと、
リストやヘッダー、画像をそれぞれひとつのブロックとして追加していく形で
編集することができます。
ブロック単位のため、上の画像のようにレイアウトの変更も簡単におこなう事ができます。
・導入方法
Editor.jsをどのように使えばよいのかというと、導入方法としては主に3通りあります。
1つ目は、npmコマンドを使う方法。
Node.jsの開発環境が前提にはなりますが、npmコマンドから簡単にインストールできます。
2つ目は、CDNを利用する方法。
Node.jsの開発環境が無かったりもっとシンプルに導入したい場合に最適で、次のようなscriptタグをHTMLに記述するだけで利用できます。
<script src=”https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest”></script>
3つ目は、ソースコードをダウンロードする方法。
公式のGitHubリポジトリから最新版のライブラリをダウンロードして、
scriptタグから利用します。
CDNとは？
Content Delivery Networkの略で、
自分のWebページを公開しているサーバーとは別のサーバーに、
コンテンツを配信するためのサーバーを用意し、そこからコンテンツを取得する方法です。
CDNを利用する事でサーバーの処理を分散でき、負荷分散や通信速度の上昇が見込めます。
今回の場合だと、Editor.jsを実行するためのソースがCDN用のサーバーに保存してあり、
そのサーバーにアクセスすることで、
自分達のプログラムでもEditor.jsを実行することができています。
Editor.js本体をダウンロードして使用する方法もありますが、
そちらの方法よりも実行速度が速いため、ほとんどの場合でCDNが使用されています。
以上の内容で、勉強会を行いました。
勉強会を自分で開催すると、より深くインプットとアウトプットができるので、
自分自身の知識も深まります。
あなたも弊社で勉強会を開催し、知識を深めてみませんか？
イノスカンパニーではプログラミングやウェブサービスの運用/企画を、勉強会やメンバーのサポートにより、学習しながら体験することができます。
この記事を読んでいただいたあなたも、一緒にウェブサービスの運用/企画の知識や技術を身に付けながら体験してみませんか？
最後に、合同会社イノスカンパニーでは学生・社会人を問わずインターンメンバーを募集しています。
・プログラミング(HTML/CSS/Javascript/Python)
・ウェブサービス運用/企画
・動画編集
・SNS運用
これらを体験してみたい方、新事業を作ってみたい方、一緒にやってみませんか？
応募はコチラから可能です。皆さまの応募をお待ちしています。