2019-01-01から1年間の記事一覧
小ネタです。 FirebaseでCloudFunctionsを利用してRESTful APIを作成していると、通常はhttps://[Region]-[ProjectID].cloudfunctions.net/[関数名]といったURLになるわけですが、これを独自ドメインで運用したい、またはパスを変更したい場合の設定方法です…
今年のWWDCで発表された「Sign In with Apple」のWeb版(JavaScript版)を実装してみたいと思います。 今回、裏側はFirebaseを利用していますが、Authenticationは使っていませんので、一般的な環境でも参考になると思います。（執筆時点でまだFirebaseが未対…
以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。 プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。
canvasタグに現在描画されている内容を画像としてクライアントにダウンロードしてみます。 Webブラウザなどのクライアントだけで完結するためサーバの負荷などを気にする必要がありません。 今回はひたすらカウントアップするcanvasを、ボタンを押したタイミ…
今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。 ↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。
小ネタです。 例えばsplitコマンドなどで分割したファイルをダウンロードした際に、一つ一つMD5の値を確認するのはダルいですよね。md5sumコマンドでは、予め検証したいファイルのパスとそのMD5の値をペアで記述されたファイルを用意しておくと、一発で確認…
小ネタです。 Linuxなどで利用するmd5sumをmacOSで利用するには別途インストールする必要があります。 結論から言うと以下で一発です。 $ brew install md5sha1sum 今回はv0.9.5が入りました。 $ md5sum --version Microbrew md5sum/sha1sum/ripemd160sum 0.…
小ネタです。 シェルスクリプトを書いている際にwgetで正常にファイルをダウンロードできた場合のみ処理を継続したい場合には次のようなコードを書きます。 #!/bin/bash wget 'https://example.com/foo.zip' if [ $? -ne 0 ]; then echo "[ERROR] 正常にダウ…
Node.jsでは、ファイルにデータを書き込む様々な方法が用意されています。今回はよく使われる方法についてまとめてみます。
Node.jsでは、ファイルからデータを読み込むだけでも様々なアプローチが用意されています。 今回はよく使われる方法についてまとめてみます。
JavaScriptで乱数を利用したい場合はMath.random()を使うことがほとんどだと思いますが、内部のロジック的に暗号などセキュアな用途には向いていないとされています。Node.jsでは標準モジュールであるcryptoを利用することでこの問題を解決することができま…
最近のGitHubでは、リポジトリ上で依存している外部のライブラリやモジュールが古いままだと警告を出してくれる機能が追加されました。Webページ上でも表示されますし、git pushなどremoteと通信した際などにも確認できます。 $ git push Total 0 (delta 0),…
「Dockerで開発環境を作らないヤツは人にあらず」的な空気を感じる昨今ですが、古来から子々孫々と受け継がれし方法を現代に伝承していく所存であります。 というわけで、HomeBrewでmacOSにMySQLを入れていきます。
今回はHTML5の機能を利用した「QRコードリーダー」を作成します。 以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。 PCやスマホに付いているカメラの映像を0.3秒毎にチェックし…
JavaScriptやCSSには人間が読みやすいよう、改行やスペースを設けたり、パット見て何に利用するかわかりやすい変数名をつけるわけですが、これは対人間用であってそれを実行する機械にとっては邪魔でしかありません。変数は1文字あれば十分ですし、改行やス…
HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。 カメラの映像が向かって左側に写り続け、良いタ…
前回はアニメーションするQRコードを作成しましたが、今回はその応用です。時間とともにQRコードの情報が変化する「おみくじ」を作ってみたいと思います。 ついカットなっておみくじQRコードを作った。 pic.twitter.com/0pKlS1576g— 勝部麻季人 (@katsube) …
前回はQRコードの中央にちょっとした画像を貼り付ける「デザインQR」を作成しましたが、今回はその画像をアニメーションさせてみたいと思います。 アニメーションするQRコード作ってみた。これくらいの大きさならQRコードリーダーも認識してくれる。紙はムリ…
今回はQRコードの真ん中あたりに画像を埋め込む「デザインQR」をNodeで作成してみます。 通常のQRでも機能自体に問題ありませんが、以下のような欲求が出てきます。 どんなデータが埋め込まれているか想像しづらい、 デザイン的に無粋(無機質) 今回はこれら…
今回はNode.js上で簡単にQRコードが生成できるnode-qrcodeを利用し、動的にQRコードを生成してみたいと思います。 github.com QRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。 しばらく前から日本…
Markdownでプログラムのソースコードを記述する場合に使うバッククォート3つで囲う「コードブロック」ですが、気の利いた環境だと自動的にシンタックスハイライトによって予約語やコメント分などを色分けして見やすく表示してくれます。 GitHubも例外ではな…
今回はAWSで気軽にVPSサーバを立てることができるLightsailで、LAMP環境を構築してみます。1台のサーバにWebとDBが同居する形の非常にシンプルな物です。 もともとAnsibleで自動化しようと思ってタスクを洗い出していたのですが、せっかくなのでブログにも残…
Linuxでいわゆる「RAMディスク」を作成してみます。 HDDは情報の読み込みでも書き込みでも物理的な速度でメモリにはかないません。で、あるならばメインメモリの一部をHDDに見せかけることができれ5ば超高速なストレージとして使えるのでは！という発想です…
動的なコンテンツをPHPやPython、Rubyなどで生成しているサービスはたくさんありますが、すべてを毎回最新の情報に書き換える必要は無い場合も多いでしょう。一定時間は許容されたり、同じ情報を複数のユーザーで共有することも場合によっては可能なはずです…
HTTP/1.1まではサーバクライアント間の通信内容がテキストでのやり取りのため、人間が手作業でサーバと直接やるとりすることが可能です。HTTPの勉強はもちろんですが、開発時にGoogleChromeなどWebブラウザや便利ライブラリによってブラックボックス化されな…
Webブラウザなどで何度も同じサイトにアクセスした際に、その都度変化する情報もあれば、全く更新されない情報もあります。前回と同じ情報であればブラウザ内部に一時的に保存し再利用してもらった方がサーバもクライアントもお互いに仕事が減って助かります…
本番用のWebサーバでは利用しているソフトウェアのバージョン情報を表示しません。 例えば何らかの事情で最新版を利用していないことがわかると簡単に脆弱性を突かれてしまいます。また直接的に攻撃をされなくともクラックのきっかけになりますので不要な情…
GWのロングツーリングに向けて色々準備しています。アクションカムでずっと撮影しながら旅をしようと思っているのですがネックになるのはSDカード。結構なファイル容量になるのでポータブルSSDを持ち歩いて定期的にコピーすることも考えましたが、正直面倒な…
サーバに大量のリクエストを投げたり、こちらが指定した順番でURLを叩くなど言わゆる「負荷試験」を行う際によく利用されるJMeterを今回はmacOSにインストールしてみます。
「はじめてのReact」一覧に戻る 前回はアイコンやテキスト情報を表示しましたが、色を直接指定することができませんでした。primaryやerrorなど意味を示す物でしたよね。今回はデフォルトで定義されている色などを変更するテーマ機能を触ってみます。
