背景

過去記事：https://qiita.com/take4eng/items/d0b009c48ee8c3fe420a

上記の過去記事に記述しているように、Javaでサーバープログラムを作成しソケット通信を実施。
⇒ HTTP通信をゴリ押しで解析しているため、無駄に複雑なコードになっている。

Java EEにはsocket通信に関するAPIが多数存在し、非常に簡単に実装することが可能。
既に多くの人がまとめてくれてはいるが、実装した内容をまとめておく。

便利なAPIが用意されているのにゴリ押しで解析なんて誰もやらないよね
そりゃググってもなかなか出てこないわ…

実践内容

1. WebSocket API の使用方法
2. APIを使用したサーバープログラムを作成
3. 過去記事内のクライアントプログラムコードを編集しチャットアプリ作成

WebSocket API の使用方法

基本的なWebSocket APIについて説明する。
ここで紹介するもの以外にも多数のAPIが存在するが、必要ならググると良い。

Endpointクラスの作成

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/コンテキストパス")
public class SanpleEndpoint {
}

1. ServerEndpointクラスをインポート
2. クラスにアノテーション@ServerEndpointを付与
3. ファイルの場所を示すコンテキストパスを記述

処理メソッドの作成

/*
各クラスをインポートしておく
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
*/

//クライアントと接続したときの処理
@OnOpen
public void onOpen(Session session) {
}

//クライアントからメッセージを受け取ったときの処理
@OnMessage
public void onMessage(String message) {
}

//エラーが発生したときの処理
@OnError
public void onError(Throwable error) {
}

//クライアントと接続が切れたときの処理
@OnClose
public void onClose(Session session) {
}

1. 必要なクラスをインポート
2. メソッドに対応した各アノテーションを付与
3. 引数は必要に応じて変更 , 追加可能

APIを使用したサーバープログラムを作成

サーバープログラム

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

// Webソケットのサーバ側クラスであること表すアノテーション。
// 引数(wSck)はクライアントから接続時、使われるURIを表す。
@ServerEndpoint(value = "/wSck")
public class SocketFree2 {

    //クライアントのセッションスレッドを作成(クライアント毎にそれぞれのセッションを保存)
    //Set：重複要素のないコレクション
    //CopyOnWriteArrayList：java.util.Setをスレッドセーフにしたもの
    private static Set<Session> user = new CopyOnWriteArraySet<>();

    @OnOpen//クライアントと接続したとき
    public void onOpen(Session mySession) {
        System.out.println("connect ID:"+mySession.getId());//session.getId():セッションIDを取得
        user.add(mySession);//クライアント毎のセッションをリストに追加
    }

    @OnMessage//クライアントからデータが送信されたとき
    public void onMessage(String text , Session mySession) {//引数は送信されたテキストと送信元のセッション
        System.out.println(text);
        //getAsyncRemote()：RemoteEndpointのインスタンスを取得
        //sendText(String)：クライアントにテキストを送信
        for (Session user : user) {
            user.getAsyncRemote().sendText(text);
            System.out.println(user.getId()+"番目に"+mySession.getId()+"番目のメッセージを送りました！");
        }
        if(text.equals("bye")) onClose(mySession);//textが「bye」なら切断する
    }

    @OnClose//クライアントが切断したとき
    public void onClose(Session mySession) {
        System.out.println("disconnect ID:"+mySession.getId());
        user.remove(mySession);//切断したクライアントのセッションをリストから削除
        try {
            mySession.close();//closeメソッドで切断
        } catch (IOException e) {
            System.err.println("エラーが発生しました: " + e);
        }
    }

}

コードの解説

1．クラスにEndpointアノテーション@ServerEndpointを付与し、コンテキストパスを記述
@ServerEndpoint(value = "/wSck")

2．各クライアントを識別するリストを作成
private static Set<Session> user = new CopyOnWriteArraySet<>();

3．onOpenメソッド：クライアントのセッションをリストに追加
user.add(mySession);

4．onMessageメソッド：受信したテキストをそのままクライアントへ送信
⇒ for文で接続しているクライアント全員に送信する
user.getAsyncRemote().sendText(text);

5．onCloseメソッド：接続が切れたクライアントを削除
5-1．userリストから削除：user.remove(mySession);
5-2．セッションを削除し接続を切る：mySession.close();

実行結果

クライアントプログラムのアドレスを変更し、webブラウザで実行。
※コード内容は過去記事を参照
var wSck= new WebSocket("ws://localhost:8080/プロジェクト名/コンテキストパス");
(今回なら"ws://localhost:8080/freeWeb2/wSck")

送信した内容が表示されるチャットアプリが完成。
複数のブラウザからのアクセスにも対応している。

感想

APIを使用することで非常に簡単にソケット通信を行うことができた。
過去記事で記述しのものと比べるとコードの記述量は約1/4。すごい。超簡単。

他にもエンコード、デコード処理やjsonデータの扱いについても簡単にできるらしい。
今回は使用していないが、本格的な開発をするなら必要になるだろう。
詳細は参考ページを参照。

参考ページ

• http://dukelab.hatenablog.com/entry/2014/02/23/145656
• https://cloudear.jp/blog/?p=2053
• https://qiita.com/opengl-8080/items/7ca8484c8579d264e239

トランプの図柄

前回の記事では Canvas API の基本的な扱いや注意点を述べました。今回はそのことを踏まえ、トランプの画像を Canvas API で描いていこうと思います。

それでは改めてトランプの図柄を見ていきましょう。縦横ともに 48px の正方形でカード部分は白で塗りつぶし、黒で囲います。その上に、上部にスート（記号）、下部にランク（数値）を配置する。これが基本形となります。

今回も雛形となる html ファイルを用意しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <canvas id="cvs">
    <script>
    </script>
  </body>
</html>

それではコードを書いていきましょう。

ベースの描画

今回は canvas 要素取得した段階で、縦横のサイズを設定しましょう。

const canvas = document.getElementById('cvs');
canvas.width = 48;
canvas.height = 48;
const ctx = canvas.getContext('2d');

canvas の基本サイズは縦 150px の横 300px です。きちんとサイズを変更してやらないと余計な空白ができてしまいます。あと CSS で指定するサイズとは別物ですので注意して下さい。

それではこの canvas に、単純な四角形を描いてみましょう。

ctx.beginPath();
ctx.moveTo( 0, 0);
ctx.lineTo(47, 0);
ctx.lineTo(47, 47);
ctx.lineTo(0, 47);
ctx.closePath();
ctx.stroke();

上と左の線が細いですね。これは指定した座標を中心として線が描画されるため生じる現象です。つまり左は -0.5 から 0.5 の 1px 分、右は 46.5 から 47.5 の 1px 分の太さで線を描画している、結果、左側は 0.5px 分の細い線になってしまうというわけです。なので 0 となっているところはすべて 1 に変更しましょう。

それではこの四角形の角を落としてみましょう。

ctx.beginPath();
ctx.moveTo( 6, 1);
ctx.lineTo(42, 1);
ctx.lineTo(47, 6);
ctx.lineTo(47, 42);
ctx.lineTo(42, 47);
ctx.lineTo(6, 47);
ctx.lineTo(1, 42);
ctx.lineTo(1, 6);
ctx.closePath();
ctx.stroke();

落とされた角は、まだ直線で繋げられています。この角を、弧を使ってつなげてみましょう。

まず右下の角に注目しましょう。この角は三時から六時の 90 度で弧を描く必要があります。前回も述べた通り arc の描画開始角度は三時を 0 度とします。なので以下のように書けば求める描画ができます。

ctx.beginPath();
ctx.moveTo( 6, 1);
ctx.lineTo(42, 1);
ctx.lineTo(47, 6);
ctx.lineTo(47, 42);
// ctx.lineTo(42, 47);
ctx.arc(42, 42, 5, 0, Math.PI / 2);
ctx.lineTo(6, 47);
ctx.lineTo(1, 42);
ctx.lineTo(1, 6);
ctx.closePath();
ctx.stroke();

それでは左下はどうコードを書けばいいでしょうか？　六時を開始角度として 90 度の弧を描けばいいのだから、以下のようなコードを思い浮かべると思います。

ctx.arc(6, 42, 5, Math.PI / 2, Math.PI / 2);

しかしこのコードでは思い通りの描画がされません。arc の終点角度は開始角度から何度というものではなく、円全体のどの角度で終わるかを指定する必要があります。終点角度は九時の角度になりますから丁度 180 度、ラジアンだと Math.PI となります。よってコードは以下の通りとなります。

ctx.beginPath();
ctx.moveTo( 6, 1);
ctx.lineTo(42, 1);
ctx.lineTo(47, 6);
ctx.lineTo(47, 42);
// ctx.lineTo(42, 47);
ctx.arc(42, 42, 5, 0, Math.PI / 2);
ctx.lineTo(6, 47);
// ctx.lineTo(1, 42);
ctx.arc(6, 42, 5, Math.PI / 2, Math.PI);
ctx.lineTo(1, 6);
ctx.closePath();
ctx.stroke();

それでは上のふたつの角も丸めてみましょう。

ctx.beginPath();
ctx.moveTo( 6, 1);
ctx.lineTo(42, 1);
// ctx.lineTo(47, 6);
ctx.arc(42, 6, 5, -1 * Math.PI / 2, 0);
ctx.lineTo(47, 42);
// ctx.lineTo(42, 47);
ctx.arc(42, 42, 5, 0, Math.PI / 2);
ctx.lineTo(6, 47);
// ctx.lineTo(1, 42);
ctx.arc(6, 42, 5, Math.PI / 2, Math.PI);
ctx.lineTo(1, 6);
ctx.arc(6, 6, 5, Math.PI, -1 * Math.PI / 2);
ctx.closePath();
ctx.stroke();

角は中心座標と半径を調節して、好みの弧を描いてみて下さい。

さて、枠が描けたところで body 要素に背景色を設定してみてくださ。

<body style="background-color:forestgreen">

枠の中も緑色になってしまいますね。そう、塗りつぶしをまだ行っていませんでした。

fill も stroke も、デフォルトの色は黒になります。塗りつぶしは白で行うので、まずは色を変更しましょう。

ctx.fillStyle = "white";

そして塗りつぶしですが、線描画を行う前に塗りつぶしを行って下さい。順番を逆にしてしまうと線も塗りつぶされてしまいます。

ctx.fill();
ctx.stroke();

すこし長くなってしまったので、今回は最後にここまでのコードをアップして次回につなげようと思います。

それでは。

const canvas = document.getElementById('cvs');
canvas.width = 48;
canvas.height = 48;
const ctx = canvas.getContext('2d');

ctx.fillStyle = "white";
ctx.strokeStyle = "black";

ctx.beginPath();
ctx.moveTo( 6, 1);
ctx.lineTo(42, 1);
ctx.arc(42, 6, 5, -1 * Math.PI / 2, 0);
ctx.lineTo(47, 42);
ctx.arc(42, 42, 5, 0, Math.PI / 2);
ctx.lineTo(6, 47);
ctx.arc(6, 42, 5, Math.PI / 2, Math.PI);
ctx.lineTo(1, 6);
ctx.arc(6, 6, 5, Math.PI, -1 * Math.PI / 2);
ctx.closePath();
ctx.fill();
ctx.stroke();

EJSとは

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

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

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

作ろうと思ったきっかけ

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

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

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

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

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

ディレクトリ構成図

package.json

├── fuga.py
├── fuga_dir
│   ├── fuga
│   └── fugafuga
├── fugafuga.py
├── fugahoge.py
├── hoge.py
└── hoge_dir
    ├── hoge
    └── hogehoge

必要なパッケージ

• 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

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

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

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

JavaScriptのアロー関数が好きではない。

const f = () => { a++; };

let a = 1;
f();
console.log(a); // 2 ←

こんな仕様当然みんなからフルボッコのWTF案件だろうと思いきや、批判以前にそもそもこの仕様について言及している記事自体がほとんど見当たらない。
MDNにすらはっきりとは書かれていない。
仕様書まで追えば当然載ってはいるんだけど、こんなところまでいちいち読んでられませんよね。

まあスコープチェーンというJavaScriptデフォルトの仕様のせいであるわけですが、しかしわざわざ最近追加された仕組みなのだからこんなクソ仕様は断ち切ってほしかったところですね。
アロー関数の仕様を決めるときに誰も何も言わなかったのか？

HTMLで表のデータがクリックされた時にJavaScript関数を実行したい。
このような状況があり苦戦したので残しておく。

イベントハンドラをタグの属性部分に指定すれば、そこからJavascriptを実行できるようになる。
タグなどによって使用できるハンドラが異なっているようなので注意が必要。

<!DOCTYPE html>
<html>
    <head>
        <meta charaset="UTF-8">
        <title>表のデータがクリックされた時JavaScriptを実行したい</title>
        <script type="text/javascript">
            //表のデータをクリックしたときの処理
            function PushData(){
                alert("表のデータがクリックされました。");
            }
        </script>
    </head>
    <body>
        <div align="center">
            <h2>テーブル</h2>
        </div>
        <div align="center">
            <table border="1">
                <tr>
                    <th onclick="PushData()">見出し１</th>
                    <th onclick="PushData()">見出し２</th>
                </tr>
                <tr>
                    <th onClick="PushData()">データ１</th>
                    <th onclick="PushData()">データ２</th>
                </tr>
            </table>
        </div>
    </body>
</html>

はじめに

今回、aタグでpost送信したい時(ログアウトのリンクをクリック)がありましたので、その記述をメモとして残します。簡易的な自分用のメモですので、その点はご了承くださいませ。

記述方法

<form
  method="POST"
  name="logout_form"
  action="/logout">
  <!--CSRF-->
  <a href="javascript:logout_form.submit()">ログアウト</a>
</form>

aタグのhref属性にjavascript:(実行するJavaScriptコード) の形式で記述します。
上記で行っていることは、formのname属性を指定してあげて、submit()でフォームの内容を送信しています。
はい、以上になります。

おわりに

簡易なメモではありますが、もし間違い等ありましたらご指摘をお願いいたします。

参考資料

aタグをPOSTにする
HTMLのAタグでPOSTする方法

概要

Yellowfinのversion9ではダッシュボードの自由度が上がり、Javascriptを使って外部APIや自社サイトへ値をPOSTすることができるようになりました。そこで、今回はフォームを用意してレポートの値をフォームに写し、外部サイトにPOSTするというところを中心にやっていきます。(コード中のコメントでだいぶ補足してます・・・)

表示するレポートを選ぶ

レポートを検索し、ドロップすることで対象のレポートを表示します。
また、フォームはHTMLウィジェットをドラッグアンドドロップで配置して、コードモードで編集します。

コードモードのHTMLタブ

コードモードではこのようになります。
レポートと、フォーム、ボタン、テキストのウィジェットを配置したあとにその中のname要素を変更する感じです。

dashboard.html

<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="76a8ae2b-4f35-491a-9e3a-b8e66117ac97">
<report-output widget-uuid="dfdc880e-0216-4fdb-8d43-2caa21874aae" report-uuid="1bc0874b-2874-4dd5-87b5-4e1af27d9f7b" height="233" top="103" left="14" name="Sample" width="496" display-type="TABLE" style="z-index: 2"></report-output>
    <text-title-big widget-uuid="61cbf9ad-ffe2-41b3-98a4-c24ffc1b2526" width="547" height="69" left="14" top="18" line-spacing="40" character-spacing="0" rotation="0" name="Main Page Title" style="z-index: 3"><font xmlns="http:\/\/www.w3.org\/1999\/xhtml" color="#666666">Website Visits</font> 
<br xmlns="http:\/\/www.w3.org\/1999\/xhtml" /></text-title-big>
    <text-title widget-uuid="c749399d-0a8d-4273-bab9-f3290f454a89" width="425" height="61" left="14" top="56" line-spacing="30" character-spacing="0" rotation="0" name="Title (4)" style="z-index: 10"><font xmlns="http:\/\/www.w3.org\/1999\/xhtml" style="font-size: 24px;" face="Libre Franklin" color="#666666">Region Status and Uptime</font> 
<br xmlns="http:\/\/www.w3.org\/1999\/xhtml" /></text-title>
    <canvas-button widget-uuid="5acd6d3e-74b0-41d5-9744-fe2bb23cadb0" width="100" height="32" top="336" left="869" plugin-name="com.hof.mi.widgetcanvas.widgettemplate.CodeButtonCirclePurpleTemplate" text-color="#9C6ADE" name="Submit" style="background-color: #FFFFFF; border-radius: 6px; border: 2px solid rgb(102, 102, 102); z-index: 11; opacity: 1.0"></canvas-button>
    <custom-html class="requestForm" name="Form Container" widget-uuid="2e9bc2ad-54da-4a58-a374-5258e155372a" width="381" height="257" top="63" left="588" rotation="0" style="z-index: 7">
        <div class="form-title">kintoneに登録</div>
        <div class="form-row">
            <div class="form-label">Region: </div>
            <input type="text" name="pageTitle" />
        </div>
        <div class="form-row">
            <div class="form-label">Invoice: </div>
            <input type="text" name="exitRate" />
        </div>
        <div class="form-row">
            <div class="form-row-label">Enter Comments:</div>
        </div>
        <div>
            <textarea rows="5" name="comments"></textarea>
        </div>
    </custom-html>
    <text-paragraph widget-uuid="cedea1aa-cc5f-4209-996d-256ed18ed5af" width="493" height="33" left="588" top="389" line-spacing="17.5" character-spacing="0" rotation="0" name="Response" style="z-index: 9"></text-paragraph>
</canvas-area>

JSタブ

この中で、マウスクリックの列を取得し、中身をフォームにコピーします。
ついでにボタンにイベントを仕込み、指定したURLにデータをPOSTしてレスポンスを表示しています。

jstab.js

let report = this.apis.canvas.select('Sample');//HTMLタブ中のreport-outputタグのnameの値をセットする
let button = this.apis.canvas.select('Submit');//canvas-buttonタグのnameの値をセットする
let responseContainer = this.apis.canvas.select('Response');//必要ではないが、responseを取得した際に表示させるtext要素
/* Add an event listener to the report table so when you click it prefills the form*/
report.addEventListener('click', (event) => {
    let pageTitle = this.apis.canvas.select('pageTitle');//form上の要素のnameを指定する
    let comments = this.apis.canvas.select('comments');
    let exitRate = this.apis.canvas.select("exitRate");
    let $row = $(event.target).closest('tr');//クリックした部分に一番近い行のデータを取得
    pageTitle.value = $row.find('td').get(0).innerText;//左から0番目の値を取得し、formに代入
    exitRate.value = $row.find('td').get(2).innerText;//左から2番目の値を取得し、formに代入
    comments.innerText = $row.find('td').get(2).innerText;//適当
})
/* Setup a click listener on the Ok button so it sends an API request to anywhere */
    button.addEventListener('click', () => {//クリック時のイベントを実装
        let pageTitle = this.apis.canvas.select('pageTitle');
        let comments = this.apis.canvas.select('comments');
        let exitRate = this.apis.canvas.select("exitRate");
var sendurl = "http://localhost/test.php";//POSTしたいURLを指定、ここではphpの中でkintoneに登録し、returnで登録したidを取得しています。
var param = "data="+pageTitle.value+"_"+comments.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
    var READYSTATE_COMPLETED = 4;
    var HTTP_STATUS_OK = 200;
    if( this.readyState == READYSTATE_COMPLETED
     && this.status == HTTP_STATUS_OK )
    {
        // レスポンスの表示URLなどは例です
        responseContainer.innerHTML = "確認はこちら: <a href=https://kintone.cybozu.com/k/135/show#record=" + this.responseText + " target='_blank'>https://kintone.cybozu.com/k/135/show#record=" + this.responseText + "</a>";
    }
}
xhr.open('POST', sendurl);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send( param );
});

CSSタブ

ついでにスタイルシートをいじって少し修飾します。

csstab.css

custom-html.requestForm {
    font-family: Libre Franklin;
}

custom-html.requestForm div.form-row {
    margin-top: 15px;
    display: flex;
}

custom-html.requestForm div.form-title {
    font-size: 24px;
    color: #666666;
}

custom-html.requestForm div.form-label {
    text-align: left;
    font-size: 18px;
    display: inline-block;
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 25px;
    line-height: 25px;
    padding-right: 5px;
    color: #666666;
}

custom-html.requestForm div.form-row-label {
    font-size: 18px;
    color: #666666;
}

custom-html.requestForm input {
    width: calc(70%);
    padding: 0;
    font-size: 14px;
    border: 1px solid #666666;
    border-radius: 0;
    height: 23px;
}

custom-html.requestForm textarea {
    width: calc(100% - 6px);
    resize: none;
    font-size: 14px;
    border: 1px solid #666666;
    border-radius: 0;
}

こんな感じで

APIがあるサービスならそこにJSONでもbodyのテキストをつっこんで投げればよし、自社DBに値を突っ込みたいなら自社内のwebserverからそのDBに登録するスクリプトを介して登録すればよしと、間にひとつかます必要がありますが、ダッシュボード中のレポートの結果を見ながら、新しい値を登録したりといったこともできるようになりました。

アイデア次第ではかなりいろんなことができそうな気がしてきますね！

はじめに

簡単に自己紹介をしますと私は現在Vue.js中心に学習中のエンジニア未経験、フロントエンドエンジニア志望の者です。

ただ淡々と学習するのではなくアウトプットを通じて学習したことを深く理解すること、記事を残すことでこれを見た人へ何かしらのヒントになる情報を与えられることができればと思い作成しました。

目標物

TechpitのNuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう！【JAMstack】という教材からポートフォリオサイトを作成しました。

Nuxt.jsとは？

公式サイト
Vueから設計されたフレームワークです。
SSR（サーバサイドレンダリング）アプリケーションを簡単に作ることができます。

SSR（サーバサイドレンダリング）
本来クライアントサイドで実行して、レンダリングされるjavascriptの処理を、サーバサイドで実行して、レンダリングする仕組み。

Contentfulとは？

公式サイト
Wordpress等と同じCMSの一種です。

CMS
=> Contents Management System（コンテンツ・マネジメント・システム）

webサイトを簡単に構築・管理・更新できるシステムです。

JAM stackとは？

公式サイト
サーバーやデータベースに依存せずにサイトやアプリを作成します。
記事データはAPIで用意し、Nuxt.jsで各ページをマークアップすることで動的なコンテンツで静的なウェブサイトを構築する技術です。

主なメリット

• 表示が高速である
• バックエンドをいじらないためセキュリティを気にしないで済む

環境

エディタ
Visual Studio Code

ライブラリ等
node 12.16.3
npm 6.14.4
nuxt 2.12.2
+ nuxtjs/markdownit 1.2.9
+ nuxt-fontawesome 0.4.0
+ fortawesome/free-solid-svg-icons 5.13.0
+ fortawesome/free-brands-svg-icons 5.13.0
+ contentful .14.4

完成した物

こちらのリンクから実際のサイトをご覧できます。

画像

トップページ

詳細ページ

設計

ポートフォリオサイトページ構成

ページ	表示
トップページ	作品一覧
作品個別ページ	各作品に関する詳細情報
カテゴリページ	特定のカテゴリに属する作品の一覧
タグページ	特定のタグを持つ作品の一覧
検索結果ページ	特定のキーワードを含む作品の一覧

作品データ（Contentful）

フィールド名	説明
Tittle	記事のタイトル
Slug	記事のスラッグ
Subtitle	記事のサブタイトル
Date	作成日時
Category	カテゴリ
Tags	タグ（複数登録可）
Content	記事本文
Image	記事のサムネイル画像

Slug(スラッグ)について
SlugとはContentfulで記事を作成した時に設定する、サイト内の特定のページを識別するためのURLの一部です。
「vue.js-nuxt.js-portfolio」のように、キーワードをつなげて作ります。

作成中に起きたトラブル

問題1.

contentfulの記事データが読み込めない

解決方法
APIkeyを使う
「Space ID」と「Content Delivery API - access token」

// .contentful.json ファイル内
{
  "CTF_SPACE_ID": "Space ID",
  "CTF_CDA_ACCESS_TOKEN": "Content Delivery API - access token"
}

問題2.

ブラウザに【未定義のプロパティ「field」を読み取れません。】と出てサイトが表示しなくなる。

解決方法
原因：Contentfulで新規記事作成の時Imageを追加していなかった
解決：サムネイル画像を設定

問題3.

npmインストールしたらディレクトリ構成が変わってサイトが表示しなくなってしまった

解決方法
作業内容を戻す

$ git reset --hard HEAD

問題4.

NetlifyでGitHubと連携したデプロイができない。

Error: Cannot find module ‘Contentful’

解決方法？

Git連携を諦めて普通にアップロードする

$ npm run generate

でdistファルダ作成
Netfilyでdistフォルダをドラッグ&ドロップ

まとめ

最後に連携で詰まってしまい、５時間くらいかかってできなかったので一旦普通にデプロイしました。
いずれ再挑戦します。

フロントエンドエンジニア志望としては
Contentfulというサービスの使い方は学んでおいて損はなさそうです。
簡単にコンテンツが追加できるのは楽しいですね。

Nuxt.jsは初めてでしたがVue.jsが基本なので苦手な感じはしませんでした。
色々とエラーで苦しみながら成長できた気がします。
いい経験になりました！

これから自分なりに機能を追加したりスタイルを変えたりしてみようと思います。

ここまで読んでいただきありがとうございました。

Link

ソースコード

はじめに

ノリで作り始めたJavaScript処理系JOKEのステップ2開発記です。
JOKEとはなんなのか（なんではないのか）等については開発記その1もご参照ください。

今回のスコープ

変数を宣言し利用（参照）できるようにします。ただし、

• constとletのみ
• var（とそこから発生する巻き上げ動作）はサポートしない
• 宣言しないで変数を使うことはできない
• 分割代入は今後の課題

具体的には以下のプログラムが「正しく」動作することを目指します。¹

step/step0002_01.js

// 定数を宣言し参照する
const s = "foo";
console.log(s);

step/step0002_02.js

// 変数を宣言し、値を代入する
let s;
console.log(s);
s = "foo";
console.log(s);

step/step0002_03.js

// ブロックで囲めば同じ名前の変数を宣言可
// シャドーイングされていないブロック外の変数を参照できるかも確認
const s1 = "foo";
const s2 = "bar";

{
    const s1 = "FOO";
    console.log(s1, s2);
}

変数機能の仕様と実装

ソースコードは以下にあります。
https://github.com/junjis0203/joke/tree/step0002

Validator導入

constやletでの変数定義に関する仕様は以下に書かれています。
13.3.1 Let and Const Declarations

BNFは以下のようになっています。

LexicalDeclaration :
    LetOrConst BindingList ;

BindingList :
    LexicalBinding
    BindingList , LexicalBinding

LexicalBinding :
    BindingIdentifier Initializer
    ※Initializerはopt（なくてもよい）

Initializer（宣言時の初期化）はoptなので以下のプログラムは構文解析的には通ってしまいそうですがもちろんこのプログラムは駄目でブラウザでもNode.jsでもSyntaxErrorになります。

const s;

これをSyntaxErrorにすべきことは13.3.1.1に書かれています。

It is a Syntax Error if Initializer is not present and IsConstantDeclaration of the LexicalDeclaration containing this production is true.

IsConstantDeclarationの定義は13.3.1.3で書かれています。要するにconstで宣言されているという当たり前のことが（仕様として厳密に）書かれています。
ともかく、これについては構文解析時にInitializerとして解析したノードがあるかを調べれば実装できます。

厄介なのは次のケースです。
(同じスコープ内に）同じ名前で変数を宣言しているためにこれはNGです（仕様でも明記されています）

const s = "foo";
const s = "bar";

ただ、この「すでに同じ名前の変数があるか」チェックは純粋な構文解析の段階でやろうとすると複雑化が予想されます²。そこで、とりあえず構文解析は通した（ノードを作った）後に意味解析としてvalidationを行うようにしました。つまり、ParserとAssemblerの間に工程が増えたことになります。

1. Scanner
2. Parser
3. Validator ← New!
4. Assembler
5. Vm

letはキーワードではない

上記のようにInitializerのチェック、Validatorを導入しての変数名重複のチェックによりconstはできたので次にletに取り掛かりました。
実際にはconstをキーワードとして扱うようにScannerを改造する際に仕様の対応部分を参照したのですが

Keyword :: one of
    break       do          in          typeof
    case        else        instanceof  var
    catch       export      new         void
    class       extends     return      while
    const       finally     super       with
    continue    for         switch      yield
    debugger    function    this
    default     if          throw
    delete      import      try

(。´･ω･)? あれ？letなくない？

そう！
letはキーワードではないのである！

つまり以下のように書くのは問題ありません。

function let() {}

let();

ただし、

11.6.2.1 Keywords

let and static are treated as reserved keywords through static semantic restrictions (see 12.1.1, 13.3.1.1, 13.7.5.1, and 14.5.1) rather than the lexical grammar.

13.3.1.1 Static Semantics: Early Errors

It is a Syntax Error if the BoundNames of BindingList contains "let".

つまり、constやletで宣言する変数名としてletを使うことはできません。
頑張れば「仕様通りに」実装できますが、頑張る意味はあまりないのでJOKEではletは単純にキーワードにしました。

代入に関する仕様

代入の「左辺」に相当するLeftHandSideExpressionですが、BNFを単純に解釈するといろいろな「式」を含むことになってしまいます。

NewExpression :
    MemberExpression
    ※Memberとあるがこれ以下にただの識別子参照もある

CallExpression :
    MemberExpression Arguments

LeftHandSideExpression :
    NewExpression
    CallExpression

このBNFだけ見ると「え？これもOK？」となりますがもちろん駄目です。³

foo() = 123;

代入演算子には単純な「BNF的にはOK」に加えて以下の仕様が記載されています。

12.14.1 Static Semantics: Early Errors

It is an early Reference Error if LeftHandSideExpression is neither an ObjectLiteral nor an ArrayLiteral and IsValidSimpleAssignmentTarget of LeftHandSideExpression is false.

IsValidSimpleAssignmentTargetってなんじゃいということについてはこの単語で検索かければわかりますが普通に考えればわかるように「ただの変数参照」の場合はtrueで他はfalseです。これについては純粋な構文解析の時点で「ただの変数参照か」はわかるのでその時点でエラーにしました。

なお上記のように仕様では「Reference Error」となっていますがブラウザやNode.jsではSyntaxErrorになるし⁴、どちらかというと「文法的におかしい」面の方が強いのでJOKEでもSyntaxErrorにしました。

言語仕様以外の改造

以下では言語仕様以外の改造、すなわち開発していくうえでやりやすいようにしたという機能について説明します。

テスト方法の整備

ステップ1の段階で回帰テスト的な仕組みは作ったのですが、「例外起こらなければOK（言語的に変な改造を入れてしまったら例外が起こるだろう）」というものでした。
もちろん例外が起こらなければよいというだけでは駄目で、「想定する出力なのか（まだ演算はできませんが1+1がちゃんと2か等）」を調べる必要があります。これを実装しました。仕組みは以下のようになります。⁵

1. ファイルへの出力を行うWriteStreamを作る
2. 1.で作ったWriteStreamを使ってConsoleオブジェクトを作る
3. 作ったConsoleオブジェクトでconsoleを差し替える（ここがミソ）
4. JokeEngineに入力プログラムを与える（プログラムを実行する）。するとプログラムの出力（console.logしたもの）はファイルに出力される
5. WriteStreamを閉じる
6. あらかじめ用意されている「想定する出力」と同じかチェックする

具体的にはtest.jsのrunAndVerify関数参照なのですが、「WriteStreamが閉じたことはコールバック（やPromise）ではなくイベントで伝えられる」という点が厄介でした。最終的に「Promiseを素で使う」ことで実現しました。ここasync関数では実現できません。「Promise≠async関数」というのは最近どこかで見た気がするのですが、単純に置き換えはできないという事例に遭遇できて有益でした（やってることがややこしいということもありますが）

なお、「こういう場合はこういうエラーになるべき」というテストは（条件分岐等が）複雑になるので今のところ作っていません。手動でステップのプログラムを書き換えて「うん、OK（思ってる通りのエラーになった）」と確認はしていますが、エラーケースを考え出すときりがない（変数だけでもたくさん思いつくがそれ全部テストに書く？書くべきなんだろうけど）ということもありためらっています。

メインプログラム

開発記その1でも「字句解析段階でダンプするとこうですよー」というのをお見せしていますが、JOKEプログラムを書き換えて出力コピペしたら元に戻す、ではなくちゃんとオプションで指定できるようにしました。

PS C:\work\joke> node --experimental-modules .\joke.js -d .\step\step0001.js   
(node:16800) ExperimentalWarning: The ESM module loader is experimental.
(node:16800) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
Scanner result:
  [
    { type: 'IDENTIFIER', identifier: 'console', lineno: 5 },
    (中略)
    { type: 'END', lineno: 6 }
  ]

Parser result:
  {
    type: 'STATEMENTS',
    statements: [
      {
        type: 'EXPRESSION_STATEMENT',
        expression: {
          type: 'CALL',
          target: {
            type: 'MEMBER',
            object: { type: 'IDENTIFIER_REFERENCE', identifier: 'console' },
            property: 'log'
          },
          arguments: [ { type: 'STRING', string: 'Hello' } ]
        }
      }
    ]
  }

Assembler result:
  [
    { command: 'PUSH', operand: 'console' },
    (中略)
    { command: 'POP' }
  ]

Hello

この改造を入れる際に問題だったのが字句解析です。
ステップ1段階では「Parserからnext呼ばれたときに都度」解析していましたがそうするとダンプコードが散らばってしまうので「初めにトークン列にしてしまい、オプションが指定されてたらトークン列をダンプ」するようにしました。nextが呼ばれた場合は単純にトークン列中の「現在のトークン」を指す添え字を変えるだけです。

現時点の残課題

VMスタック

今はVM（スタックマシン）のスタックとして「JavaScriptの配列」を素で使っており、「pushしすぎ（全命令コードを実行した後に残り物がないか）」はチェックしていますが、「popしすぎ」はチェックできていません（空配列をpopしても例外等は起きません。何かバグってたらpopしすぎも起こるはずです）
popしてるところ全部に「popしすぎ」チェックを入れるのは現実的ではないのでVmStackみたいな薄いラッパーオブジェクトを作りpopメソッド呼び出し時にチェックしようかなと考えています。

例外表示

SyntaxError等のエラーは今は素の（JOKEを実行している）JavaScript（処理系）の例外を投げています。この際問題になるのは

• JOKE実装のエラーなのか（JOKEを動かすJavaScript処理系が投げた例外なのか）
• 「JOKEが動かしているJavaScriptプログラム」のエラーなのか

が区別できていないことです。joke.jsではどちらもcatchしてしまっているので「あっ例外起きた。想定するプログラムのエラーかな…、これはJOKEのバグやん」ということが多々ありました。これも直したいと思います（JOKE自身が例外処理を実装するのはまだ先なので、安直な解決策としては例外メッセージに[JOKE]と入れるぐらいしか思いつかないのですが）

今後の予定

以上、JOKEステップ2として変数機能と言語仕様以外の改造について説明してきました。
次回実装するもの、ベタに考えると演算ですが変数を実装した理由としては関数の引数の仕組みを作りたかったということがあります。
というわけで一足飛びに「関数作るぜ！」と思ったのですが、「でも関数呼び出してconsole.logするだけじゃ意味ないな」とも思ったのでやはり演算を実装し、満を持して関数呼び出しを作ることになるかなと思います。条件分岐やループはその後の予定です。

---

1. リテラルはまだ文字列しかサポートしてません。 ↩

2. 今の構文解析はBNFに対応する「関数」を定義しScannerだけを引数で渡していますが（戻り値は解析結果のノード）、「今定義されている変数」などの「解析状況」を渡す必要が出てくる、あるいは状態を保持しないといけなくなったから関数を諦めてメソッドに書き直すといった複雑化が予想されます。 ↩

3. 参照を返せるC++ならいけそう。 ↩

4. Chrome使ってるのでよく思うと両方V8？ ↩

5. テストシステムについてはセルフホスティングの対象外にしているのでNode.jsの機能をばんばん使っています。 ↩

THREE.SphereGeometryのFacesが非対称で気になった

ふと球体の頂点を引っ張りあげてトゲトゲにしてみたいと思い、標準の球体のジオメトリーであるSphereGeometryをワイヤー表示させてみた。

解像度をあげて使う分にはこれで問題ないのだろうが、荒くすると各面(Face)の分割が左右非対称なのが気になって仕方がない。

そこで球体のGeometryを自作してみることに。

頂点座標の作成

まずはTHREE.SphereGeometryの引数と互換性があるように、垂直分割、水平分割で球体を分割した頂点を作るテストプログラムを作成しました。

let radius = 20 //半径
let rows = 10 //水平分割
let columns = 10 //垂直分割

let vertices = [] //頂点座標のArray

// 上の頂点
let top = new THREE.Vector3(0, radius, 0)

// 下の頂点
let bottom = new THREE.Vector3(0, -radius, 0)

vertices.push(top)

for (let j = 1; j < rows; j++) {

    // 高さ
    let y = Math.cos((j / rows) * Math.PI) * radius

    for (let i = 0; i <= columns; i++) {

        // 横軸
        let x = Math.cos((i / columns) * Math.PI * 2) * radius

        // 奥行き
        let z = Math.sin((i / columns) * Math.PI * 2) * radius

        // Y軸で回転させる
        x *= Math.sin((j / rows) * Math.PI)
        z *= Math.sin((j / rows) * Math.PI)

        // できた頂点座標
        let cord = new THREE.Vector3(x, y, z)

        vertices.push(cord)

    }

}

vertices.push(bottom)

数学はあまり得意ではないので計算した座標とTHREE.SphereGeometryを比べてみて「なんでそうなるー！？」と頭を抱えているところ。

試行錯誤の末やっとなんとかうまく合致させることに成功。

クラスの作成

できたプログラムを元にTHREE.Geometryクラスを親に持つクラスを作成します。

まずは頂点座標を入れるところ。

THREE.TestGeometry.prototype = Object.create(THREE.Geometry.prototype)

THREE.TestGeometry = function (radius, columns, rows) {
    THREE.Geometry.call(this);

    this.vertices = [];
    let indexes = [];

    // create vertex

    let top = new THREE.Vector3(0, radius, 0)
    let bottom = new THREE.Vector3(0, -radius, 0)

    indexes[0] = [this.vertices.push(top) - 1]

    for (let j = 1; j < rows; j++) {

        indexes[j] = []

        let d = Math.sin((j / rows) * Math.PI)

        let y = Math.cos((j / rows) * Math.PI) * radius

        for (let i = 0; i <= columns; i++) {

            let x = Math.cos((i / columns) * Math.PI * 2) * radius * d

            let z = Math.sin((i / columns) * Math.PI * 2) * radius * d

            let cord = new THREE.Vector3(x, y, z)

            indexes[j].push(this.vertices.push(cord) - 1)

        }

    }

    indexes[rows] = [this.vertices.push(bottom) - 1]

    this.center();
    this.mergeVertices();
}
THREE.TestGeometry.prototype.constructor = THREE.TestGeometry

このままでは面情報(faces)が無いのでエラーとなりますので、ここに今回の目的である交互分割の面情報を入れていきます。

THREE.TestGeometry = function (radius, columns, rows) {
    THREE.Geometry.call(this);

    this.vertices = [];
    let indexes = [];

    // create vertices

    //～～～～～～～中略～～～～～～～

    this.faces = []
    let white = new THREE.Color(1, 1, 1)

    // 範囲チェック付きで配列の中身を取得する関数
    let get = (o, a, b) => {
        return b < o[a].length ? o[a][b] : o[a][o[a].length - 1]
    }

    // 重複チェック付きで push する関数
    let push = (o, a) => {
        return o.indexOf(a) >= 0 ? o.indexOf(a) + 1 : o.push(a)
    }

    // 面を作成
    for (let j = 0; j < rows; j++) {

        for (let i = 0; i < columns; i++) {

            //4個または3個の頂点の配列インデックスを取得
            let v = []
            push(v, get(indexes, j + 0, i + 0))
            push(v, get(indexes, j + 0, i + 1))
            push(v, get(indexes, j + 1, i + 1))
            push(v, get(indexes, j + 1, i + 0))

            //頂点が4個
            if (v.length == 4) {

                let f = Math.floor((j + i) % 2) //垂直+水平の剰余で分割を交互させる
                // 0_____1 0_____1
                // |\    | |    /|
                // |  \  | |  /  |
                // |____\| |/____|
                // 3     2 3     2

                this.faces.push(
                    new THREE.Face3(v[0], v[1], v[2 + f], THREE.vertexNormals, white, 0),
                    new THREE.Face3(v[0 + f], v[2], v[3], THREE.vertexNormals, white, 0)
                )

            //球体の上下の頂点ならば3個
            } else {

                this.faces.push(
                    new THREE.Face3(v[2], v[0], v[1], THREE.vertexNormals, white, 0)
                )

            }

        }

    }

    this.center();
    this.mergeVertices();
    this.computeFaceNormals()
}

表示結果:

やったぞ！これぞ求めていた分割！！！

UV座標の追加

これでも使えることは使えますが、ちゃんと行儀よくUV座標の情報も入れておきます。

THREE.TestGeometry = function (radius, columns, rows) {
    THREE.Geometry.call(this);

    this.vertices = [];
    let indexes = [];

    // create vertices

    //～～～～～～～中略～～～～～～～

    // UV座標の計算(X軸を反転させているのは横の面(face)設定が時計回りの為、面が右から左へ向かって追加されている為)
    let uvs = []
    for (let j = 0; j < rows; j++) {

        uvs[j] = []

        for (let i = 0; i < columns; i++) {

            if (j == 0) {
                //上面のテクスチャ用
                uvs[j][i] = [{
                    x: 1 - (i + 0.5) / columns,
                    y: 1 - j / rows
                },
                {
                    x: 1 - i / columns,
                    y: 1 - (j + 1) / rows
                },
                {
                    x: 1 - (i + 1) / columns,
                    y: 1 - (j + 1) / rows
                },
                ]

            } else if (j == rows - 1) {
                //下面のテクスチャ用
                uvs[j][i] = [{
                    x: 1 - i / columns,
                    y: 1 - j / rows
                },
                {
                    x: 1 - (i + 1) / columns,
                    y: 1 - j / rows
                },
                {
                    x: 1 - (i + 0.5) / columns,
                    y: 1 - (j + 1) / rows
                },
                ]

            } else {
                //側面のテクスチャ用
                uvs[j][i] = [{
                    x: 1 - i / columns,
                    y: 1 - j / rows
                },
                {
                    x: 1 - (i + 1) / columns,
                    y: 1 - j / rows
                },
                {
                    x: 1 - (i + 1) / columns,
                    y: 1 - (j + 1) / rows
                },
                {
                    x: 1 - i / columns,
                    y: 1 - (j + 1) / rows
                },
                ]

            }
        }
    }

    // create face

    this.faces = []
    let white = new THREE.Color(1, 1, 1)

    let get = (o, a, b) => {
        return b < o[a].length ? o[a][b] : o[a][o[a].length - 1]
    }

    let push = (o, a) => {
        return o.indexOf(a) >= 0 ? o.indexOf(a) + 1 : o.push(a)
    }

    for (let j = 0; j < rows; j++) {

        for (let i = 0; i < columns; i++) {

            let v = []
            push(v, get(indexes, j + 0, i + 0))
            push(v, get(indexes, j + 0, i + 1))
            push(v, get(indexes, j + 1, i + 1))
            push(v, get(indexes, j + 1, i + 0))

            let p = uvs[j][i]

            if (v.length > 3) {

                let f = Math.floor((j + i) % 2)

                this.faces.push(
                    new THREE.Face3(v[0], v[1], v[2 + f], THREE.vertexNormals, white, 0),
                    new THREE.Face3(v[0 + f], v[2], v[3], THREE.vertexNormals, white, 0)
                )

                // UV座標の追加
                this.faceVertexUvs[0].push(
                    [new THREE.Vector2(p[0].x, p[0].y), new THREE.Vector2(p[1].x, p[1].y), new THREE.Vector2(p[2 + f].x, p[2 + f].y)],
                    [new THREE.Vector2(p[f].x, p[f].y), new THREE.Vector2(p[2].x, p[2].y), new THREE.Vector2(p[3].x, p[3].y), ],
                )

            } else {

                this.faces.push(
                    new THREE.Face3(v[2], v[0], v[1], THREE.vertexNormals, white, 0)
                )


                // UV座標の追加（上下でちゃんと向きが変わるようにする)
                let f = j == 0 ? 0: 1

                this.faceVertexUvs[0].push(
                    [new THREE.Vector2(p[1 + f].x, p[1 + f].y), new THREE.Vector2(p[0].x, p[0].y), new THREE.Vector2(p[2 - f].x, p[2 - f].y)]
                )

            }

        }

    }

    this.center()
    this.mergeVertices()
    this.computeFaceNormals()

}

テクスチャの貼り付けテスト。これで完成です！

実際のクラスと動作はCodePenにアップロードしました。
CodePen - THREE.KusudamaGeometry

See the Pen
THREE.KusudamaGeometry by Urushibara (@pneuma01)
on CodePen.

2つの日時の差分を計算する

最近kintoneのカスタマイズしかしてない

最近、kintoneのカスタマイズをjsでゴリゴリ書く仕事しかしてない感じがするのですが、日時差分を取って、所定の時間を超えていたら入力欄の背景を赤くしろ、とか、黄色くしろ、とかいう話が複数あって、その度に考えていたので備忘録としてメモ。

前提条件

kintoneでアプリをカスタマイズする際にはmoment.jsを読み込んでおくのを忘れないように。

例えば

kintoneでタイムカードアプリを作ったとしてですね…

開始、終了、にそれぞれユーザ打刻してもらって、両方に値が入った状態で「保存」すると、「計算」欄に両者の差分時間が入る、なんてことをやりたい場合です。

ソース例

sample.js

    // レコード保存時休憩時間計算
    kintone.events.on(["app.record.edit.submit"], function(event){
        var record = event.record;

        // 休憩開始と終了が入っていれば計算する
        if(record['休憩開始']['value'] !== undefined && record['休憩終了']['value'] !== undefined){
            const timeFrom = moment(record['休憩開始']['value']);
            const timeTo = moment(record['休憩終了']['value']);
            let result = timeTo.diff(timeFrom);
            record['休憩時間計算']['value'] = moment.utc(result).format('HH:mm');
        }
        return event;
    });

保存時アクション

最初の

sample.js

    // レコード保存時休憩時間計算
    kintone.events.on(["app.record.edit.submit"], function(event){
    });

というのは、編集から、保存実行時の場合、というkintoneのお作法的コードですが、editなので、新規作成時はこのプログラムは動作しません。新規作成、編集時、問わず、動作させたい場合はこんな感じ。

sample.js

    // レコード保存時休憩時間計算
    kintone.events.on(["app.record.create.submit","app.record.edit.submit"], function(event){
    });

計算

sample.js

        // 休憩開始と終了が入っていれば計算する
        if(record['休憩開始']['value'] !== undefined && record['休憩終了']['value'] !== undefined){
            const timeFrom = moment(record['休憩開始']['value']);
            const timeTo = moment(record['休憩終了']['value']);
            let result = timeTo.diff(timeFrom);
            record['休憩時間計算']['value'] = moment.utc(result).format('HH:mm');
        }

「休憩開始」と「休憩終了」に値があることを確認した上で、それぞれconst定義に詰め込んで、diffを取っているだけですね。この場合は、休憩時間の計算なので、1日跨ぎとかは仕様としてあり得ませんので、フォーマットは「HH:mm」にしてあります。

のじみんです。

今回はelectron-vueでNeDBを使用する方法について
インストールからDB設定するところまでを説明します

※ 公式ドキュメントと同じ内容なのでそちらをまず参考にしてください。↓
electron-vue - ローカルファイルの読み書き

実行環境とバージョン一覧

• macOS Mojave v10.14.6
• npm v6.9.0
• node v10.16.3
• electron v1.4.13

Installing

まずはNeDBをインストールしましょう

npmの場合

$ npm install --save nedb

もしくは

yarnの場合

$ yarn add nedb

Settings

rendererディレクトリの配下にdatastore.jsというファイルを作成する

$ cd <YOUR_PROJECRT>
$ touch ./src/renderer/datastore.js

datastore.jsの中身は以下のようにする

./src/renderer/datastore.js

import path from 'path';
import { remote } from 'electron';
import Datastore from 'nedb';

const dbPath = path.join(remote.app.getPath('userData'), '/data.db');

// DB初期化
export default new Datastore({
  autoload: true,
  filename: dbPath,
});

上記ではelectronのアプリケーションディレクトリのdata.dbファイルを読み込む処理をしています。
data.dbがない場合は上の処理でファイルが作成されるのでエラーがでることはありません。

main.jsに以下の処理を追記する

./src/renderer/main.js

...

import db from './datastore';
Vue.prototype.$db = db;

...

以上でどのコンポーネントからもDBを呼び出すことができるようになりました。やったね！

usage

このままだとdata.dbの中身は空なのでデータを引っ張ってくることができません。
なのであらかじめ適当なデータを突っ込んでから
electron-vueでdbからデータを取得していきましょう

データを挿入する

まず適当にdata.dbにデータを突っ込んでみましょう。

main.jsに以下の文を追記します。

./src/renderer/main.js

...

import db from './datastore';

Vue.prototype.$db = db;
// 今回追加する処理
db.find({}, (err, doc) => {
  const data = [
    { name: '山田太郎', age: 20 },
    { name: 'のじ先生' age: 10 },
  ];

  // 初回のみ：dbのデータが空だった場合、テーブルの構築をする
  if (doc.length === 0) {
    db.insert(docs);
  }
});

...

一度アプリをビルドする

$ yarn run dev

ここまで終われば、無事data.dbにデータを入れることができました。
今度はelectorn-vueでそのデータを取得してみましょう。

electron-vueでdbからデータを取得する

適当なコンポーネントのscript部分に以下を記述する
※ 以下ではApp.vueで記述していると想定して書いています。

./src/renderer/App.vue

<script>
this.$db.find({}, (err, doc) => {
  console.log(doc);
});
</script>

はい。以上でおしまいです。
あとはビルドしてみてコンソール出力に格納されたデータが表示されている確認してみてください。

$ yarn run dev
アプリケーションのコンソールから出力されているか確認

ほんでは

参考

• electron-vue - ローカルファイルの読み書き
• HAJIPY.NET - NeDBの基本

JavaScriptでドット絵作成ツールを作ってみた

JavaScriptでドット絵作成ツールを作ってみました。作ってみた感想としては電卓の方が難しかった．．．
意外と少ないステップで完成します。

動画の埋め込み方がわからなかったため、ツイートを埋め込みます。
今回は主に本参考のため制作物はリンクしていません。下記動画のようになりました。
ツイートのため少々お見苦しいかもしれませんが．．．ご興味がございましたらぜひ。

JavaScriptでドット絵作成、カラーピッカーを追加しました！
動画にはカラーピッカー映ってないから謎の動きをしているように見えるけど；；#プログラミング初心者 pic.twitter.com/n3vW7H00uE

— あられ@未来の箏弾きエンジニア (@30arare) May 21, 2020

作成手順

作成手順としては下記のようになります。

• 本の通りに作る
• マスを自由に作れるように改造する
• カラーピッカーを使用する

マスを自由に作る

マスはテーブルで作りました。
HTMLにテキストを入力できるinputタグを使用し、そこからマス数を取得することで任意のマス数のテーブルを作成できるようにしました。
今思えば、縦と横は普通にheightとwidthで良かったなとこの記事を書いていて気付きました。

function dotTable() {
  let dotRow = Number(document.getElementById("vertical").value);
  let dotCell = Number(document.getElementById("side").value);
  for (let i = 0; i <= dotRow - 1; i++) {
    let row = dot.insertRow(-1);
    for (let j = 0; j <= dotCell - 1; j++) {
      let cell = row.insertCell(-1);
      cell.onclick = function () {
        this.style.backgroundColor = selectColor;
      }
    }
  }
}

カラーピッカーを使用する

カラーピッカーはコード7区さんの記事を参考にしました。
使ったコードはたったこれだけ。意外と簡単に設置できました。

$(function () {
  $("#color-picker").on("change", function () {
    selectColor = $("#color-picker").val();
  });
});

最後に

今回は主に本を参考にしたため、制作物や全てのソースコードは公開していません。
参考にさせていただいた方々、ありがとうございました。

参考

いちばんやさしいJavaScript入門教室
コード7区

はじめに

5月13日にTypeScript, JavaScriptのためのランタイムdeno1.0がリリースされました。JavaScript、TypeScriptを最近勉強しているのでどんなものかと触ってみて自分なりに軽くまとめてみました。また、最近Rust(denoはRustで実装されているらしい)も気になり調べていたので興味を持ちました。
公式サイトはこちら

こちらのqiita記事がとても参考になりました。

denoとは？

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

DenoはV8エンジンを使用しRustに組み込まれたJavaScriptとTypeScriptを実行するためのシンプルかつモダンで安全なランタイム。
らしいです。

Secure by default. No file, network, or environment access, unless explicitly enabled.

明示的に指定しなければネットワークやファイルにはアクセスできないらしいです。

Denoを使ってみる

まずはDenoをインストールしましょう。
今回はbrewを使います。こちらにいろいろなインストール方法が乗っているのでbrew以外で試したい方はどうぞ

brew install deno

基本的に事前にインストールするものはこれだけ。アンインストールする時もDenoをアンインストールするだけでいいそうです。
パッケージをインストールしないのでこの辺が楽ですね。

早速何か動かすためにターミナルで以下を実行してみましょう。

deno run https://deno.land/std/examples/welcome.ts

http通信をしているところから推測できるようにDenoの場合は事前にnode_modulesフォルダにいろいろとインストールする必要はないようです。しかし、実行時毎回http通信するわけではなく、一回実行すればメモリに保存されます。

これの実行結果は

Welcome to Deno ?

となります。 恐竜？のようなキャラクターがいいかんじです。

Hello World実装

何はともあれHello World

hello.tsを作成します

import { serve } from "https://deno.land/std@v0.50.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");

for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

以下コマンドを実行します

deno run --allow-net hello.ts

http://localhost:8000
に接続すると"Hello World"と入力されると思います。

Remote code is fetched and cached on first execution, and never updated until the code is run with the --reload flag. (So, this will still work on an airplane.)

--allow-netが冒頭で言っていた"明示的に指定しなければネットワークやファイルにはアクセスできない"っていうところだと思います。これで明示的に指定している。
--allow-netがなければ、
"error: Uncaught PermissionDenied: network access to "0.0.0.0:8000", run again with the --allow-net flag"
というエラーがでます。

またimport文のところはHTTPサーバーモジュールが依存関係を気にせず、1行追加すれば使えるような状態になっています。node.jsの場合はnode_modulesに依存関係を解決しながら(npmがこの辺はやってくれますが)多数のファイルをインストールしていると思いますが、その必要がないってことだと思います。

htmlのコードを出力するサンプルコード

サンプルコードは公式サイトに記述されているのを元にコードを書いてます。

index.tsを作成

const url = Deno.args[0];
const res = await fetch(url);

const body = new Uint8Array(await res.arrayBuffer());
await Deno.stdout.write(body);

下記コマンドを実行

deno run --allow-net=example.com index.ts https://example.com

結果、ターミナルにhtmlのコードが出力されます。

ファイルを読み取るサンプルコード

任意のテキストファイルをルートに置いておきます。
sample.txt
下記は任意で書き換えていいです
txt
denoサンプルコード


index.tsを作成

for (let i = 0; i < Deno.args.length; i++) {
  let filename = Deno.args[i];
  let file = await Deno.open(filename);
  await Deno.copy(file, Deno.stdout);
  file.close();
}

下記コマンド実行

deno run --allow-read index.ts ./sample.txt

sample.txtに記述したテキストを読み取ってターミナルに表示されているはずです。

デバッグ

VScodeでデバッグをしてみます。

launch.jsonを作成してみます。

の箇所はあとで作成したファイル名(この場ではindex.ts)をいれます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Deno",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "deno",
      "runtimeArgs": ["run", "--inspect-brk", "-A", "<entry_point>"],
      "port": 9229
    }
  ]
}

index.tsを作成します。

import { serve } from "https://deno.land/std@v0.50.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");

for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

これでデバッグをしてみるとできました。

dinatraを使用したルーティング処理のサンプルコード

Denoのフレームワークでdinatraというものがあるらしいです。名前だけ聞いたらSinatraを意識してるのかな?とおもいました。（実際そうっぽい）
ただ、Denoはnodeのように事前にインストールしないのでimport文にモジュールを追加するだけです。
ほぼインストールしないで使っているのと同じような感覚になります。

こちらを参考にさせていただきました。

index.tsを作成しましょう（まずはgithubからコピペ）

import {
  app,
  get,
  post,
  redirect,
  contentType,
} from "https://denopkg.com/syumai/dinatra@0.12.1/mod.ts";

app(
  get("/hello", () => "hello"),
  get("/hello/:id", ({ params }) => params.id),
  get(
    "/hello/:id/and/:name",
    ({ params }) => `:id is ${params.id}, :name is ${params.name}`,
  ),
  get("/error", () => [500, "an error has occured"]),
  get("/callName", ({ params }) => `Hi, ${params.name}!`),
  post("/callName", ({ params }) => `Hi, ${params.name}!`),
  get("/foo", () => redirect("/hello", 302)), // redirect from /foo to /hello
  get("/info", () => [
    200,
    contentType("json"),
    JSON.stringify({ app: "dinatra", version: "0.0.1" }),
  ]),
);

deno run --allow-net index.ts

上記コマンドを実行すれば "http://0.0.0.0:8080/hello" や "http://0.0.0.0:8080/foo" などにつながると思います。

ここから変更を加えて使っていきます
index.tsを以下のように変更

const { cwd, open, stdout, copy } = Deno;
import {
  app,
  get,
  post,
  redirect,
  contentType,
} from "https://denopkg.com/syumai/dinatra@0.12.1/mod.ts";
import { renderFile } from "https://deno.land/x/dejs/mod.ts";

const currentDir = cwd();
const indexPath = `${currentDir}/index.html`;

app(
  get("/", async () => await open(indexPath)),
  post(
    "/posts",
    async ({ params: { username, password } }) =>
      await renderFile(`${cwd()}/top.ejs`, { username })
  ),
  get(
    "/form",
    async () =>
      await renderFile(`${cwd()}/form.ejs`, { title: "フォーム送信" })
  ),
);

form.ejsを作成

<html>

<head>
  <meta charset="utf-8">
  <title><%= title %></title>
</head>

<body>
  <h1><%= title %></h1>
  <form action="/posts" method="POST">
    <label>ユーザ名</label>
    <input type="text" name="username" placeholder="username" /><br>
    <button>送信</button>
  </form>
</body>

</html>

top.ejsを作成

<html>

<head>
  <meta charset="utf-8">
  <title>フォーム送信成功</title>
</head>

<body>
  <h1>フォーム送信成功</h1>
  <h1><%= username %>さん</h1>
  <h1></h1>
</body>

</html>

以下コマンドを実行します。

deno run --allow-net --allow-read index.ts 

"http://0.0.0.0:8080"に接続すると
この画面が表示されます

ログイン画面ボタンを押すと下記表示が出ます。(当初はログインのような機能を作ろうと思ってたのでその名残が残ってます笑)

上記画面でテキストボックスにテキストをいれるとフォームの送信ができます。

もっといろいろやりたかったですが、とりあえずはこんなとこで終わりにします。

ちなみにDBはこんな感じでつかうらしい

postgress

import { Client } from "https://deno.land/x/postgres/mod.ts";

async function main() {
  const client = new Client({
    user: "user",
    database: "test",
    host: "localhost",
    port: "5432"
  });
  await client.connect();
  const result = await client.query("SELECT * FROM people;");
  console.log(result.rows);
  await client.end();
}

mongoDB

import { init, MongoClient } from "https://deno.land/x/mongo@v0.5.2/mod.ts";

// Initialize the plugin
await init();

const client = new MongoClient();
client.connectWithUri("mongodb://localhost:27017");

const db = getClient().database("test");
const users = db.collection("users");

// insert
const insertId = await users.insertOne({
  username: "user1",
  password: "pass1"
});

// insertMany
const insertIds = await users.insertMany([
  {
    username: "user1",
    password: "pass1"
  },
  {
    username: "user2",
    password: "pass2"
  }
]);

// findOne
const user1 = await users.findOne({ _id: insertId });

// find
const users = await users.find({ username: { $ne: null } });

// count
const count = await users.count({ username: { $ne: null } });

まとめ

npm installでいろいろインストールする必要がないのは楽だなーとおもいました。特に最近ネットが遅いのでありがたい。。
また、TypeScriptをそのまま実行できるので最初のトランスパイルするための開発環境構築はしなくて済んだのがよかったです。

前提

本記事はプログラミング初学者の筆者が
「プログラミング初学者に対し、JavaScriptのイベントを分かりやすく教えるならどう教えるか」
という目線で書いております。
筆者もプログラミング初学者のため拙いところや詰めが甘い箇所があると思います。
その際はご指摘頂ければ幸いです。

目次

1. JavaScriptのイベントとは？
   
2. ドッキリに例えて考えてみよう！
   
3. clickイベントの実例

　1. JavaScriptのイベントとは？

• JavaScriptにおける「イベント」とはウェブページ上で発生するあらゆるアクションの総称のことです。
  例えば、下記の様な内容がイベントとして挙げられます。
  ・ボタンをクリックすると入力フォームが表示される。
  ・ボタンがクリックされた際にアラートを表示させる。
  ・マウスポインタが重なると色が変わる。
  ・クリックするとカテゴリーが表示される。
  

このイベントをする（処理）することをイベントハンドラとはと言います。
ちなみにハンドラとは英語だと「handler」で動詞の「handle（扱う）」から由来しているそうです。
イベントハンドラの一例は下記内容が挙げられます。

イベント名	イベント ハンドラ名	説明
click	onclick	要素がクリックされた時
change	onchange	要素の内容が変更された時
keypress	onkeypress	キーボードのキーを押した時
mouseover	onmouseover	要素にマウスのカーソルが重なった時
select	onselect	要素がダブルクリックされた時
drag	ondrag	要素がドラッグされた時
scroll	onscroll	スクロールバーがスクロールされた時

2. ドッキリに例えて考えてみよう！

今回は「HTMLにscriptタグを読み込む」「JavaScriptは別のファイルに書く」という前提で記載しております。。

実際にJavaScriptを書くときは以下のステップを踏みます。
なお、今回はドッキリに例えながら記載していきます。
①scriptタグをhtmlに記載する。
イベントを発生させるためにはJavaScriptのコードを読み込む必要があります。
そのため、htmlのファイル内に「JavaScriptのコードを読んでね！」とお願いするコードを記入します。
その際に注意して欲しいのが、head要素に書かず、body要素の最後にコードを書くことです。

プログラミングは基本的にコードは上から順に読み込むので、
head要素にコードを書き読み込むとbody要素とその子孫はまだ取得できないのでエラーになります。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
       <!-- head要素の中にscriptコードを書いてみる -->
      <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
  </body>
</html>

上記コードを例にすると、onclickの結果は「該当要素なし」としてnullになり、
Uncaught TypeError: Cannot set property 'onclick' of null at test.js:12と
コンソールに出力されます。しかし、body要素の最後であれば、全てのHTMLを読み込んだ後なので、
情報を取得してイベントを発生させることができます。

②イベントハンドラする対象を決めイベント発生後のアクションを書く。
例えばclickしたらclickしたモノが消えるイベントを発生させることにしましょう。
対象となるモノをイベントの内容を紐付けてコードを書く必要があるので、以下の手順でコードを書いていきます。
(1)「html内に対象となるモノにidやclassを指定する。」
(2)「指定したモノに対しJavaScriptのファイルにイベント発生のコードを書く」

ドッキリに置き換えると

①〜②の動作をドッキリに置き換えると以下の様に例えることができます。

①どこでドッキリをやるのかを決める。
まず、どこでドッキリをするのかを決めます。
なお、早とちりしてドッキリを台無しにしないために最後の方で仕掛けます。

②ターゲットとどんなドッキリを仕掛けるのかを決める。
ターゲットを決めないとドッキリは始まりません。
対象となるターゲットに対しidの指定やclassの指定を行いましょう。
そして、仕掛けるドッキリ（アクションの内容）を仕掛け人（ジャバスクリプト やCSSのファイル）に対して
指示し（コードを書き）ましょう。

3. clickイベントの実例

今回は「金メダル、銀メダル、銅メダルをクリックしたら消える。」というイベントを書きました。
簡易的なモノなのでイメージがしやすいと思います。
詳細を記載したコードを記入したので、実際に挙動を確認していただければ幸いです。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

style.css

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
#gold-medal {
  background-color: #DBB400;
}
#silver-medal {
  background-color: #C9CACA;
}
#bronze-medal {
  background-color: #C47022;
}
.medal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  float: left;
  margin: 20px;
}

test.js

//document.getElementById("").onclickでクリックしたターゲットの要素を取得。
//function(){ }でドッキリの内容を記載
//document.getElementById("").style.display = "none";でドッキリの内容が記載されている。

//（1行目）金メダルをクリックするとイベントが発生。 ← （2行目）金メダルのCSS要素にdisplya: none;が追加される。
document.getElementById("gold-medal").onclick = function(){
  document.getElementById("gold-medal").style.display = "none";
  }
//（1行目）銀メダルをクリックするとイベントが発生。 ← （2行目）銀メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("silver-medal").onclick = function(){
    document.getElementById("silver-medal").style.display = "none";
  }
//（1行目）銅メダルをクリックするとイベントが発生。 ← （2行目）銅メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("bronze-medal").onclick = function(){
    document.getElementById("bronze-medal").style.display = "none";
  }

引用
teratail(Javascriptで記述したコードでエラーが出てしまう。)
【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ！

前提

本記事はプログラミング初学者の筆者が
「プログラミング初学者に対し、JavaScriptのイベントを分かりやすく教えるならどう教えるか」という目線で書いております。
筆者もプログラミング初学者のため拙いところや詰めが甘い箇所があると思います。
その際はご指摘頂ければ幸いです。

目次

1. JavaScriptのイベントとは？
   
2. ドッキリに例えて考えてみよう！
   
3. clickイベントの実例

　1. JavaScriptのイベントとは？

• JavaScriptにおける「イベント」とはウェブページ上で発生するあらゆるアクションの総称のことです。
  例えば、下記の様な内容がイベントとして挙げられます。
  ・ボタンをクリックすると入力フォームが表示される。
  ・ボタンがクリックされた際にアラートを表示させる。
  ・マウスポインタが重なると色が変わる。
  ・クリックするとカテゴリーが表示される。
  

このイベントをする（処理）することをイベントハンドラとはと言います。
ちなみにハンドラとは英語だと「handler」で動詞の「handle（扱う）」から由来しているそうです。
イベントハンドラの一例は下記内容が挙げられます。

イベント名	イベント ハンドラ名	説明
click	onclick	要素がクリックされた時
change	onchange	要素の内容が変更された時
keypress	onkeypress	キーボードのキーを押した時
mouseover	onmouseover	要素にマウスのカーソルが重なった時
select	onselect	要素がダブルクリックされた時
drag	ondrag	要素がドラッグされた時
scroll	onscroll	スクロールバーがスクロールされた時

2. ドッキリに例えて考えてみよう！

今回は「HTMLにscriptタグを読み込む」「JavaScriptは別のファイルに書く」という前提で記載しております。。

実際にJavaScriptを書くときは以下のステップを踏みます。
なお、今回はドッキリに例えながら記載していきます。
①scriptタグをhtmlに記載する。
イベントを発生させるためにはJavaScriptのコードを読み込む必要があります。
そのため、htmlのファイル内に「JavaScriptのコードを読んでね！」とお願いするコードを記入します。
その際に注意して欲しいのが、head要素に書かず、body要素の最後にコードを書くことです。

プログラミングは基本的にコードは上から順に読み込むので、
head要素にコードを書き読み込むとbody要素とその子孫はまだ取得できないのでエラーになります。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
       <!-- head要素の中にscriptコードを書いてみる -->
      <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
  </body>
</html>

上記コードを例にすると、onclickの結果は「該当要素なし」としてnullになり、
Uncaught TypeError: Cannot set property 'onclick' of null at test.js:12と
コンソールに出力されます。しかし、body要素の最後であれば、全てのHTMLを読み込んだ後なので、
情報を取得してイベントを発生させることができます。

②イベントハンドラする対象を決めイベント発生後のアクションを書く。
例えばclickしたらclickしたモノが消えるイベントを発生させることにしましょう。
対象となるモノをイベントの内容を紐付けてコードを書く必要があるので、以下の手順でコードを書いていきます。
(1)「html内に対象となるモノにidやclassを指定する。」
(2)「指定したモノに対しJavaScriptのファイルにイベント発生のコードを書く」

ドッキリに置き換えると

①〜②の動作をドッキリに置き換えると以下の様に例えることができます。

①どこでドッキリをやるのかを決める。
まず、どこでドッキリをするのかを決めます。
なお、早とちりしてドッキリを台無しにしないために最後の方で仕掛けます。

②ターゲットとどんなドッキリを仕掛けるのかを決める。
ターゲットを決めないとドッキリは始まりません。
対象となるターゲットに対しidの指定やclassの指定を行いましょう。
そして、仕掛けるドッキリ（アクションの内容）を仕掛け人（ジャバスクリプト やCSSのファイル）に対して
指示し（コードを書き）ましょう。

3. clickイベントの実例

今回は「金メダル、銀メダル、銅メダルをクリックしたら消える。」というイベントを書きました。
簡易的なモノなのでイメージがしやすいと思います。
詳細を記載したコードを記入したので、実際に挙動を確認していただければ幸いです。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

style.css

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
#gold-medal {
  background-color: #DBB400;
}
#silver-medal {
  background-color: #C9CACA;
}
#bronze-medal {
  background-color: #C47022;
}
.medal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  float: left;
  margin: 20px;
}

test.js

//document.getElementById("").onclickでクリックしたターゲットの要素を取得。
//function(){ }でドッキリの内容を記載
//document.getElementById("").style.display = "none";でドッキリの内容が記載されている。

//（1行目）金メダルをクリックするとイベントが発生。 ← （2行目）金メダルのCSS要素にdisplya: none;が追加される。
document.getElementById("gold-medal").onclick = function(){
  document.getElementById("gold-medal").style.display = "none";
  }
//（1行目）銀メダルをクリックするとイベントが発生。 ← （2行目）銀メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("silver-medal").onclick = function(){
    document.getElementById("silver-medal").style.display = "none";
  }
//（1行目）銅メダルをクリックするとイベントが発生。 ← （2行目）銅メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("bronze-medal").onclick = function(){
    document.getElementById("bronze-medal").style.display = "none";
  }

引用
teratail(Javascriptで記述したコードでエラーが出てしまう。)
【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ！

1. OpenWeatherMapのお天気アイコン

OpenWeatherMapには予め気象コードに合わせたアイコンが用意されています。
無料なのにとっても親切！
そんな初期設定のアイコンの一例がこちらです。

なんとも画質も微妙ですし、あまりイケてない気がしますね・・・
変えれるものなら変えたいと思っていじってみたら
とっても簡単にできたので、その方法を記録しておきます。

2. ドキュメントを確認してみると...

OpenWeatherMapのドキュメントを確認してみると、下記アイコンの一覧が確認できます。
実際に表示されるものとは少し違いますが、
ファイル名がわかるのでこちらをいじればどうにかなりそうということが分かります。
https://openweathermap.org/weather-conditions

3. 変更方法

weather.js

$.ajax({
        url: "https://api.openweathermap.org/data/2.5/weather",
        dataType: "jsonp",
        data: "q=Tokyo,jp&appid=" + APIKEY + "&lang=ja&units=metric",
        //天気データ呼び出し成功時
        success: function(data) {
          //〜中略〜
          $(".dayWeatherIcon").attr(
            "src",
            "img_tenki/" + data.weather[0].icon + ".png "
          );

他にやり方はあるかと思いますが、今回はこんな感じの手順で実装しました！

１、まず、上記アイコン一覧のファイル名を参考にお天気アイコンの画像を準備し、フォルダに格納
今回はimg_tenkiというフォルダに画像を保存
２、画像を表示させたいimgタグを予め用意しておき、そのsrcを
"img_tenki/" + data.weather[0].icon + ".png "と指定する

4. 完成したのがこちら...

少し良い感じになりました！

5. 参考サイト

https://qiita.com/b-wind/items/06e19043a0cd70b10b03

対象読者

・ハンバーガーメニューを作りたい人
・細かく作り方の手順を知りたい人
・自分でオリジナルの見た目を作って応用したい人
・（ちなみに筆者の自己学習のためにも記事を書いているので間違っている箇所があれば是非とも教えて頂きたい）

目次

・HTMLのソース
・CSSのソース
・JavaScript(jQuery)のソース
・ハンバーガーメニュー作成の手順
・まとめ

HTMLのソース

Hamburger.html

<body>
    <div class="container">
        <button class="click-menu-icon">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <nav>
            <ul>
                <li>１１１</li>
                <li>２２２</li>
                <li>３３３</li>
            </ul>
        </nav>
        <div class="overlay"></div>
    </div>
</body>

CSSのソース

style.css

* {
            margin: 0;
            padding: 0;
        }
        .overlay {
            display: block;
            width: 0;
            height: 0;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .overlay.open {
            width: 100%;
            height: 100%;
            opacity: 1;
        }

        .click-menu-icon {
            border: none;
            display: inline-block;
            width: 36px;
            height: 28px;
            vertical-align: middle;
            cursor: pointer;
            position: fixed;
            top: 30px;
            left: 30px;
            z-index: 100;
        }
        .click-menu-icon span {
            display: inline-block;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #000;
            transition: all 0.5s;
        }
        .click-menu-icon.active span {
            background-color: #000;
        }
        .click-menu-icon span:nth-of-type(1) {
            top: 0;
        }
        .click-menu-icon.active span:nth-of-type(1){
            transform: translateY(12px) rotate(-225deg);
        }
        .click-menu-icon span:nth-last-of-type(2) {
            top: 12px;
        }
        .click-menu-icon.active span:nth-of-type(2){
            opacity: 0;
        }
        .click-menu-icon span:nth-of-type(3) {
            bottom: 0;
        }
        .click-menu-icon.active span:nth-of-type(3){
            transform: translateY(-12px) rotate(225deg);
        }

        nav {
            width: 250px;
            height: 100%;
            padding-top: 100px;
            background-color: rgba(16, 69, 153, 0.8);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            transform: translateX(-250px);
            transition: all 0.5s;
        }
        nav.open {
            transform: translateX(0);
        }
        nav li {
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }

JavaScript(jQuery)のソース

main.js

$('.click-menu-icon').on('click',function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $('nav').removeClass('open');
                $('.overlay').removeClass('open');
            } else {
                $(this).addClass('active');
                $('nav').addClass('open');
                $('.overlay').addClass('open');
            }
            });
            $('.overlay').on('click',function(){
            if($(this).hasClass('open')){
                $(this).removeClass('open');
                $('.click-menu-icon').removeClass('active');
                $('nav').removeClass('open');      
            }
            });

ハンバーガーメニュー作成の手順

作成手順

<!-- ハンバーガーメニュー作成の手順
*   １：buttonでspan*3を囲う
*   ２：nav>ul>liでメニューを作る
*   ３：</nav>の下に影をつけるための<div class="overlay">を作る
*   ４：・・・・・以下からCSSの記述手順↓・・・・・
*       1.overlay
*           ・blockでwidthとheightを０にする
*           ・色はお好み＿rgbaでaを0.5くらいにする（透明度の最大値）
*           ・position:absoluteでtop:0、left/rightはお好みで0
*           ・z-indexで上に来るために2くらいにする
*           ・初期状態はopacity:0にする
*           ・transition: opacity 0.5s;秒数は好み
*           ・overlay.openにwidth/height:100%、opacityを1にして変化させる
*
*       2.button.class名
*           ・buttonのborderを消しておく
*           ・vertical-alignを指定するためにinline-blockにする
*           ・ハンバーガーアイコンのwidth/heightを指定する（お好み）
*           ・vertical-align: middle;で縦に中央揃えする（大きさを変更しても中央揃えになる）
*           ・cursor:pointer;にする（お好み）
*           ・position: fixed;でスクローるしてもついてくるようにする。top/left/rightを指定する（お好みでfixedなしでもok）
*           ・必ず前面に出したいのでz-indexで一番大きい数にする
*       
*       3.button>span
*           ・box-sizing:border-box;でbutton自体の大きさ内でpaddingやborderなどを指定できる
*           ・left:0;width:100%;で左端から100%button内でspanの長さを指定する
*           ・heightはお好み（必ず指定しないと縦が0なので表示されなくなる）
*           ・色をつける(基本は背景に同化せずハッキリとした色にする)
*           ・transitionでクリックした時のspanが動く秒数を指定する
*       
*       4.buttonに.activeが追加された時のspan
*           ・click後の色を指定する
*           ・span:nth-of-type(1)でtop: 0;を指定する
*           ・.active span:nth-of-type(1)でtransform: translateY(お好み) rotate(-お好み);で１つ目の動きをつける
*           ・span:nth-of-type(2)でtop: お好み;で真ん中に表示する
*           ・.active span:nth-of-type(2)でopacity: 0;で表示を消す
*           ・span:nth-of-type(3)でbottom: 0;を指定する
*           ・.active span:nth-of-type(3)でtransform: translateY(-お好み) rotate(お好み);で3つ目の動きをつける
*           ※translateYとrotateは符号違いで数値は同じにする
*
*       5.nav
*           ・navのwidth:お好み;height: 100%;を指定する  
*           ・padding-topでハンバーガーの下に指定する（お好み）
*           ・background-colorを指定する（お好み）
*           ・position: fixed;でスクロールしてもついてくるようにする
*           ・top: 0;left or right: 0;にする
*           ・z-indexでコンテンツよりは上、overlayより上でハンバーガーより下にする
*           ・transform: translateX(-navのwidth分);で初期位置を画面の外にする
*           ・transitionで動きの秒数を指定する（お好み）
*         
*       6.nav.open
*           ・transform: translateX(0);でclickされた時に画面に表示する
*
*       7.nav li
*           ・colorでliの色を指定する（お好み）
*           ・text-align: center;でnav内の中央に寄せる
*           ・padding:お好み　0;で上下の数値だけ指定する
*
*       ・・・・・以上がCSSの記述手順↑・・・・・
*
*   5.・・・・・以下からJavaScript(jQuery)の記述手順↓・・・・・
*
*
           $('.buttonのクラス名').on('click',function(){    ＠クリックイベント
            if($(this).hasClass('active')){         ＠もしbuttonがactiveクラスを持っていたら
                $(this).removeClass('active');      ＠buttonからactiveクラスを外す
                $('nav').removeClass('open');       ＠navからopenクラスを外す
                $('.overlay').removeClass('open');  ＠overlayからopenクラスを外す
            } else {                                ＠activeクラスを持っていなかったら
                $(this).addClass('active');         ＠buttonにactiveクラスを追加する
                $('nav').addClass('open');          ＠navにopenクラスを追加する
                $('.overlay').addClass('open');     ＠overlayにopenクラスを追加する
            }
            });         @@ overlayをクリックしても開いたメニューを閉じれるようにする @@
            $('.overlay').on('click',function(){                ＠クリックイベント
            if($(this).hasClass('open')){                   ＠もしoverlayがopenクラスを持っていたら
                $(this).removeClass('open');                ＠overlayからopenクラスを外す
                $('buttonのクラス名').removeClass('active');  ＠buttonからactiveを外す
                $('nav').removeClass('open');               ＠navからopenクラスを外す
            }
            });
*
*
*
*
*
*
-->

まとめ

自分のコーディング技術向上のためにコードや書き方の手順を記してみました。
実はプログラミング学習を始めてまだ2.3ヶ月の初心者です。なのでもっと効率よく、尚且つ綺麗に記述できると思います。
ですが、過去の自分はただコードだけ見せられてもどう書けばいいか分からなかった経験があります。なので日本語で手順も記載することによって中の値だけ変えれば誰でもとりあえず実装できるようになると思います。
作成の手順通りに作って中の値だけ帰ることによってオリジナルのハンバーガーメニューに応用できると思います。
過去の自分が知りたかったような記事でした。

はじめに

【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（Go＆Heroku使用）
上記の記事が元です。

本稿はより簡単にLIFFを試せるように、GitHub Pagesを使って実装した手順を改めてまとめた記事です。

こんな感じの作ります

使用技術

• LIFF (LINE Front-end Framework)
  • LINEが提供するウェブアプリのプラットフォーム
  • 公式HPはこちら
• JavaScript, jQuery
• GitHub Pages
  • GitHubにプッシュした静的サイトを公開できる機能

ソースコードはこちら(GitHub)

LINE公式アカウント作成

こちらの公式HPを参考に作成します。

リッチメニュー設定

リッチメニュー用の画像を作成する

チャット画面下に表示されるバナーのことをリッチメニューというようです。
まずはリッチメニューに設定する画像をCanovaを使って作成します。
Canovaは素材が豊富で無料プランでもいい感じの画像が作れるので便利です。

リッチメニューを設定する

LINE Offical Account Manager上からいい感じに設定します。（適当）
PCからのみ設定することができ、スマホからは設定できないようです。
リンクは一旦適当なリンクを設定しておきます。
LIFFアプリを作成後にアプリのURLを設定します。

LIFFアプリ作成

チャネル作成

こちらの公式HPを参考にして、LINE Developersでチャネルを作成します。
LIFFを使うために基本的な情報を登録します。

コーディング

ディレクトリ構成

3ファイルしかないので全部同一ディレクトリにおいちゃいます。

liff-reservation-githubpages/
|- index.html
    -フォームを表示するhtml
|- index.js
    -フォームの制御やliff.jsで定義した関数を呼び出すjs
|- liff.js
    -LIFFのSDKを呼び出すjs

ソースコードは冒頭のGitHubを参照ください。

簡単にLIFF部分だけピックアップしておきます。
初期化してメッセージ送信するだけなのでめっちゃ簡単です！

liff.js

$(document).ready(function () {
    // liffId: LIFF URL "https://liff.line.me/xxx"のxxxに該当する箇所
    // LINE DevelopersのLIFF画面より確認可能
    var liffId = "(自分のLIFFIDを入力)";
    initializeLiff(liffId);
})

function initializeLiff(liffId) {
    liff
        .init({
            liffId: liffId
        })
        .then(() => {
            // Webブラウザからアクセスされた場合は、LINEにログインする
            if (!liff.isInClient() && !liff.isLoggedIn()) {
                window.alert("LINEアカウントにログインしてください。");
                liff.login({redirectUri: location.href});
            }
        })
        .catch((err) => {
            console.log('LIFF Initialization failed ', err);
        });
}

// LINEトーク画面上でメッセージ送信
function sendMessages(text) {
    liff.sendMessages([{
        'type': 'text',
        'text': text
    }]).then(function () {
        liff.closeWindow();
    }).catch(function (error) {
        window.alert('Failed to send message ' + error);
    });
}

GitHubにプッシュして公開

ソースコードをGitHubにプッシュしてGithub Pagesを使って公開します。
以下の記事が参考になります。

GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた

LIFFアプリをチャネルに追加

こちらの公式HPを参考にして、LIFFアプリがLINEやブラウザ上で動作できるようにするために、LIFFアプリをチャネルに追加します。
エンドポイントURLにはGitHub PagesのURLを設定します。

動作確認

LINE Offical Account ManagerのリッチメニューのリンクをLIFFの設定画面に表示されているLIFF URLをに変更します。

LINE公式アカウントを自分のLINEの友だちに追加して試してみます。
冒頭のデモ画像のようになれば成功です。

LIFFアプリをブラウザ上で動作させたい場合

作成したLIFFアプリをLINE上だけではなく、ブラウザ上で動作させたい場合はShareTargetPickerという機能を使うと実現可能です。

こちらの記事を参考にしてみてください。
【LINE】既存LIFFアプリにShareTargetPickerを導入する

おまけ

ローカルのサーバで動作確認をするにはngrokがとても便利です。
参考リンクを貼っておきます。

参考

• LIFFを利用し、WebとLINE Botを連携させる
• リッチメニューの活用法│作成から設定方法まで解説
• [jQuery UI] Datepicker の使い方とオプション
• ngrokの利用方法