- 1. オリジナルアイコンフォントを作成する
- 2. Heroku CLIの動きを観察する
- 3. 花粉症の重症度が分かるWEBアプリの作成～Auth0でユーザー認証～
- 4. 超初心者がAuth０でログイン機能を実装した
- 5. Node.jsのasync/awaitとPromiseを超ざっくり_中編
- 6. [Electron / TypeScript] ElectronでTypeScript
- 7. 初学者向けpackage.jsonハンズオン
- 8. [Memo]DockerでDjango+Nuxt.jsの開発環境構築
- 9. Node.js + Express で ES6を使う
- 10. ソフトウェア初心者がtoio.jsで作ってみた 5つの作例紹介
- 11. Node.jsでTwitterを自動化する
- 12. スクレイピング & サーバレスAPIでNode.jsの雰囲気を体験してみる
- 13. 前々回の記事で作成したオウム返しチャットボットにQ&Aエンジンを実装する
- 14. VurePress プラグイン開発に挑戦 (ローカル編)
- 15. IBM Cloud App ID Node.js Webクイックスタート
- 16. NestJS アプリケーションをプロダクションレディにする
- 17. ローカルでデバッグ＆テスト可能なLINEチャットボット開発環境（Node.js Express LINESimulator ）を作成する
- 18. Heroku + LINE + node.js (Express.js)でオウム返しボットを作成する
- 19. Node.jsでBASIC認証.
- 20. Expressコマンドがありません（Windows）
オリジナルアイコンフォントを作成する
# 概要
Fontello や Font Awesomeなど様々なアイコンを提供しているサイトは多く存在するが、サイトデザインの時に用途にあったアイコンが見つからない場合がよくあります。
その場合、イラレなどで作成したデータからアイコンフォントを作成する方法を紹介します。
#アイコンフォンとは？
>アイコンフォントとは、簡単にいうと「アイコンを表現出来るWebフォント」です。
Webフォントとは、クラウド上にあげられたフォントデータを読み込むことでホームページに反映させる仕組みを指します。
CSS3からWebフォント機能が追加され、Webデザインの世界でも利用が進んできました。
アイコンフォントはWebフォント同様、CSS3を利用すれば比較的簡単に導入できます。[ferretからの引用](https://ferret-plus.com/6248)
#制作物
でもちゃんと利用できます。でも、CLIがうまく動かなかったり、同様の動作を、直接[Platform APIを叩いて](https://www.utakata.work/entry/2019/12/06/000000)、プログラムから実行したくなることもありますよね。そんな時は、CLIの動作を眺めてみるといろいろとヒントが得られるかもしれません。
この記事は[Heroku Advent Calendar 2019](https://qiita.com/advent-calendar/2019/heroku)の8日目の記事です。7日目はさえきさんによる「[見積から開発・運用まで！Herokuの基本とTips](https://qiita.com/yonyonsaeki/items/eb57278061c9930ca206)」でした。9日目は、すみません！同じ筆者の記事が連続しちゃいます。
この記事の内容は2019年12月時点のものです。Heroku CLIの内部構
花粉症の重症度が分かるWEBアプリの作成～Auth0でユーザー認証～
##概要
プログラムの勉強を始めて5か月ほどの開業医です。今回Auth0を使ったユーザー認証を勉強したので、花粉症の重症度が分かるWEBアプリに実装してみました。
花粉症（アレルギー性鼻炎）の重症度はくしゃみ・鼻水・鼻づまりの程度で判定できるので、その診断アルゴリズムをプログラミングしています。
##実装
Googleアカウントを使ったユーザー認証機能。
ボタンを選択すると鼻アレルギーの重症度が分かるWEBアプリ。##完成動画
花粉症重症度判定アプリ https://t.co/AJVM0C0RxH @YouTubeより
— 病気のセルフチェック (@Selfcheckhealt1) 超初心者がAuth０でログイン機能を実装した
##はじめに
プログラミングを学び始めてから2か月の初心者です。最近は初心者でも出来る色んな技にチャレンジして体感しながら勉強しています。というわけで、今回はと～っても面倒なログイン機能を「さささ～」という感じで実装できちゃうAuth0を使ってみました。
##Auth0とは？（超初心者的解釈）
Auth0とはWebやスマホアプリに対して認証機能をクラウドを介して提供してくれるサービスのこと。有難いことにLine,Google, Facebook, Twitterなど有名どころのSNSと既に連携していて、簡単な操作でそれらを使ったログイン機能を自分のWEBに付加することが出来ます。
初心者的に有難いことにはサイトを作る前からログイン機能だけテストが出来たり、サンプルサイトを用意してくれていたりとても親切。しかも一定時間・量までは無料なので助かります。
詳細は[こちら](https://qiita.com/furuth/items/68c3caa3127cbf4f6b77)でも紹介されています。
##目指すもの
年末ということで引き続き、カレンダーをテーマにすることにしました。
Auth0Node.jsのasync/awaitとPromiseを超ざっくり_中編
※[Node.jsのasync/awaitとPromiseを超ざっくり_前編](https://qiita.com/masa_miyazaki/items/fb137d8b7d3aeb6967b1)の続きです。後でまとめるかも。
※arrow関数は使わないといったな、あれは嘘だ。## 目次
~~1. Node.jsの非同期処理について~~
~~2. 非同期処理の書き方~~
~~2.1 コールバック（callback）関数~~
~~2.2 Promise~~
2.3 asycn/await ←この記事はココから！
~~3. Promiseとasycn/awaitが一緒だと思ったらハマった件~~
4. 参考## 2.3.asycn/await
asycn/awaitとはPromiseのシンタックスシュガー。
（同じような内容のことをもっと簡単な書き方でできるよ、というもの。）###async
Promiseの場合は“`javascript
function hoge() {
r
[Electron / TypeScript] ElectronでTypeScript
次Electronでなにか作る時はTypeScript使おっかなー。
# 本題
TypeScriptってのをあんまり触ったこと無いけど型が決められるとかなんとか。# 参考にしました
https://github.com/electron/electron-quick-start-typescriptここを真似してやる。
# package.jsonつくる
Node.js入れておいてね。
npm versionは6.4.1です。適当にフォルダを作成し、ターミナルで以下のコードを。
“`terminal
npm init -y
“`“`package.json“` が作成されていれば成功です。
# Electron入れる
ターミナルで
“`terminal
npm install –save electron
“`# TypeScript入れる
ターミナルで
“`terminal
npm install -g typescript
“`# package.jsonを書き換える
package.jsonを開いて、”scripts”
初学者向けpackage.jsonハンズオン
これは [Node.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/nodejs) の8日目の記事です。
# 初学者向けpackage.jsonハンズオン
Node.js初学者向けにpackage.jsonハンズオンを実施しましたので、その時に作ったハンズオン資料を公開します。
npmコマンドやpackage.jsonに慣れることが目的のハンズオンの資料ですので、Node.jsとは何か？といった説明はしません。ご了承ください。
文章の手順通りに進めていけば、npmコマンドやpackage.json編集が体験できます！
# 事前準備
## Node.jsのインストール事前にNode.jsのインストールをお願いします。（すでにNode.jsがインストール済の方は飛ばしてください。）
### Windowsの場合
Windowsの方は、こちらの記事をご参照ください。Chocolatey > Nodist > Node.jsの順番でインストールします。
[Windowsで、Choco
[Memo]DockerでDjango+Nuxt.jsの開発環境構築
##はじめに
2つのDockerコンテナで構成される、Webアプリ(バックエンドにdjango、フロントエンドにNuxt.js)の開発環境をdocker-composeで構築した際のメモ書きです。##手元の環境
– macOS Catalina v10.15.1
– Docker version 18.09.2, build 6247962
– docker-compose version 1.23.2, build 1110ad01##ディレクトリ構成
“`
home
|- backend
| |- code (djangoプロジェクトのソースコードが入る)
| |- Dockerfile
| |- requirements.txt
|- frontend
| |- src (nuxtプロジェクトのソースコードが入る)
| |- Dockerfile
|- .gitignore
|- docker-compose.yml
|- README.md
“`## Dockerコンテナを立てる
今回は、フロンエンドにnuxt、バックエンドにdjangoを採用して、2つのDoc
Node.js + Express で ES6を使う
# 確認環境
node v10.17.0# アプリケーションテンプレートの作成
ここでは`play_express`というアプリを作る前提で進めていきます。
※npxコマンドの使用には、`npm 5.2.0`以降がインストールされている必要があります。“`
npx express-generator play_express
“`次に依存関係をインストールします。
“`
cd play_express
npm i
“`一旦、動作確認をします。アプリのカレントディレクトリで以下のコマンドを実行します。
“`
npm start
“`このあと、webブラウザから`http://localhost:3000/`にアクセスすると、「Welcome to Express」画面が表示されます。
動作確認を終了するには、`npm start`実行中のコンソール上で、**Cmd(Ctrl)+c** を押下します。# Babelのインストール
ES6を使うため、babelをインストールします。“`
npm i @babel/core @babel/node
ソフトウェア初心者がtoio.jsで作ってみた 5つの作例紹介
これは「toio™(ロボットトイ | toio（トイオ）) Advent Calendar 2019」の8日目の記事になります。
# はじめに
はじめまして。ヒラノユウヤです。
普段はハードウェアエンジニア(電気)として暮らしています。
この記事では、ソフトウェア初心者の私がtoio.jsを使って作ってみたtoio作品を紹介したいと思います。## ソフトウェアスキル
– C言語
– 学校の授業では真面目に取り組んでいました
– 社会人になってからも、Arduinoを使いこなすくらいには使っていた感じ以上。なんとも貧弱で泣けてきます。
なんですが、toio core cubeを使ったプログラミングがどうしてもやりたくて。
toio.jsの環境を友人に手伝って構築してもらったところからスタートしました。
始めてみると、サンプルコードもあるので、苦労はしながらも意外といろんなものができました。## 参考にしたもの
１にも2にも、公式情報が命でした。
用意されているtoio.jsの使い方はtoio.jsのページで。
buzzerの音階やtoio IDの情報など、t
Node.jsでTwitterを自動化する
https://adventar.org/calendars/4650
OUCC(大阪大学コンピュータクラブ)のアドベントカレンダー12日目です。Node.jsのtwitterモジュールでtwitterAPIを叩きました。
モジュールの更新が2017年で止まっており、一部機能が使えなくなっています。
先駆者の皆さんの記事のコードが動かないこともありました。# ツイートする
twitter APIを取得して、API key, API secret key, Access token, Access token secretを取得しました。これに関しても参照ページからほかの方の記事をご覧ください。送信できる環境が整ったので、ひとまずtwitterモジュールからツイートしてみました。
“`
//モジュールの読み込み
const twitter = require(‘twitter’);//ツイート内容
const text = ‘test’//上からAPI key, API secret key, Access token, Access token secret
c
スクレイピング & サーバレスAPIでNode.jsの雰囲気を体験してみる
みなさん、今年ももう終わりです。1年早いですね。
今回はチュートリアル形式でNode.jsとサーバレスを体験していただきたいなと思っています。
初心者の方にもとっつきやすく、目に見えるフィードバックがあるのでモチベーションも続きやすいと思います。### 対象の読者
– 面倒なので5分で試したい （大事）
– プログラミングやったことあるけど、もっと踏み込んだものを作りたい
– そもそもJavaScript触ったことない
– JavaScriptを触ったことがあるけどそこまで深く知らない
– asyncとawaitってなに？
– API作ってみたい
– 無料がいい
– サーバレスって聞いたことあるけど触ったことない or メリットがわからない## 使うもの
APIが動作環境 -> Zeit NOW
スクレイピング -> Puppeteer## なんでこの構成にしたか
– 僕がPython触ったことがなく、Selenium触るのがちょっとめんどうだった。（JSはある程度触れる）
– スクレイピングは、割とオンデマンドな面があると思っていて、要求があった時に対象のWebサイトの情
前々回の記事で作成したオウム返しチャットボットにQ&Aエンジンを実装する
#前々回の記事で作成したオウム返しチャットボットにQ&Aエンジンを実装する
※本記事は最終的にQ&Aチャットボットを構築するための一部分となります。
[本編はこちら](https://qiita.com/abemaki/items/8c611cc63ec109ab3835)###Q&Aナレッジを格納するベースファイルを作成します
テストの為に気象庁のQ&Aを元にQ&Aエクセルを作成します
QANDA.xlsxというファイル名で保存します出典：https://www.jma.go.jp/jma/kishou/know/faq/faq10.html
knowledgeBaseというフォルダを作成し、QANDA.xlsxを配置します
> この記事は、 [North Detail Advent Calendar 2019](https://qiita.com/advent-calendar/2019/northdetail) の8日目の記事です。
## 前置き
昨年に [VuePress](https://v1.vuepress.vuejs.org/) を知ってから、ちょっとしたドキュメントをまとめたサイトを作るのによく使っています。
Markdown でファイルをちゃちゃっと書けば、すぐに良い感じのサイトに仕立て上げられるので、すごく便利ですね。
ただ、コンテンツ全体を出すのにサイドバーにメニューを作っていかなきゃいけないんですが、それって結構面倒だなぁ、と思うんですよ。
「じゃぁ、プラグイン作っちゃえばよくね?」
と、思ったので挑戦してみました。今回は NPM のパッケージではなく、ローカルに配置するパターンです。
また、作成した Markdown ファイルをアルファベット順に表示するだけ、です。
(これだけでも、シンプルなサイトなら十分楽になるので。)## 準備
まず、 VuePress の
IBM Cloud App ID Node.js Webクイックスタート
#はじめに
IBM Cloud App IDは、ユーザー認証を手軽に組み込めるサービスです。
AWSでいうとCognitoに相当するサービスです。今回は、IBM Cloudのドキュメントで公開されている[Node.js Webクイックスタート](https://cloud.ibm.com/docs/appid?topic=appid-web-node&locale=ja)を補足＆若干の変更を加えてながらやってみたいと思います。
なお、本記事で紹介するソースコードは、[ここ](https://github.com/yo24/APPID-Quitck-Start)からダウンロード可能です
#環境
ローカルPC上のNode.js(v10.6.3)を利用します。
Node.js自体のセットアップ手順は割愛します。#クイックスタートでやること
クイックスタートでは、OAuth 2.0 [認可コードフロー](https://openid-foundation-japan.github.io/rfc6749.ja.html#grant-code)を用いた認証するアプリケーションを作成
NestJS アプリケーションをプロダクションレディにする
この記事は [NestJS アドベントカレンダー](https://qiita.com/advent-calendar/2019/nestjs) 6 日目の記事です。
## はじめに
サンプルコードのリポジトリは以下になります。
https://github.com/nestjs-jp/advent-calendar-2019/tree/master/day6-prepare-for-production-usage
なお、環境は執筆時点での Node.js の LTS である v12.13.1 を前提とします。
## cli で雛形アプリケーションを作成
この記事では `@nestjs/cli` で生成される雛形に対して、プロダクションで実行するための設定を加えてゆきます。
“`bash
$ nest new day6-prepare-for-production-usage
“`## config を作る
公式ドキュメントの [Configuration](https://docs.nestjs.com/techniques/configuration) の
ローカルでデバッグ＆テスト可能なLINEチャットボット開発環境（Node.js Express LINESimulator ）を作成する
#ローカルでデバッグ＆テスト可能なLINEチャットボット開発環境（Node.js Express LINESimulator ）を作成する
※本記事は最終的にQ&Aチャットボットを構築するための一部分となります。
[本編はこちら](https://qiita.com/abemaki/items/8c611cc63ec109ab3835)※前段の記事で作成したオウム返しチャットボットベースとなります。
[まだ未作成の方はこちら](https://qiita.com/abemaki/items/44d2015561c31ea9628e)###DEBUG環境を作成する
####１．DEBUG環境を作成します
構成の追加からlaunch.jsonを生成します
DEBUG用の設定情報を追加します。DEBUG時はシュミレータ
Heroku + LINE + node.js (Express.js)でオウム返しボットを作成する
#Heroku + LINE + node.js (Express.js)でオウム返しボットを作成する
※本記事は最終的にQ&Aチャットボットを構築するための一部分となります。
[本編はこちら](https://qiita.com/abemaki/items/8c611cc63ec109ab3835)##何故、オウム返しなのか？
オウム返しはチャットボット構築の基礎中の基礎になります。
オウム返しすることで以下の３点が確認・理解できます。①単純な疎通確認
・今回だと、スマホ ←→ LINE ←→ メッセージングAPI ←→ Herokuで稼働するアプリまでの疎通確認になります②単純な動作確認
・LINEで発話した内容を正常に受信できることの確認
・アプリケーションから発話した内容がLINEで正常に受信できることの確認③疎通に必要な手順の理解、メッセージのやりとりに必要な手順の理解
はじめて使う技術でWebアプリケーション作成するときに最初にやるhello worldと同じですね。
単純なことですがこれらを最初にやるかやらないかでは技術の習得レベル
Node.jsでBASIC認証.
# Node.jsでBASIC認証
Node.jsでexpressを使ったWebサーバでBASIC認証を導入する場合の実装方法について紹介します．
本記事上では，パスワードを暗号化・ハッシュ化せずにソースコード上に記載しております．セキュリティ上望ましくない点にご注意ください．# BASIC認証の導入
expressでBASIC認証を導入するには[express-basic-auth](https://www.npmjs.com/package/express-basic-auth)を使用します．下記がそのサンプルコードです．“`javascript
const express = require(“express”)
const basicAuth = require(“express-basic-auth”)// 正解のユーザ名とパスワード
const correctUserName = “hiroyky”
cosnt correctPassword = “password”const app = express();
app.use(basicAuth({
Expressコマンドがありません（Windows）
# 一週間悩んだ・・・
“`bash
bash: express: command not found
“`#ググり、そして出版会社にもメールを投げた
パスが通ってないっていうのがかなり記事としてあがっていたが、どうも違う。
出版会社に問い合わせたらnpm install -g express-generator をsudoで実行するというのもあったが、
そもそもsudoの時点でコマンドがありません。お手上げ。#もしかしてnode.jsのバージョンが古いのでは？
一旦アンインストールし、最新版をインストールしてからnpm install -g express-generator#そして・・・expressコマンド実行
“`bash
$ express -e ex-gen-app
“`#コマンドが通った！
“`
$ express -e ex-gen-appwarning: option `–ejs’ has been renamed to `–view=ejs’
create : ex-gen-app\
create : ex-g
