- 投稿日:2020-07-15T22:05:25+09:00
簡単レシート印刷 receiptline で位置揃えしてみた
日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
まだレシートプリンターがないので、前回利用した開発ツールを引き続き使います。
今回は位置揃えです。Markdown のテーブル
Markdown のテーブルを思い出してみましょう。
1 行目はヘッダー、2 行目は位置揃え、3 行目以降はデータです。Markdown|left|center|right| |:---|:---:|---:| |ABCDEFGHIJ|abcdefghij|1234567890|
left center right ABCDEFGHIJ abcdefghij 1234567890 レシートはテーブル
receiptline もテーブルなのですが、少し違いがあります。
ヘッダー行と位置揃え行がなく、どこまでもデータ行です。レシートを無限に続くテーブルと考えているのですね。
では最初のこれもテーブル?ReceiptLinehello, world!文字列の両側にテーブルの区切り記号
|
を追加してみます。
しかし、結果は変わりません。ReceiptLine|hello, world!|行の始めと終わりの
|
は省略されていたのです。
単純な文字列も立派なテーブルでした。位置揃えはスペースで
位置揃え行を使わずに、どのように設定するのでしょうか?
それはスペースです。左揃え
文字列の後にスペースを挿入すると、左揃えになります。
ReceiptLine|hello, world! |中央揃え
文字列の前にもスペースを挿入すると、今度は中央揃えに。
ReceiptLine| hello, world! |右揃え
文字列の後のスペースを削除すると、右揃えになります。
ReceiptLine| hello, world!|省略形
行の始めと終わりの
|
が省略できることを利用した位置揃えです。
|
がレシート用紙の端に見えてきませんか?ReceiptLine|左揃え |left 右揃え| right|字下げのスペースを出力する
ソースコードやポエムに欠かせない、字下げ。
しかし、スペースはすでに位置揃えのために使われています。そこで空白記号
~
の登場です。~
はスペースに変換されます。
ちなみに、チルダを出力したいときは\~
と書きます。ReceiptLine|hello, world! | |~hello, world! | |~~hello, world! | |~~~hello, world! |次回は 2 列のテーブルを試してみようと思います。
- 投稿日:2020-07-15T22:00:17+09:00
初心者がQiitaのタグ情報を取得しTOP10を可視化し考察する。
目的
2020/7/14現在のQiitaのタグランキング(TOP10)の記事数とフォロワー数の相関性を調べたい。
2020/7/14現在のタグランキング
ランキング タグ 記事数 フォロワー数 1位 Python 43447 79118 2位 JavaScript 35443 77167 3位 Ruby 28098 42793 4位 Rails 24287 29232 5位 PHP 20276 47787 6位 AWS 19735 8584 7位 iOS 16253 38170 8位 Java 15026 50361 9位 Docker 14948 7636 10位 Swift 14702 7268 環境
node v14.5.0
axios 0.19.2コード
app11.jsconst axios = require("axios"); async function main() { let response = await axios.get("https://qiita.com/api/v2/tags?page=1&per_page=20&sort=count"); for (let i = 0; i < 10; i++) { console.log('タグ: %s' ,response.data[i].id); console.log('記事の数: %d' ,response.data[i].items_count); console.log('フォロワー数: %d' ,response.data[i].followers_count); console.log(''); } } main();実行結果
タグ: Python 記事の数: 43447 フォロワー数: 79118 タグ: JavaScript 記事の数: 35443 フォロワー数: 77167 タグ: Ruby 記事の数: 28098 フォロワー数: 42793 タグ: Rails 記事の数: 24287 フォロワー数: 29232 タグ: PHP 記事の数: 20274 フォロワー数: 47787 タグ: AWS 記事の数: 19735 フォロワー数: 8584 タグ: iOS 記事の数: 16253 フォロワー数: 38170 タグ: Java 記事の数: 15206 フォロワー数: 50361 タグ: Docker 記事の数: 14948 フォロワー数: 7636 タグ: Swift 記事の数: 14701 フォロワー数: 7268結果
csvで出力しようしましたが、今回のトライではうまくできず・・・
テキストドキュメントにコピペし,(カンマ)へ置換をし不必要な部分は削除しました。Jupyter Notebookで可視化
最近まで勉強していたJupyter Notebookでチャートを作成しました。
ライブラリとCSVを読み込み、コードを実行。
考察
- 今回グラフから読み取れるのは、PythonとJavaScriptの人気が非常に高い。
- Pythonは、AI、IoTなどの分野で活用され、人気が高まってる?私もRaspberrypiを使うようになりPythonに興味を持った。
- フォロワー数に対する記事数はPythonが多い、Pythonの記事は書きやすい技術が多い?またJavaを見るとフォロワー数は多いが、記事数は少なめ、なぜ??
今後
- JavaScriptにもグラフを書けるChart.jsやECharts.jsというライブラリがあるようなので、次回はそちらで可視化をしてみたい。
- 今回は私の考察のみだが、なぜこの2つが人気が高いのか、掘り下げてる。
- 投稿日:2020-07-15T20:05:56+09:00
Pythonでは`+++`も`+++++`も`++++++++`も許される
バズっているようなので相乗りします。
C/C++ では+++は許される
JavaScriptで+++は許されない+ ++は許されるPythonでは
++
も+++
も++++++++++
も許されます!a = 1 b = 2 print(a+b) # OK print(a++b) # OK print(a+++b) # OK # ... print(a+++++++++++++++b) # OKすなわち、
+
を繋げてどんなに長い「演算子」をつくったとしても動きます。上でつくった「演算子」は、前置演算子としても使えます。
上でつくった「演算子」は2項演算子ですが、同様に前置演算子バージョンもあります。
a = 1 print(+a) # OK print(++a) # OK print(+++a) # OK # ... print(+++++++++++++++a) # OK
-----
でもよい。
+
が嫌いな方は、-
を使って「演算子」を構成してもよいでしょう。a = 1 b = 2 print(a-b) # OK print(a--b) # OK print(a---b) # OK # ... print(a---------------b) # OKもちろん、前置演算子バージョンも使えます。
また、+
と-
を適宜まぜあわせて使ってもいいです。(+---+-+++-+
のように)用途
ソースコードの区切り
print("first") print("second") print("third") 0-+-+-+-+-+-+-0 print("100 times")JavaScriptだとダメ
Javascriptの場合、以下のように3文字以上の「演算子」はエラーとなる可能性が高いです。
let a = 1 console.log(+++a) // NG console.log(a+++) // NG console.log(++-a) // NGただし、以下はOKです。
let a = 1, b = 2 console.log(-++a) // OK console.log(+-+a) // OK console.log(a++-b) // OK console.log(a-++b) // OK console.log(a++-++b) // OKなぜダメなの?
PythonとJavaScript (or C)の違いは、インクリメント演算子
++
が定義されているかどうかです。例えば+++++
という「演算子」がある場合は演算子を最小一致で切り出していくので、++
++
+
という3つの演算子に分割されます。
++
演算子は右側(or 左側)が左辺値(変数)でなければならないため、エラーとなります。思ったこと。
インクリメンタル演算子がある言語の場合、大体どれも同じ挙動をしますね。https://t.co/7RRNSuFLBk
— yasuo_ozu (@yasuo_ozu) July 14, 2020※
++
が存在しない言語でも、Luaの場合は++
のようにつなげて書くと+
+
のように分割されず、エラーになるようです
- 投稿日:2020-07-15T19:01:21+09:00
node_modulesをLambdaレイヤーにアップロードしてライブラリを使用する
経緯
- 同じライブラリを使用しているLambda関数が増えた
- コンソール画面からコードを編集できるようにしたい
- 上記の理由から、layerに共通ライブラリを登録し、それを読み込ませることでLambda関数を軽量化する
環境
- ローカルOSはWindows10(Macでもで順は同様)
- LambdaはNode.jsを使用
node_modules準備
- 『nodejs』という名前のフォルダを作成する
※名前がめちゃくちゃ大事です。layerはnodejs/node_modulesのフォルダ構成じゃないと読み込んでくれません(正確に言えばopt直下に生成されるのでopyt/nodejs/node_modulesとなりますが気にしなくて良いです)
① 新規で準備する場合
→作ったフォルダ直下にnode_modulesを作成
npm install 必要なライブラリ名② すでにnode_modulesフォルダが有る場合
→node_modulesフォルダを先程作ったnodejsフォルダに移動する
- nodejsフォルダをzip化する
Lambdaレイヤーの作成
- AWS Lambdaのレイヤーから「レイヤーの作成」をクリック
- 名前を入力
- 先程zip化したフォルダをアップロード
- ランタイムを選択(今回はNode.jsを選択)
- 「作成」ボタンをクリック
これでレイヤーは完成です
Lambda関数への適用
- 適応するLambda関数の「設定」→「デザイナー」→「Layers」を選択し、下の「レイヤー」→「レイヤーの追加」をクリック
- 名前とバージョンを先程作ったレイヤーに設定(新規で作った場合はバージョン1です)
- 各関数からレイヤーに上げたモジュールを削除する
これでパッケージとして動いていた時と同じ動作をするはずです
- 投稿日:2020-07-15T14:21:02+09:00
Mac nodebrew installを実行した時にエラーが出た話 超簡易版
目的
- 問題の解決方法を簡単にまとめる。
問題までの経緯
下記コマンドを実行してNode.jsをインストールしようとした。
$ nodebrew install v8.9.4問題
下記のエラーが発生した。
$ nodebrew install v8.9.4 Fetching: https://nodejs.org/dist/v8.9.4/node-v8.9.4-darwin-x64.tar.gz Warning: Failed to create the file Warning: /Users/okawashun/.nodebrew/src/v8.9.4/node-v8.9.4-darwin-x64.tar.gz: Warning: No such file or directory curl: (23) Failed writing body (0 != 979) download failed: https://nodejs.org/dist/v8.9.4/node-v8.9.4-darwin-x64.tar.gz問題解決までの経緯
下記コマンドを実行してnodebrew用のディレクトリを作成した。
$ mkdir -p ~/.nodebrew/src下記コマンドを実行して再度インストールを行ったところ問題は解決した。
$ nodebrew install v8.9.4
- 投稿日:2020-07-15T10:36:07+09:00
nodenvインストール時にdefault-packages file not foundと表示される
default-packagesというファイルが必要らしい
% echo $NODENV_ROOT
でnodenvのルートパスを確認できる
% touch $NODEVN_ROOT/default-packages
でファイルを作成して再インストールしてみる
- 投稿日:2020-07-15T10:11:37+09:00
firebase authのユーザー情報からトークン情報を取り出す簡単なスクリプトをnodeでつくる
モチベーション
最近は、クライアント(iOSやAndroid, Webクライント)とAPIサーバを別立てして開発していくことは多いと思います。
弊社も例にもれず、こういった構成で開発をしています。
なおAPIサーバのユーザー認証は、firebaseのトークンをJWT認証することで実現しています。
ただし、下記の理由でトークンの扱いが多少面倒なので、今回スクリプトを書いて解消したいと思います。
- APIサーバをRuby on Railsで開発している。しかし、firebaseはRuby向けのSDKを公開していない(2020年7月時点)。
- firebaseのトークンは1時間で有効期限がくる
ゴール
- nodejs経由でfirebaseにアクセスし、トークンを取り出す処理をコンソールアプリを作成する
正直言語はなんでも良いのです。
今季は、SDKが豊富に用意されている、コンソールアプリを作りやすい、という理由でnodejsを選択しています。環境
- macOS Mojave Version10.14.4
- nodejs v12.13.0
- npm 6.14.5
※ Windows環境では未検証
前提
- javascriptの基本知識がある
- node, npmの基礎知識がある
- firebase consoleでユーザ作成されている
スクリプト
1. 事前準備① firebaseの認証情報を取得する
firebase consoleにアクセスし、nodejsからfirebaseへ接続するための認証情報を取得します。
1.1. firebase consoleにアクセス
1.2. 認証情報をコピー
設定 > 全般 > マイアプリ > ウェブアプリ を選択。
firebaseConfig
部分をコピーして控えておきます。2. 事前準備② nodeプロジェクトの作成
2.1. nodeプロジェクトの作成
適当なフォルダを作成する。
mkdir firebase_authentication cd firebase_authentication # npm initの質問は、何も考えずEnterでOK npm init
package.json
が作成されていればOKです。~/firebase_authentication❯ ls total 8 drwxr-xr-x 3 TomoakiTANAKA staff 96 Jul 15 09:42 . drwxr-xr-x+ 164 TomoakiTANAKA staff 5248 Jul 15 09:43 .. -rw-r--r-- 1 TomoakiTANAKA staff 219 Jul 15 09:42 package.json2.2. firebaseSDKのインストール
npm install firebase
package.json
にfirebaseが追加されます。package.json+ "dependencies": { + "firebase": "^7.16.0" + }3. スクリプト作成
mkdir scripts cd scripts touch firebase_token.jsfirebase_token.jsconst firebase = require('firebase/app'); const firebaseAuth = require('firebase/auth'); const readline = require('readline').createInterface({ input: process.stdin, output: process.stdout }); // firebase consoleから取得した認証情報 const firebaseConfig = { apiKey: "AIzaS.....", authDomain: "hogehoge-foobar.firebaseapp.com", databaseURL: "https://hogehoge-foobar.firebaseio.com", projectId: "hogehoge-foobar", storageBucket: "hogehoge-foobar.appspot.com", messagingSenderId: "532........", appId: "1:532.......:web:xxxxxxxxxxxxxxx", measurementId: "G-xxxxxxxxxxx" }; // 認証したいメールアドレス const email = 'hogehoge@eversense.co.jp'; // パスワードの読み込み readline.question(`input ${email}'s password:`, (password) => { showFirebaseIdToken(email, password); readline.close(); }); // firebaseにアクセスしトークンを取得、表示する function showFirebaseIdToken(email, password) { // firebase appの初期化 const app = firebase.initializeApp(firebaseConfig); // メール認証 firebase.auth().signInWithEmailAndPassword(email, password) .then((result) => { const firebaseAuthUser = result.user; firebaseAuthUser.getIdToken(true) .then((idToken) => { console.log(idToken); }) .catch((error) => { console.log(error); }); }) .catch(function (error) { console.log(error); }); }実行方法
node scripts/firebase_token.jsまとめ
今までログに認証情報を吐き出して、コピペして…というイケてないフローでしたが、これでだいぶ開発体験が向上しました。
あと、記事作成中に、firebase CLI
使えばいんじゃね?と思いました。まぁnodeベースでかければちょっとした処理を試せるので、これはこれでいいかなと思います。
- 投稿日:2020-07-15T09:54:44+09:00
GatsbyJSで構築したブログサイトにGoogle Analyticsを入れる
大学4年生(2020年7月時点)のゆうやと申します。
最近、GatsbyJSで自分のブログサイトを構築して遊んでいます。
この記事では、Google Analyticsを導入する方法について解説してみます。結論
gatsby-plugin-google-analytics
というプラグインを導入します。gatsby-plugin-google-analytics | GatsbyJS
前提
- 筆者の環境
- Windows 10 Home 64bit
- node v12.18.0
- npm 6.14.4
- Netlifyでホスティング
- Google Analyticsのアカウントは作成済み
手順
- パッケージをインストールする
- 設定ファイルにプラグインの記述をする
- 環境変数の設定をする
パッケージをインストールする
gatsby-plugin-google-analytics
というパッケージをインストールします。$ npm install --save gatsby-plugin-google-analytics設定ファイルにプラグインの記述をする
gatsby-config.jsmodule.exports = { plugins: [ { resolve: `gatsby-plugin-google-analytics`, options: { trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID", }, }, ], }環境変数の設定をする
Google AnalyticsのトラッキングIDを環境変数で指定します。
Netlifyでの設定も必要です。Netlifyで環境変数の設定をする
次の順番で設定ページを開いていくと、環境変数の設定ができます。
- Site settings
- Build & deploy
- Environment
- Environment variables
Key
をGOOGLE_ANALYTICS_TRACKING_ID
として、
Value
に実際のトラッキングIDを入力したらOKです。設定ファイルで環境変数の指定をする
gatsby-config.jsrequire("dotenv").config() module.exports = { ... trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID, ... }確認
自分のサイトにアクセスして、アナリティクスのリアルタイムレポートを見てみます。
自分らしきアクセスが確認できれば、うまくいっています。
- 投稿日:2020-07-15T05:58:38+09:00
週間ユーザーランキングに入る方法を考察するために、上位5名の記事投稿頻度を比較してみた
目的
Qiitaでフォロワー数を増やす1つの方法として、「書いている記事が目立つ!」のが大事だと思いますが、そのためには、「週間ユーザーランキングで10位以内に入る」「1日のトレンドに入る」を1つの目標とするのがいいのではないかと考えました。
では、1つの目安として、「週間ユーザーランキングで上位5名はどのくらい記事を書いているんだろう」という点に興味を持ち、分析してみました。
仮説
- 1週間に1度くらいのペースで記事を投稿している方が多いのではないか
分析方法
ユーザー毎の全ての記事の日時を取得し、記事投稿の頻度を考察しました。
const axios = require("axios"); async function main() { let response = await axios.get( "https://qiita.com/api/v2/items?per_page=100&query=user:halhal23" ); for (let i = 0; i < response.data.length; i++) { console.log(response.data[i].created_at); } } main();分析結果
2020年7月14日の週間ランキングに基づき、分析しました。
※西暦は、西暦毎の記事数
順位 ユーザー名 フォロワー数 総記事数 2020 2019 2018 1位 arowM 509 58 3 14 15 2位 okazuki 322 53 53 0 0 3位 tomo_makes 324 27 5 6 5 4位 TakahikoKawasaki 873 44 6 10 8 5位 halhal23 19 1 1 0 0
- 2位のokazukiさんのみが、1週間1本以上の記事を投稿していた(投稿開始は2020年3月)
- 3名は、1-2ヶ月に1本コンスタントに記事を投稿していた(投稿開始は2014年-2016年)
- 1名は、記事数1本のみで、5位にランクインしていた。(記事内容は、高卒フリーターからエンジニアになれた話)
考察
- フォロワー数が少なく、記事数1本でもランクインする方がいることから、記事数よりもQiitaユーザーのニーズを捉えた記事の質が重要、という当たり前の結論になった。(私はプログラミング初心者なので、記事の質は判別できないが。。)
- 5名中4名はコンスタントに記事を書いていることから、エンジニアとしての知見をたくさん持っている方々との比較になるので、なかなか難儀なことだと感じた。
- 一方で、「高卒からエンジニアになれた話」の記事のみでランクインしていることから、プロのエンジニアたちだけでなく、エンジニアになりたい層も比較的Qiitaユーザーには多いのではないか、と仮説を持った。
- つまり、私がプログラミング初心者だからこそ、初心者に寄り添える記事を書くことで、ランキングに入っていくことも可能なのではないか。
感想
はじめて記事を書きました。
現状は、非エンジニアなので、プログラミングをすること自体に全く慣れていませんが、その分、違った視点から記事が書けるのではないかと思いました。
もっと多くのビジネスパーソンが、プログラミングに慣れ親しみ、アフターコロナ、ウィズコロナ環境下で、生産性を上げていく社会にするための記事を書けるようになっていけたらと思います。
最後までお読みいただき、ありがとうございました!
- 投稿日:2020-07-15T02:00:00+09:00
コマンドをコピペした際に時々紛れてくる$を無視するパッケージをJavaScriptで作った
インターネットからコピーペーストをしたときに紛れてくる
$
を無視してコマンドを実行できるようにするパッケージを作りました。インストール
npm -g install dlll※注意 yarnの場合、
warning
が出ます。詳しくはこちら
https://github.com/valerybugakov/yarn/blob/84fc1b51e1d9ce424c495e225a790c2eeaca8627/src/util/normalize-manifest/util.js使用例
使用例
$ ls zsh: command not found: $npm -g install dlll $ ls README.md node_modules package.json tsconfig.json built package-lock.json src削除方法
npm -g uninstall dlll
コード
コード自体はJavaScriptで4行で書かれています。
https://github.com/yushimatenjin/dllll
JavaScript
index.ts#!/usr/bin/env node import { spawn } from "child_process"; if(!process.argv[2]) process.exit(0) spawn(process.argv[2], [...process.argv.slice(3)], { stdio: "inherit" });package.json
package.jsonの
bin
に$を指定し、パッケージとして実行できるようにします。
https://docs.npmjs.com/files/package.json#binpackage.json{ ... "bin": { "$": "./built/index.js" } ... }これで
$
が入力された際に、このプログラムが実行されるようになります。
- 投稿日:2020-07-15T02:00:00+09:00
コピペした際に時々紛れてくる$を無視するパッケージをJavaScriptで作った
インターネットからコピーペーストをしたときに紛れてくる
$
を無視してコマンドを実行できるようにするパッケージを作りました。コピーした際に$がコピーされる時とされない時がありもどかしい
インストール
npm -g install dlll※注意 yarnの場合、
warning
が出ます。詳しくはこちら
https://github.com/valerybugakov/yarn/blob/84fc1b51e1d9ce424c495e225a790c2eeaca8627/src/util/normalize-manifest/util.js使用例
使用例
$ ls zsh: command not found: $npm -g install dlll $ ls README.md node_modules package.json tsconfig.json built package-lock.json src削除方法
npm -g uninstall dlll
コード
コード自体はJavaScriptで4行で書かれています。
https://github.com/yushimatenjin/dllll
JavaScript
index.ts#!/usr/bin/env node import { spawn } from "child_process"; if(!process.argv[2]) process.exit(0) spawn(process.argv[2], [...process.argv.slice(3)], { stdio: "inherit" });package.json
package.jsonの
bin
に$を指定し、パッケージとして実行できるようにします。
https://docs.npmjs.com/files/package.json#binpackage.json{ ... "bin": { "$": "./built/index.js" } ... }これで
$
が入力された際に、このプログラムが実行されるようになります。
- 投稿日:2020-07-15T02:00:00+09:00
コピペした際に時々紛れてくる$を無視する
インターネットからコピーペーストをしたときに紛れてくる
$
を無視してコマンドを実行できるようにするパッケージを作りました。コピーした際に$がコピーされる時とされない時がありもどかしい
インストール
npm -g install dlll※注意 yarnの場合、
warning
が出ます。詳しくはこちら
https://github.com/valerybugakov/yarn/blob/84fc1b51e1d9ce424c495e225a790c2eeaca8627/src/util/normalize-manifest/util.js使用例
使用例
$ ls zsh: command not found: $npm -g install dlll $ ls README.md node_modules package.json tsconfig.json built package-lock.json src削除方法
npm -g uninstall dlll
コード
コード自体はJavaScriptで4行で書かれています。
https://github.com/yushimatenjin/dllll
JavaScript
index.ts#!/usr/bin/env node import { spawn } from "child_process"; if(!process.argv[2]) process.exit(0) spawn(process.argv[2], [...process.argv.slice(3)], { stdio: "inherit" });package.json
package.jsonの
bin
に$を指定し、パッケージとして実行できるようにします。
https://docs.npmjs.com/files/package.json#binpackage.json{ ... "bin": { "$": "./built/index.js" } ... }これで
$
が入力された際に、このプログラムが実行されるようになります。