20200522のHTMLに関する記事は12件です。

HTMLのタグの性質について

自己紹介

こんにちは、私はプログラミングを勉強し始めたばかりです。
先日HTML勉強した時にHTMLのタグに意味がある事を知りました。
以前見様見真似で書いた時に適当にタグをつけて書いてしまっていたので勉強も兼ねて今回はタグに意味について書こうと思います!

はじめに

HTMLのコードを描く前に設定する決まり事がいくつかあります。
見ていきましょう!

Hello.HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
DOCTYPE宣言

1.DOCTYPE宣言

<!DOCTYPE html>はDOCTYPE宣言といい性質は
書く文書がHTMLであることを宣言する
HTMLのバージョンを明記する
DTD(文章の構成要素)がなにか明記すること

の3つが目的です。ブラウザは宣言の内容に従って、文書を表示します。

2.言語の指定

  • <html lang="ja">""(ダブルクォーテーション)の中で表示する言語を設定します。
  • “ja”で日本語のWebページになります。

3.headとbody

  • headタグとbodyタグはhtmlタグの直下で1度だけ使用するHTMLタグです。
  • <head>にはtitleなどの文章情報要素が入ります.
  • <body>には文章を構成する要素が入ります。

4.ページのタイトル

  • <title>タイトル</title>と入力します。
  • ページを開いた時にタブに表示される部分です。
  • どのページにも必ずタイトルがあります。検索する際のデータにもなるで必ずきちんとつけましょう。

タグの基礎

:question:そもそも何故タグを変えるのか

  • 人間は文字の太さや大きさで見出しと判断できますが機械はできないので見出しの場所を教えてあげる必要があります。
  • そのためにそれぞれ役割を持ったタグを入力します。
  • 今回はよく使うタグを数個ご紹介します!

Webページの構築によく使われているタグ

1.<p></p>

  • pタグはよく使われるタグです。
  • ひとつの文書のかたまり・段落で使用されます。

2.<b></b>

  • bタグは文章内で強調したい部分等に使用されるタグです。
  • 挟まれた文字は太字になります。

3.<strong></strong>

  • 文章内でさらに強調したい部分、重要な部分に使われます。  
  • strongタグで挟まれた文章内に、さらにstrongタグで囲むことで強調の段階をつけることができます。

リスト関連タグ

1.<ul></ul>

  • ul要素は配置する文章のリストに、番号などの情報を持たせない場合に使用します。

2.<ol></ol> 

  • ol要素配置する文章のリストに、番号の情報を持たせる場合に使用します。

3.<li></li>

  • 1つのリストの要素を意味するタグで、必ずulリストかolのリストのタグに囲まれます。

リンクタグ

1.<a></a> 

  • a要素はWebページ内で別のページをリンクさせる時などに使用します。
  • aタグの中のhref=""でURLを指定します。
  • また、target=""でリンク先の開き方を指定することができます。 
  • _self :現在のウィンドウに表示
  • _new :新規ウィンドウ(1つ)に表示
  • _blank:新規ウィンドウ(複数)に表示などがあります。

2.<img>

  • img要素は画像を配置するタグで、終了タグを必要としないタグです。
  • src=""で画像のあるURLを入力します。
  • widthheight画像サイズの指定もできます。

まとめ

今回紹介したタグ以外にもいろいろなタグがたくさんあります。
是非タグをもっと詳しく調べて上、使い分けてよりよくコードを書きましょう!
最後まで読んでいただき有り難う御座います

参考リンク

https://tree-file.com/web-design/htmltag-basic/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

大阪府のコロナ追跡システムを考えてみる3

大阪府のコロナ追跡システムの開発費が80万円以内、14日間で納めるシステム開発続き。
初めての方は1からご覧ください。

詳細設計(内部設計)

DFD(データフロー図)とデータベース設計書を作成する。

DFD
20753BFF-5B9F-428B-BB2B-A30F5D51651D.jpeg
事業者情報ばっかり。。。

登録画面設計

Htmlを用いて事業者ごとに登録画面を作成する。

データベース設計(covid.db)

事業者管理テーブル(store)

名前 カラム名 データ型 制約
事業者ID Store_id char Primary,Not NULL
事業者名 Store_name varchar Not NULL
登録日 Reg_date date Not NULL

来客管理テーブル(visiter)

名前 カラム名 データ型 制約
来客ID Vis_id char Primary,Not NULL, AUTO_INCREMENT
事業者ID Store_id char Foreign,Not NULL
メールアドレス Address varchar Not NULL
来店日 Vis_date Timestamp Not NULL

QRコード作成システム設計

URL(https://covid-19tsuuchi.com/Store_ID) をQRコードとして発行してする。

通知システム

感染者の情報を受けたら、来客テーブルを基に接触可能性がある者に通知する。
通知のフローは以下のフローチャートに従う。

C1863FCC-6722-48BB-90D1-0DFDACF88792.jpeg

まとめ

運用でカバーという言葉は好きではないですが、そうなりそうですね。
次回はプログラミングに入ります。先に宣言しますが、テストはしません。

※筆者のPCが絶賛故障し、新しいPCの到着を待っている状態のため、一度休止とする。
残りはhtmlでページ作成とDB作成程度であるが、現在iPadしかないため、そこまでするのは難しい。

ここまで書いた結論としては、予算80万でも意外とイケそう。である。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

FC2ブログでGoogle Search Consoleを利用する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ハンバーガーメニューなぜbuttonタグ?

buttonタグについて調べていたら知らなかったことが出てきたのでメモして置きます。

buttonタグはフォーカスされるのに対して、divタグはフォーカスされない。なので、キーボードアクセシビリティを失うことにもなるみたいです。
divタグでフォーカスされるように設定するには、tabindexやjavascriptの記述などプラスで作業することが必要。
というか、素直に正しい役割を持つものを使用するのが良さそうですね。

buttonのtype属性に[submit,reset,button]の三つがあったので、ハンバーガーメニューなどのbuttonには

<button type="button">開閉する</button>

が良さそうです。

アクセシビリティについて考えながらコードを書いたことがなかったので、これから少しずつ習得していきたい。

詳しい作り方などは、下記のサイトがとても参考になりました。

参考サイト
https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
https://shibajuku.net/category/accessibility/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML 特殊文字 エスケープ処理

HTMLの特殊文字とは

HTML上、ただの文字列ではなく、特殊な意味を持つ文字。

エスケープ処理前と処理後

エスケープすると...(例↓)

  • <&lt;
  • &&amp;

ブラウザがHTLMLをレンダリングするときに、&lt;<に変換される。

その他の対応表は例えば以下リンク等に記載されている
https://www.benricho.org/symbol/tokusyu_07_mark.html

<script>alert("xssの危険")</script>
を文字列として出力したい場合。

エスケープ処理
<?php

$str = '<script>alert("xssの危険")</script>';

function h($s) {
    return htmlspecialchars($s, ENT_QUOTES, "UTF-8");
}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <?php echo h($str);?>
</body>
</html>

ブラウザで見るとJavaScriptのAlertダイアログを動作せず、

<script>alert("xssの危険")</script>

と表示される。

ページのソースを見ると、

&lt;script&gt;alert(&quot;xssの危険&quot;)&lt;/script&gt;

となっており、ブラウザがHTMLをレンダリングする時に、意図した文字列が出力されることがわかる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLから画像を生成するシンプルな方法(Node.js)

どうもこんにちは、@y_temp4です。

最近、趣味で個人開発している Web サービスの AnyMake にて、画像を動的に生成するプログラムを書く機会があったのでその方法についてまとめてみます。

関連記事:埋め込みコンテンツを追加しました!| AnyMake | note

node-html-to-image を使う

自分は画像生成周りは全然詳しくないのですが、普段フロントエンドのコードを書くことが多いので

HTML から画像生成できたら便利だな〜

と思いました。

そこで少し調べると、node-html-to-imageというライブラリが見つかり、これを使うと割と簡単にやりたいことが実現できそうでした。

使い方

以下のコードは README からの引用ですが、このように HTML を引数として渡してやると、その HTML の表示結果が画像として出力されます。

const nodeHtmlToImage = require("node-html-to-image");

nodeHtmlToImage({
  output: "./image.png",
  html: "<html><body>Hello world!</body></html>"
}).then(() => console.log("The image was created successfully!"));

上記の例だと、「Hello World!」と書かれたシンプルな画像ファイルが生成されます。

今回自分は画像を返す API を作りたかったので、README にある以下のコードを参考に作成しました。

const express = require("express");
const router = express.Router();
const nodeHtmlToImage = require("node-html-to-image");

router.get(`/api/tweet/render`, async function(req, res) {
  const image = await nodeHtmlToImage({
    html:
      "<html><body><div>Check out what I just did! #cool</div></body></html>"
  });
  res.writeHead(200, { "Content-Type": "image/png" });
  res.end(image, "binary");
});

非常にシンプルですがこれで最低限やりたいことは実現できたので、お手軽に画像生成したい場合はこれが良さそうです。


ちなみにですが、このライブラリの内部処理としては Puppeteer で HTML を描画してスクリーンショットを撮っているだけです。

言われてみれば確かにこれでいけるな...と README や内部の処理を読んでいて思いましたが、やっている事的にあんまり軽くはなさそうなので、もしこれより良さそうな方法で簡単に HTML から画像を生成する方法をご存知の方がいらっしゃればぜひコメント欄にて教えていただけますと嬉しいです ?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Vue.jsで作る!自動保存するToDoリスト~その1~

誰向けですか?

・Vue.js超初心者
・Vue.jsの基本構文は覚えたけど次は何すればいいの?
・リロードしたら消えちゃう!!

↑という方向けです。自分自身の学習のためにも記事を書かせていただきます!記述で間違いなどがありましたら教えてくださるとありがたいです?‍♂️

このパートの完成イメージ

スクリーンショット 2020-05-23 10.46.31.png

とりあえずinputに書いてbuttonを押すと配列(items)に追加できるようにしよう!
次回以降で順にCSSで見た目、watchやmountedを使用して保存できるようにします。

このパートですること

1.HTMLを書いてVueで操作できるようにする
2.Vueで配列の作成やinputをバインディングする
3.関数を作成して追加、削除できるようにする

1.HTMLの記述

index.html
<div id="app">
        <div>
           <!-- v-modelはこのinputをVueとバインディングさせる役割 -->
            <input v-model="message">
             <!-- @click=""の中はVueで記述するメソッド(@はv-on:の省略です) -->
            <button @click="add_item()">追加</button>
            <button @click="all_del_item">全削除</button>

            <!-- v-for( 配列, index(配列内の要素に振られた添字)を(item,idx)と表している ) -->
            <ul><li v-for="(item,idx) in items">
                {{ item }} <button @click="del_item( idx )"> 削除 </button>
            </li></ul>
        </div>
    </div>

Vue.jsの記述

main.js

const myApp = new Vue({

        // id="app"をVueでマウントする
        el: '#app',
        //何の処理もない配列やオブジェクトなどをおく場所(もしdataに処理を加えたい場合はcomputedを使う)
        data: {
            //配列の初期状態,良い朝の流れである
            items: ['起きる', '洗顔', '歯磨き',],
            //inputの初期状態(既に何か書かれていたら変なので空にしておく)
            message: ''
        },


これではまだmessageの追加や削除ができないので、data{},の続きにmethodsを記述する。

// Vueアプリケーション内で使用する関数を定義する場所
        methods: {
            // itemsに追加するメソッド、{ itemsにmessageをpush(追加)する }
            add_item: function () { this.items.push( this.message ) },
            // 削除ボタンを押した時のメソッド、{ items(自身)を1つsplice(削除)する }
            del_item: function ( _idx ) { this.items.splice( _idx, 1 ) },
            // itemsを全て削除するメソッド、spliceの数を大きい数字にすれば全て消えるでしょう
            all_del_item: function ( _idx ) { this.items.splice( _idx, 10000 ) }
        },

#まとめ

実際に記述してinputに書いた文字が追加・削除できたでしょうか?
次のパートではこの寂しい見た目をCSSで装飾しましょう!(SCSSかBootstrapで予定しています)
この記事を読んでくださったあなたの成長を応援させていただきます!!!

次回のパート
Vue.jsで作る!自動保存するToDoリスト~その2~Bootstrap編

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

disabled属性のフィールドのデータ送信方法

超絶初級レベルなんでしょうが、躓いたので備忘録としてdisabled属性のフィールドのデータを送信する方法をメモメモ、、、、。

やりたかったこと&躓いたこと

複数のラジオボタンのうち、1つのラジオボタンだけ権限付けをしておいて、権限がない人は、そのラジオボタンを選択できない。
ラジオボタン以外にもテキストエリアがあって、そのテキストエリアはだれでも編集できる。
権限がある当該のラジオボタンにif文でdisabled属性を付けておいた。
しかし、初めから権限付きラジオボタンが選択されていて、権限がない人がテキストエリアを編集しようとすると、ラジオボタンの情報が送信されないので、ぬるぽ、、、。

disabled

formのフィールドにdisabled属性を付けると、無効状態になって入力できない&データの送信もできない様になる。

jsで送信直前にdisabled属性を解除

送信ボタン押下でdisabledを解除する。但しこれは、押下後画面遷移するまで時間がかかる場合、disabledだった項目が選択(入力)できるような状態になってしまうので、これじゃダメな場合もある。(解除の方法をネットで調べると.disabled=falseとか出てくるが、私はそれではできなかった。)

<input type="radio"   name="radio" id="radio" value="送信内容" disabled="disabled" /> 
<input type="submit" value="送信" onclick="javascript:unDisabled();" />
<script type="text/javascript">
            function unDisabled()
            {
                $('.radio').removeAttr("disabled");

            }
        </script>

送信直前にdisabledの値をhiddenにコピー

ただし、今回のように権限付けしてあってdisabledが動的に決まるものだと、同じ内容のデータを2度送信してしまう可能性がある。これの回避は結構めんどくさそう。(いい方法があるのか分らんが、、、)

<script type="text/javascript">
            function text_copy()
            {
                document.formMain.text2.value = document.formMain.text1.value ;
                return true;
            }
        </script>
<input type="hidden"   name="text2" id="hidden_text" value="" />
            <input type="radio"   name="radio" id="radio" value="送信内容" disabled="disabled" />
            <input type="submit" value="送信" onclick="text_copy();" />

readonlyにしてcssで選択不可にする

https://freelance-jak.com/technology/javascript/553/

こういう方法もあるらしい。

参考

https://lightgauge.net/language/html/2525/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

html.erbでナンバリング(番号をふる)をする方法

HTMLの表示側で例えば、

  • 特徴1
  • 特徴1、特徴2
  • 特徴1、特徴2、特徴3…

のように内容によって、数値が変わるように番号をつけるときに使うコード。
(とくに利用が多いのはこういうときだった)

with_index(1) を利用する

こちらを利用することで、 ナンバリングスタート時の値を()内の値からスタートすることができ、
+1 と書く必要がなくなる。

<% ....map.with_index(1) do |a, i| %>


<p><%= i %></p>

each.with_index

こっちだと、 0 スタートになってしまうので、 +1 と書く必要が発生する。

<% ....map.each_with_index do |a, i| %>

<p><%= i + 1 %></p>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

TOC

TOC
Table of Contents
見出しから目次を作ってくれるようなやつ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 323日目

100日チャレンジの323日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
323日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【EJS使い方】簡易CMSのようなものをつくる

EJSとは

Node.jsでコンパイルできるHTMLテンプレートエンジン。HTMLの共通部分をJavaScriptのような書き方で効率化することができる便利なもの。

EJSで簡易CMSのようなものを作る

今回やりたいことはタイトルの通り。EJSを使って簡易CMSのようなものを作りたい。EJSではJavaScriptのfor文のように繰り返し処理を扱うことができるから、この仕組を用いて簡易CMSのようなものを作ります。

作ろうと思ったきっかけ

今の会社でHTMLメールの制作をしているのですが、これが毎回ほぼ使いまわしで、中身の変更をコピペで何回もしないといけなかった。また、コピペでやってるからたまに変更忘れとかが起こっていた。
これらをどうにか時間短縮とミスを減らすことができないかと考えた結果、EJSを使えば簡易的なCMSのようなものが作れそうだとなり実際にやってみた。

まずはEJSが動く環境を作る

EJSはそのままでは機能しません。タスクランナーを使ってHTMLに変換してあげる必要があります。
今回はgulpで環境構築をしました。

ディレクトリ図

今回、用意する環境は最終的にこんな感じ。
とりあえずnode_module、package.json、package-lock.json以外を用意します。

├── node_module(npmでインストールする)
│   └── 大量に色々パッケージが入っている
├── package.json(npmでインストールする)
├── package-lock.json(npmでインストールする)
├── gulpfile.js
├── dev(ここが作業フォルダになる)
│    └──index.ejs
└── dist(ここにejsがコンパイルされてhtmlとして出力される)

以下、環境構築の説明ですがgulpを動かすにはNode.jsをインストールしてnpmコマンドを動くようにしておく必要があります。
Node.jsのインストールからnpmコマンドを使えるようにするまではics.mediaさんのこちらの記事などを参考に済ませておいてください。
https://ics.media/entry/3290/

記事の「3. package.jsonファイルの作成」まで進めたら以下の必要なパッケージをインストールしてgulpファイルを用意できたら環境構築が完成です。ここからはコピペしてもらったら大丈夫です!

必要なパッケージ

  • gulp(gulpを動かすのに必要な本体)
  • gulp-ejs(EJSをコンパイルするもの)
  • gulp-rename(EJSをコンパイルして.htmlの形式にリネームするときに使用)

この3つが最低限必要なパッケージです。
今回はこれに加えてブラウザで表示確認もおこないたかったので以下の3つのパッケージもインストールします。

  • browser-sync(ローカルサーバーの立ち上げ)
  • gulp-plumber(エラー時の強制終了を防止)
  • gulp-notify(エラー発生時にデスクトップ通知する)

これらをそれぞれnpm installしていきます。
コマンドプロンプト上からcdコマンドで作業フォルダにて下記、コマンドでインストール。そのままコピペでOK!
npm i -D gulp
npm i -D gulp-ejs
npm i -D gulp-rename
npm i -D browser-sync
npm i -D gulp-plumber
npm i -D gulp-notify

package.jsonの中身が以下のような感じになっていたらOK!
つぎはgulpファイルを準備します。

package.json
"devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-ejs": "^5.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0"
  }

gulpfile.jsを用意する

gulpfile.jsを用意します。gulpfile.jsのなかにどのような処理を実行するかということを書き込むことで動かすことができます。以下をgulpfile.jsにコピペしたら大丈夫です。

コードの詳しい説明は今回は省略。gulp4ではtask()での書き方は非推奨になっているようなのでタスクごとに関数でプライベートタスクを作成し、exportsでパブリックタスクにしています。今どきの書き方になっているかな?

これで完成。早速EJSを使っていきます。

gulpfile.js
const { src, dest, watch, series } = require("gulp");
const browserSync = require("browser-sync").create();
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const ejs = require("gulp-ejs");
const rename = require("gulp-rename");

function buildServer(done) {
  browserSync.init({
    server: {
      baseDir: "./dist/",
      port: 3000,
    },
    online: true,
  });
  done();
  console.log("server launched!");
}
function serverReload(done) {
  browserSync.reload();
  done();
  console.log("reload completed!");
}
function Ejs() {
  return src(["./dev/**/*.ejs", "!" + "./dev/**/_*.ejs"])
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
    .pipe(ejs({}, {}, { ext: ".html" }))
    .pipe(rename({ extname: ".html" }))
    .pipe(dest("./dist"));
}
function WatchFiles() {
  console.log("start watch!");
  watch("./dev/**/*.ejs", series(Ejs, serverReload));
  watch("./**/*.html", series(serverReload));
}
exports.default = series(buildServer, Ejs, WatchFiles);
exports.Ejs = Ejs;

テンプレートをつくっていく

ここからEJSを使ってテンプレートを作成していきます。考えたいのはコンテンツ(テキストなど変更のある部分)とテンプレートの分離。これを実現するためにまずはindex.ejsの冒頭にオブジェクト形式でコンテンツの内容を用意する。

index.ejs
    <%
        const main = {
            title:'EJSで簡易CMS!',
            lede: 'ここは繰り返しのないテンプレート',
        }
        let content = [
            {
            title:'繰り返しのコンテンツ',
            text: 'contentのオブジェクトの中に配列としてコンテンツを格納する。'
            },
            {
            title:'配列でコントロールしている',
            text: '配列を増やしていくとその分、コンテンツが繰り返していくテンプレート!'
            },
            {
            title:'コンテンツが増えても楽!',
            text: 'どんどんコンテンツが増えてもここだけ増やせばいいからミスが減る。'
            }
        ]
        let subcontent = [
            {
            title:'コンテンツがあるかないかの判断もできる!',
            text: 'コンテンツがあれば表示なかったら非表示みたいな出し分けもできます。配列の中身を消してコンパイルしてみてください。オブジェクトごと消してしまうとエラーになります。'
            }
        ]
    %>

そして上で用意したコンテンツ部分を表示させるテンプレート部分を用意する。

index.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJSで簡易CMS</title>
</head>
<body>
    <!-- 繰り返しのないコンテンツmainで定義したものがここに出力される -->
    <section>
        <h1><%- main.title %></h1>
        <p><%- main.lede %></p>
    </section>

    <!-- 繰り返しのコンテンツcontentで定義したものがここに出力される -->
    <% for (var i = 0; i < content.length; i++) { %>
    <section>
        <h1><%- content[i].title %></h1>
        <p><%- content[i].text %></p>
    </section>
    <% } %>

    <!-- コンテンツがあるかないかの判断をifで、コンテンツがあれば繰り返す処理をforでおこなっている -->
    <% if (subcontent === undefined) { %>

    <% } else { %>
        <% for (var i = 0; i < subcontent.length; i++) { %>
            <section>
                <h3><%- subcontent[i].title %></h1>
                <p><%- subcontent[i].text %></p>
            </section>
        <% } %>
    <% } %>
</body>
</html>

for文で繰り返し処理をおこなって同じコードを何回もコピペしなくていい仕組みになっています。つまり、上で用意したオブジェクト形式のコンテンツ部分を追加するだけでコンテンツを書き足していくことができます。また、if文で条件分岐をつくって表示するかしないかという処理もできます。

一度、テンプレートをつくってしまえばHTMLタグの閉じ忘れだったり、コピペ間違いだったりを減らすことができます。

そして、最終的にはHTMLに変換してあげる必要があるので作業フォルダで
npx gulp
もしくは
npx gulp Ejs
のコマンドを実行します。

npx gulpはEJSのコンパイルとブラウザプレビューができます。
npx gulp EjsではEJSのコンパイルだけしてくれます。

そうしてdistフォルダにhtmlファイルが出力されてこのようになります。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJSで簡易CMS</title>
</head>
<body>
    <!-- 繰り返しのないコンテンツmainで定義したものがここに出力される -->
    <section>
        <h1>EJSで簡易CMS</h1>
        <p>ここは繰り返しのないテンプレート</p>
    </section>

    <!-- 繰り返しのコンテンツcontentで定義したものがここに出力される -->
    <section>
        <h1>繰り返しのコンテンツ</h1>
        <p>contentのオブジェクトの中に配列としてコンテンツを格納する。</p>
    </section>

    <section>
        <h1>配列でコントロールしている</h1>
        <p>配列を増やしていくとその分、コンテンツが繰り返していくテンプレート!</p>
    </section>

    <section>
        <h1>コンテンツが増えても楽!</h1>
        <p>どんどんコンテンツが増えてもここだけ増やせばいいからミスが減る。</p>
    </section>

    <!-- コンテンツがあるかないかの判断をifで、コンテンツがあれば繰り返す処理をforでおこなっている -->
    <section>
        <h3>コンテンツがあるかないかの判断もできる!</h1>
        <p>コンテンツがあれば表示なかったら非表示みたいな出し分けもできます。配列の中身を消してコンパイルしてみてください。オブジェクトごと消してしまうとエラーになります。</p>
    </section>

</body>
</html>

全体のソースコード

今回、作成したソースコードはgithubにあげているのでダウンロードもしくはクローンしてみてください。
https://github.com/makkii-y/EJS-template

感想

つくった感想としては、一度、テンプレートをつくってしまえばHTMLタグの閉じ忘れだったり、コピペ間違いだったりを減らすことができるという点がいいと思いました。
CMSを使うほどではないけど簡単に管理したいといったときにも威力を発揮するのではと思います。

参考にさせていただいた記事

https://ics.media/entry/3290/
https://www.i-ryo.com/entry/2020/05/17/094446
https://qiita.com/y_hokkey/items/31f1daa6cecb5f4ea4c9

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む