はてなブックマーク

小ネタです。 踏み台サーバであるAmazon Linux2にMySQLのクライアントを入れRDSを操作しているのですが、ある日yum updateをしたら途中で停止してしまいました。 エラーメッセージを眺めるとMySQLをアップデートする際にGPGが原因でコケているっぽい。 $ sudo yum update (中略) warning: /var/cache/yum/x86_64/2/mysql57-community/packages/mysql-community-libs-5.7.37-1.el7.x86_64.rpm: Header V4 RSA/SHA256 Signature, key ID 3a79bd29: NOKEY file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql から鍵を取得中です。 The GPG keys listed for t

Linuxでシステム運用をしていると、数時間〜数日間に及ぶバッチ処理を実行することがあります。手動でプログラムを起動する場合にディスプレイの前にずっと付きっきりでは過労死まっしぐらです。またうっかりTerminalを閉じてしまうと大惨事になってしまうため通常はバックグラウンドで実行します。 その際の具体的なコマンドは以下の通り。 $ nohup (コマンド) & コマンドの最後に&を付けるだけでバックグラウンドで実行してくれます。ただこれだけだとTerminalを閉じてしばらくすると自動的にプログラムも終了してしまいます。そこでコマンドの冒頭に nohup を付けることで強制終了を防ぐことができます。 標準出力に表示されるはずだった内容はカレントディレクトリに nohup.out というファイル名で記録されます。 またコマンドの実行が終了すると以下のような通知が来ます。 $ nohup s

Gitの初期設定で自分の名前やメールアドレスを入力するわけですが、特に認証などが入るわけではないので簡単に他人になりすましが出来てしまいます。そこで確かに自分がコミットまたはタグを付けたことを証明するために、署名を付けることができます。 GitHubを眺めていると見かける、コミットログの横に「Verified」バッジが表示されているのがそれです。 例えばプルリクを受け取った人が、なりすましを行った悪意のある第三者から送られてきたかどうか判断する手助けになるというわけですね。また同様にコミットやタグが改ざんされているかも検知することができます。 準備 GPGのインストール GPG鍵の生成 GPG公開鍵をエクスポート GitHubへ公開鍵を保存 GitにGPG関連の設定を追加 実際に試してみる コミット タグ パスフレーズを毎回入力したくない インストール 試してみる その他 git logで

今回はFirestoreでリアルタイムに情報のやりとりをしてみます。こういったときのサンプルは概ねチャットと相場が決まっていますので、ひとまずデータの授受ができる最低限のコードを書いてみます。 Firestoreの準備と基本的な使い方 詳しくは以下のページをご覧くださいませ。 blog.katsubemakito.net 今回はひとまず動くものを作るのを目標としますので、ユーザー管理は行わず一つの部屋にひたすらメッセージがたまっていく作りにします。 また「ルール」は今回も全開放しています。 service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } } Firestoreの準備と基本的な使い方 サンプル 実行結

Node.jsで組み込み型データベースと言えばNeDBなわけですよ。100% JavaScriptで書かれておりMongoDBと同じ手軽なAPIで操作できる上になんと言っても超高速。先日は仕事で80万件ほどつっこんでみましたが普通に動いてビビリましたｗ 今回はそんなNeDBをElectronで利用する方法をまとめていきます。 ElectronでNeDBを利用する 準備 アプリ内に埋め込む場合 package.jsonに追記 メインプロセスから利用する 注意点 アプリ外に保存する場合 メインプロセスから利用する データの保存場所 サンプル「AppStore売上げランキング」 最終的なファイル ソースコード メインプロセス - src/index.js プリロード - src/preload.js レンダラープロセス - public/index.html NeDB操作モジュール - src/

コマンドラインで利用できる動画編集ツールFFmpegですが、十数年来の付き合いだというのに、たまにしか使わないもんだからオプションが脳みそに定着してくれませんｗ いざ使うとめっちゃ便利なんですよ。でもそこまでたどり着けないｗ 今回は年貢の納め時と思ってオプションの一覧を自分用にまとめることにします。 ちなみに構成を考えながら動画編集する場合には、素直にAdobe PremiereやFinalCutなどのGUIの編集ソフトを使った方が早いです。FFmpegはあくまで定形処理を行う場合に活躍してくれるものと言えます。 インストール ファイル ファイル形式を変換する 解像度を変更する フレームレートを変更する GIFアニメに変換する 解像度とシーンを指定する ループ回数 その他 動画編集 指定したシーンを切り出す 指定した領域を切り出す 画像を上に載せる テキストを上に載せる 音声 動画に音声を

Electron v12で破壊的な変更がいくつか行われました。FLASH関係の廃止、レンダープロセスでremoteが非推奨になるあたりが話題になりますが、IPC通信時に一工夫する必要が生じたのが地味に面倒ですｗ これまではレンダラープロセスからメインプロセスを呼び出す際にはipcRenderer.invoke()を実行するだけでしたが、これがそのままでは使えなくなりました。 const {ipcRenderer} = require('electron') (async () => { const value = await ipcRenderer.invoke('MyAPI') })() 上記を実行すると次のようなエラーとなります。これはrequire()でもimportに限らずエラーメッセージが表示されます。 # requireでのエラーメッセージ Uncaught (in promi

AWS S3へ巨大なファイルをアップロードする際、より高速に転送するには「マルチパートアップロード」を利用することが推奨されています。また一定サイズ以上のファイルはSDKやREST APIからはそもそもPUTすることができません。 マルチパートアップロードというと一見難しそうに聞こえるかもしれませんが理屈も使い方も非常にシンプル。対応したGUIのアプリを使えば裏側で自動的に行なってくれるためそもそも意識する必要すらありません。 今回はAWS CLIとWindowsやmacOS上のGUIのクライアントを利用した方法を取り上げます。 マルチパートアップロードとは S3のそもそもの話 オブジェクトのサイズ上限 マルチパートアップロードの上限値 料金の罠 不完全なデータを確認＆削除 ライフサイクルを設定する アップロード方法 AWS CLI アプリ Cyberduck S3 Browser Win

開発中はconsole.logで見れば良いのですが、ファイルにも情報を記録しておきたい場合にelectron-logを利用すると非常に簡単にログを記録することができます。 const log = require('electron-log'); log.info('Hello, log'); log.warn('Some problem appears'); 以上です。めっちゃシンプルじゃないですかw？あとはOSによってログを保存するのによく利用されるディレクトリへ自動で保存されます。 今回はelectron-logのもう少し詳しい使い方を見ていきます。 準備 基本的な使い方 コード ログレベル 保存先 Windows macOS 記録できる値 応用的な使い方 ファイル名に年月日を入れる プロセスIDを記録する 例外が発生したら自動で記録する 参考ページ 準備 モジュールをnpmでインスト

設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。 今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。 ソースコード 準備 基本的な原理 利用方法 どこに記録されるの？ サンプル デモ メインプロセス レンダラープロセス おまけ 保存先やファイル名を変更する データファイルを暗号化する Validationを行う 参考ページ ソースコード 実際に稼働するソースはGitHubからも確認できます。 github.com 準備 npmで一発で入ります。 $ npm install electron-s

アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。 スプラッシュはブランディングなどが目的の場合もありますが、裏側でこっそり通信を行っている場合もありますね。またはここでファイルをメモリ上にロードする場合もあります。 ソースコード 基本的な原理 フレームレスウィンドウ 利用方法 サンプル デモ メインプロセス レンダラープロセス スプラッシュ アプリ本体 参考ページ ソースコード 実際に稼働するソースはGitHubからも確認できます。 github.com 基本的な原理 フレームレスウィンドウ 一般的にスプラッシュ画面ではアプリや会社のロゴやイメージ画像のみを表示することが多いわけですが、Electronでは「フレームレスウィンドウ」を利用するとそれっぽ

アプリを起動すると自動的に最新版があるか確認し、もし更新されていれば自動的にバージョンアップしてくれる機能を実装します。 いくつか方法はあるのですが今回は electron-builderの機能を使う ビルドしたアプリはAWS S3へアップ 更新があるとユーザーの確認無しでダウンロードしちゃう という方向でまとめていきます。 最終的なファイル 準備 macOS用アプリはコード署名が必要 AWS側の準備 IAM S3のバケット IAMの情報をセットする モジュールを追加 ソースコード メインプロセス レンダラープロセス package.json ビルドする ビルド実行 S3の状態を確認 latest.yml, latest-mac.ymlの中身 実際にバージョンアップしてみる 現在のバージョンをインストール package.jsonを修正 ビルドする 自動アップデートする Windows m

Ajaxによる通信は長きに渡りXMLHttpRequest(XHR)で書かれていましたが、HTML5からFetchAPIが実装されずいぶんとシンプルに記述することが可能になりました。今回は基本的な使い方についてまとめておきたいと思います。 基本的な使い方 GET 最初のthen()は何やってるの？ クエリーを指定する POST ファイルをアップロード 共通 エラー処理（通信時） エラー処理（400,500番代） Cookieを自動で送りたい サンプル GET 実行例 ソースコード HTML JavaScript POST 実行例 参考ページ 基本的な使い方 GET fetch()に取得したいURLを指定するだけでGETによるリクエストが可能です。fetch()はPromiseを返してくれますのでレスポンス内容を処理したい場合にはthen()内で処理を行います。 以下の例はhttps://e

アプリの顔である「アプリアイコン」を設定します。 今回はelectron-builderを利用してビルドする際の内容です。 アイコン画像を設定するのは非常に簡単なのですが、個人開発しているプログラマー的には画像を用意するのが一番ハードル高いですねｗ 基本的な設定方法 アイコン画像を準備 package.jsonに追記 ビルド Windowsでの結果 macOSでの結果 アイコンをサイズ毎に細かく用意する Windowsの場合 macOSの場合 WinodowsとmacOS用アイコンを一発で作成するシェルスクリプト 準備 ソースコード 実行方法 参考ページ 基本的な設定方法 とりあえずサクッと変更したい場合にはPNG画像を1枚用意し、package.jsonに追記するだけです。 アイコン画像を準備 必ず正方形のPNG画像を用意します。少なくともWindows用は256x256pixel、ma

今回はインターネット経由で配布したmacOS用のアプリが安全であることを証明するための作業を行います。 ぶっちゃけ面倒です← あとmacOSがないと作業できませんのでWindowsユーザーの方は（お小遣いを）準備してから挑んでください。 そもそも何が問題なのか 最終的なファイル 準備 macOSが動く環境を準備 Apple Developer Programに登録 Xcodeをインストール 「コード署名」を行う コード署名証明書を作成 ビルドしてみる だがしかし…！ 「公証」に対応する 公証とは？ アプリ固有のパスワードを準備 Team IDを確認 必要なファイルの準備 モジュールを追加 [追加] .env [修正] .gitignore [追加] build/entitlements.mac.plist [追加] scripts/notarize.js [修正] package.json

Markdownでプログラムのソースコードを記述する場合に使うバッククォート3つで囲う「コードブロック」ですが、気の利いた環境だと自動的にシンタックスハイライトによって予約語やコメント分などを色分けして見やすく表示してくれます。 GitHubも例外ではなく、各リポジトリに常設されているWikiやREADMEなどをMarkdownで記述した場合は自動的にシンタックスハイライトされます。 メジャーな言語であればそのまま記述すればよいのですが、例えばYAMLやJSONなどのデータ形式や、Apacheの設定ファイルなどそもそもカラーシンタックスに対応しているのか、対応している場合キーワードはなんだろうと迷いますよね。 今回はGitHubが対応しているカラーシンタックスの設定一覧をまとめておきます。 ハイライトのやり方 GitHubで利用できる言語一覧 定義 一覧 おまけ 抽出方法 参考ページ ハイ

macOSオリジナルのコマンドでクリップボードを操作できる pbcopy, pbpasteの2つのコマンドを覚えておくと、毎回マウス(トラックパッド)で選択してCommand+Cとかする必要がないので楽ちんです。 コピー $ date | pbcopy ペースト $ pbpaste 2020年 1月 9日 木曜日 22時26分49秒 JST 利用方法 基本的な使い方 クリップボードへファイルの内容をコピー クリップボードを空にする クリップボードから書式情報を削除する 注意点 バイナリは扱えない 文字コードが自動変換される おまけ 「pb」ってなんやねん 参考ページ 利用方法 基本的な使い方 クリップボードにコピーするためには、パイプでpbcopyに渡すだけ。パイプではなくリダイレクトをするとpbcopyという名前のファイルが作成されますのでご注意を（←よくやるｗ） $ echo "Gho

※この記事は専門学校の講義用に作成されたものです Node.jsでHTTPサーバを作成します。 以前からNode.jsはサーバを作るための言語であるという誤解している方が結構いらっしゃるのですが、標準モジュールだけでも非常に気軽にHTTPサーバをポンッと作成して立ち上げることが出来てしまうことも起因しているのだと思います。外部のモジュールを取ってくれば様々なサーバ・ソフトウェアが転がっていることでも更に拍車をかけたのでしょう。 今回は標準のモジュールに加えてExpressと呼ばれるモジュールと組み合わせることで、さらに簡単にWebサーバを構築する手順について解説します。 環境準備 nodeとnpmをインストール Gitのリポジトリを作成 Node.js用のプロジェクトを作成 フォルダの作成 Git package.jsonの作成 git commit/push expressでHTTPサー

正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めｗ 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。 サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。 基本的な原理 FetchAPI ブラウザ側 サーバ側 入力内容をチェックする ブラウザ側 ファイルが選択されているか ファイル容量 ファイル形式 サーバ側(PHP) ファイルが正常に受信できているか ファイルが送信されていない ファイル受信時にエラーが発生 何らかのアタックを受けている ファイルサイズ ファイル形式(画像ファイルか) サンプル 実行例 コード HTML JavaScript PHP その他 HTMLでファイル形式を制限する PHPでファイル容量を制限する 参考ページ 基本的な原理 Fetch

今回はRedmineにPlantUMLを埋め込むことができるプラグインPlantUML Redmine pluginを導入してみたいと思います。 インストール PlantUML本体 PlantUML Redmine plugin 動かしてみる 検索してみる インストール PlantUML本体 まずはサーバ上でコマンドラインからPlantUMLが動作するよう設定します。詳しくは以下の記事に沿ってインストールを進めてください。コマンドのパスはあとで使うのでどこかにメモを。 blog.katsubemakito.net PlantUML Redmine plugin 今回は次のプラグインを利用します。 github.com まずはRedmineをインストールしたディレクトリ内にあるpluginsディレクトリまで移動します（パスは環境によって変わります） $ cd ~/apps/redmine/h

AWSでRESTfulAPIをAPIGateway+Lambdaで作ろうとすると、ブラウザ上でGUIをいじくるわけですが操作感が独特で慣れるまでちょっとばかし辛いものがあります。そんな時に活躍してくれるのが「Serverless Framework」。YAMLをチョロっと書くだけでそのあたりの設定を良い感じに行ってくれます。 今回はドキュメントの内容に沿って、Serverless Frameworkの導入から実行までを行います。 初期設定 インストール IAMユーザーの作成 Serverlessアカウントを作成しログイン サービスを作成する プロジェクトの作成 serverless.yml handler.js ローカルでテスト デプロイ 実行する 2つ目の関数を作成する handler2.js sererless.yml 実行する AWS上から削除する 設定 ステージを指定 リージョンを

Firebaseで動的に情報を出力する場合にCloudFunctionsを利用するわけですが、頻繁に情報が変化しない場合など実行結果を一定時間キャッシュしたくなりますよね。Firebaseでは非常に手軽に実装できます。 結論から言うと以下のようにCache-Controlヘッダを出力するだけ。以下で30秒間Firebaseが用意するCDNに実行結果がキャッシュされます。publicのつけ忘れにご注意を。 res .set("Cache-Control", "public, max-age=30") .send("キャッシュされるよ"); 最初これを知らずにCDNを別途用意して、Firebase側をオリジンに設定しようとしていましたｗ 危ない危ないｗ サンプル 実行例 コード Cache-Controlヘッダ public max-ageとs-maxage 注意点 GET/HEAD以外はキャ

Node.jsでは、ファイルにデータを書き込む様々な方法が用意されています。今回はよく使われる方法についてまとめてみます。 非同期 書き込み (fs.writeFile) バイナリ モードを指定 追加書き込み (fs.appendFile) 指定した場所に書き込む (fs.write) 複数回に分けて書き込む (Stream) モードを指定 文字コードを指定 バッファリング 同期 Syncシリーズ 書き込み (fs.writeFileSync) 追加書き込み (fs.appendFileSync) 複数回に分けて書き込み(fs.writeSync) Promise 書き込み (fs.writeFile) 追加書き込み (fs.appendFile) その他 ファイルを開く際のモード一覧 読み取りモード 書き込みモード 追加書き込みモード 関連ページ 参考ページ 非同期 書き込み (fs.w

Node.jsでは、ファイルからデータを読み込むだけでも様々なアプローチが用意されています。 今回はよく使われる方法についてまとめてみます。 非同期 一括で取得 (fs.readFile) 指定バイト分を取得 (fs.read) 複数回に分けて取得 (Stream1) 複数回に分けて取得 (Stream2) 1行ずつ取得 (readline) 同期 Callback版 Promise版 指定バイト分を取得 (fs.readSync) 複数回に分けて取得 (fs.readSync) 1行ずつ取得 (readline) 関連ページ 参考ページ 非同期 JavaScriptと言えば非同期処理ですね。 Node.jsはシングルスレッド/シングルプロセスが原則ですので、例えばWebサーバとして稼働させている場合、ファイルの読み書きを同期的に長時間行うと後続の処理がどんどん溜まっていきまともにサービス

ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。 今回はこのWebStorageの基本的な利用方法についてまとめます。 WebStorageとは 2種類の保存方法 保存時の制限 容量 名前空間 データ型 ブラウザ毎の制限 WebStorageの利用方法 データを保存する 文字列以外を保存する データを取得する データを削除する 全てのデータを削除する キーの一覧を取得する キーが存在するか確認する WebStorageが利用可能か判定する WebStorageカウンター サンプル ソースコード index.html app.js デベロッパーツールで確認する 参考ページ WebStorageとは 簡

JavaScriptがブラウザ内にデータを保存する場合、ちょっとした物であればWebStorageが簡単に使えて便利なのですが、この子は5〜10Mbyte程度の容量しかありません。また純粋なKVSであるがためにそれ以上のことはもちろんできません。 そんな時に利用するのがIndexedDB。WebStorageと比べ非常に大容量で、RDBで言うインデックスやテーブルなど様々な機能が搭載されています。今回はIndexedDBのお話……をしようかと思ったのですが、直接IndexedDBを触るコードは書いていて正直ダルいので、便利ライブラリを通して触ることにしますw IndexedDBとは WebStorageとの比較 ライブラリ比較 Dexie.jsからIndexedDBをさわる HTMLの準備 データベースを準備する シンプルなCRUD データを挿入/更新する データを取得する データを削除す

特にがっつり遊ぶタイプのスマホゲームでは、端末を横にして遊ぶことが多いと思います。電車内などで立ちながら利用されることの多いニュース系のアプリやコンテンツは大抵の場合横向きですよね。今回はスマホの向きを検知し、見た目を変化する方法についてメモします。 スマホの回転検知 サンプル ソースコード 解説 端末の回転イベント 端末が横向きか縦向きか判定 フォントサイズを固定する 参考ページ スマホの回転検知 サンプル 以下のページから実際のサンプルを実行できます。iOSやAndroidが動作するスマホか、PC上で動作するシミュレーターなどでお試しください。 miku3.net 端末を回転させると向きによって背景色が変化します。 横向きの場合は「青」 縦向きの場合は「橙(ダイダイ)」 合わせて以下の情報も回転される度に更新されます 端末の角度 解像度(width x height) ソースコード <