mermaid.jsでリトアカのガントチャートを作った

mermaid.jsとは フローチャートやシーケンス図、ガントチャートなど様々なドキュメントをマークダウンの様な定められたフォーマット通りに記述することで、テキストベースで作図が出来るツールです。 今回はmermaid.jsを使ってリトルウィッチアカデミアの第一クールまでのあらすじをガントチャート風に作成してみました。単なるmermaid.jsの練習と備忘録、そしてリトアカの布教です。 mermaid.jsのインストール $... 御覧になる | 御シェアする

Node.jsで家計簿アプリを作る

家計簿アプリ、作ってみっか…… 一年くらい前にクソみたいな家計簿アプリを作りましたが、今ならもっと使い易い物が作れるのでは?と思いました。今回はNode.jsで作ってみたいと思います。 電卓ページトップページ上半分:その日何を買ったか下半分:電卓参照ページ2020年05月01日02日閲覧ページ日別詳細ページカテゴリ:何円カテゴリ:何円月別円グラフページカテゴリ別円グラフ イメージは上みたいな感じです。 環境準備 expressでRESTfulで実装します。Node.jsをインストールします。 リポジトリ追加 #... 御覧になる | 御シェアする

ExpressとVue.jsでSPAを作る~麻雀点数計算アプリ~

はじめに 今回は流行りのSPAを作ってみたいと思います。このページを読んでいるという事は恐らくSPAの概要はご存知かと思いますが、自分のためにも一応まとめていきます。詳しい方は読み飛ばしてください。 SPAとはSinglePageApplicationの略で、一ページ内で色々なことが可能なWebサービスのことです。SPAの良さはエンドユーザーのリクエスト回数を減らせる事です。最初の一回だけリクエストさせておいて、その後ユーザーはゲットしたコンテンツを切り換えるだけで済むので快適にWeb操作を行うことが出来ます。 今回は麻雀点数を行うページ、操作説明のページ、麻雀ルール解説のページをSPAでルーティングするサイトを作ってみたいと思います。 ※ネイティブアプリも作成してみました。無料ですのでインストールしてみて下さい。リンク 環境準備 Node.jsインストール #... 御覧になる | 御シェアする

Express/Node.jsとMongoDBで制作~付箋アプリ~

はじめに ↑の画像みたいに適当な名前をつけて付箋を残すWebアプリを作ってみたいと思います。本当はVue.jsを使ってお洒落なSPAを作ってみたかったのですが、バックエンドのExpressからフロントエンドのVue.jsに値を渡す方法が見つからなかったので断念しました。 CentOS7Express/Node.jsMongoDB 準備 最新版のNode.jsをインストールするDockerfileがありましたので、これを利用します。Dockerが無い人も読み替えて17行以降実施すれば問題無い筈です。 #... 御覧になる | 御シェアする

ラズパイをリモコンにしてSlackで家電操作~pm2で常駐~

概要 ラズパイにOSインストールラズパイ各種設定Slackからラズパイにメッセージ送信ラズパイにhubotインストールラズパイで家電操作赤外線モジュール設定 ※インターネットへの接続環境が必要です ラズパイ設定 まずネットからラズパイ用OSのイメージファイルをダウンロードします。公式からRaspbianのオールインワンみたいなのをダウンロードしました。市販のSD... 御覧になる | 御シェアする

JavaScriptの同期・非同期処理を理解理解する

能書き JSの重要な概念の一つに同期・非同期処理というものがあります。と言ってもこれを理解したのは最近の事で、偉そうな事は言えません。そもそも既に枯れたテーマなのでここより詳しい記事は山ほどあると思います。ただJSを使って開発する時に、気づけば何度も同じことを調べ直していたので、自分にとって使いやすい備忘録としてまとめてみたいと思います。温故知新という奴です。 同期処理とは まず次のコードを実行してみます。 //... 御覧になる | 御シェアする

【CloudWatch/Lambda/Slack/AWS CLI】を使ってEC2を監視・通知・停止する

はじめに 今回やりたい事は、 毎日23:30にInstance自動停止アラートを通知するCloudWatchLambdaSlack毎日23:59にInstanceを自動停止するCloudWatchLambdaSlackから自動停止ルールを制御するSlackAWS... 御覧になる | 御シェアする

Chrome拡張機能を作ってみた

はじめに 便利な機能が多いChromeブラウザの拡張機能ですが、自作出来る事をご存じでしょうか。公開するには料金(5$位)と審査が必要ですがローカルで利用する分には作り放題です。そしてChrome拡張は実は優れたフレームワークになっていて簡単に便利な拡張機能が作れたりします。今回は当サイトにアクセスした時のみアラートウィンドウが出る拡張機能を作ってみたいと思います。 必要な物 マニフェストファイルChromeに登録するのに必要実行スクリプトアラートウィンドウを出すJavaScriptアイコン画像128×128 今回必要な物は上記の物です。 開発 ディレクトリ構成は以下の通りです。分かりやすくするため全部同階層にしています。 $... 御覧になる | 御シェアする