表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
とある割烹芸人の開発日誌 ~100日以内に割烹エディターをリリースする割烹芸人~  作者: とある割烹芸人まーくつーせかんど
α版への道
11/48

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>



最低限これで動きます。


挿絵(By みてみん)




で、次にカスタムブロック用のJavascriptファイル、カスタムインライン用のJavascriptファイルを作って読み込ませます。


<script src="blocks.js"></script>

<script src="inline.js"></script>



まだ中身は何もないです。


ということで、基礎となる部分ができました。








ちなみにですが、HTMLを書くときにはBracketsを使っています。

HTMLのコード補完が優秀なので便利。


リアルタイムプレビューもできて、スタイルをいじると直ぐに反映してくれるのです。

HTMLできる人はここに小説家になろうのスタイル埋め込んで編集するのがいいかもしれませんね。


挿絵(By みてみん)



Brackets

http://brackets.io/




挿絵(By みてみん)


もしゃもしゃ。バランスべんきょうちゅー

評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ