36日目 割烹芸人の開発1
今回から開発していきます。
正直とても地味な作業です。
ということで今回からメイン機能を開発していきます。
まずはメインのHTMLを作っていきます。(本番ではDjangoのテンプレートに載せますが、現段階ではα版リリースのために単体で動くものを作っておきます)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>割烹エディターα版</title>
<link rel='icon' href="favicon.png">
<meta name="description" content="割烹エディター">
<style>
</style>
</head>
<body>
<header class="header-logo"><img src="logo.png" class="logo"></header>
<main>
<p>※α版
※あくまでも試験的なものです。バグなどあるかも。
※そのうち改良されます。たぶん。
※なお本サービスは株式会社ヒナプロジェクトが提供するものではありません。個人的なやつです。
ちなみに「小説家になろう」は株式会社ヒナプロジェクトの登録商標です。
</p>
<strong>文章を書くところ:</strong>
<div id="editor"></div>
</main>
<script src="editor.js"></script>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
最低限これで動きます。
で、次にカスタムブロック用のJavascriptファイル、カスタムインライン用のJavascriptファイルを作って読み込ませます。
<script src="blocks.js"></script>
<script src="inline.js"></script>
まだ中身は何もないです。
ということで、基礎となる部分ができました。
ちなみにですが、HTMLを書くときにはBracketsを使っています。
HTMLのコード補完が優秀なので便利。
リアルタイムプレビューもできて、スタイルをいじると直ぐに反映してくれるのです。
HTMLできる人はここに小説家になろうのスタイル埋め込んで編集するのがいいかもしれませんね。
Brackets
http://brackets.io/