投稿

1月 27, 2019の投稿を表示しています

Sushi Browser - Electron製の開発者向きなWebブラウザ MOONGIFT

イメージ
Sushi Browser - Electron製の開発者向きなWebブラウザ MOONGIFT : Sushi Browser - Electron製の開発者向きなWebブラウザ MOONGIFT 開発をしていて、一つのウィンドウを複数ペインに分けてコーディングすることはよくあります。同様にWebブラウジングしている時に、複数サイトを並べたいと思うこともあるでしょう。その場合、Webブラウザではウィンドウを分けなければなりません。 そこで使ってみたいのがSushi Browserです。マルチペインに対応したWeb...

MTG アリーナのEXPORTしたデッキを日本語に変換するスクリプト

MTG アリーナのEXPORTしたデッキを日本語に変換するスクリプト : MTG Arenaのデッキをブログに貼り付けようとすると、プレイ中は絵で判別するし会話は日本語名でするので英語名だけ出されても自分でも読めない。 そこでアリーナからエクスポートしたテキストを貼り付ければ日本語のカード名に変換する処理を MTG Developers を使い作ろうと思いましたが、カードを一回で特定できないため断念中。 APIはOR検索ができるので、当初はカード名を全て取り出して渡せば一回の通信で済むと考えていました。 しかし、カード名での検索では、再録がそれぞれ1件となりページサイズを圧迫します。 基本土地だけで100件中のほとんどを使ってしまうのでよろしくない。 セット名まで指定した検索条件のグループ化までできればよかったのですが、そこまではできなさそう。 一応、APIにはカードごとに一意に割り当てられるハッシュがあるのですが、 id A unique id for this card. It is made up by doing an SHA1 hash of setCode + cardName + cardImageName cardImageNameが何を指すのか不明で使えず。そもそもエクスポート内に情報なし。 よって、カード一枚につき名前とセット名で一回一回通信する方法にしようとしましたが、 時折CORS要求に失敗したり、並列のためか数回実行するとCloudflareに弾かれたりと微妙。 そもそも待ち時間が気持ちよくない範囲になったので、素直に諦めてデッキビルダーを使ったほうがいいかなあという具合になりました。 処理時間が許容できてもエラーやセット名の違い等が今後も出そうで継続性がなさそうでした。 カード資産が集まれば4積みが増えてリクエスト数が減るのですが、初期無課金のレアをちょっとずつ積む構成やハイランダー、バベルなどに対して安定して処理を成功させることを考えると満足いく出来は難しいのかなと考えています。 コード エラーがでなければちゃんと動く作りにはなっているので、遅くても良い場合はもうちょっと頑張ってGithub Pagesにでも投げるかもしれません。 <!DOCTYPE html> <

AtomでESLintとPrettierをAirbnbルールで使う

イメージ
AtomでESLintとPrettierをAirbnbルールで使う : はじめに この記事では、 エディタAtom を使って JavaScript のコードを書くときに、 Airbnbのルールで構文エラー解析と自動フォーマット する方法を ザックリ とまとめています。 細かい説明はせず、私のような初心者を対象に、 「ESLintって何?」 というところから説明します。 なお私は 詳しいことは理解できていなくて 、今後同様の設定をするときに困らないようにするためのメモなので、間違いなど多々あるかもしれません。 その時はご指摘いただけると大変助かります! なお、ここでは Atom を使っていますが、 VSCode でも同様のことができるようです。 主に「プロジェクトにパッケージをインストール」する箇所と「エディタのプラグインパッケージをインストールする」箇所に分かれるので、後者をVSCodeの方で実行してもらえれば良いかもしれません(試していないですが、プロジェクト内では私以外はVSCodeでした)。 また、私はReact Nativeプロジェクトのためにこれらを使っていますが、JavaScriptならなんでも適用できると思います。 要約 話の流れの要約は以下です。 ESLint で構文エラーを見つけられるようにする エラーの基準として Airbnb の基準を採用する(なんか皆がオススメって言うので) エラーを一個一個手直しするのが面倒なので、 Prettier を使ってオートフォーマットしてくれるようにする まずESLintって何 ESLint はザックリ言うと、 JavaScriptの構文解析ツール の1つです。 他にもあるらしいですが、これがよく使われているようです。 こいつがあると、コードを書いたときに、 「ここが間違ってるぞ!!」と指摘 してくれます。 例えば、 「シングルクオートを使うべきところでダブルクオートを使ってるぞ!」 「ここのスペースは余計だぞ!ここにスペース必要だぞ!」 「ここはアロー関数を使え!」 などです。 こうした 構文ルールをgitで管理してチームで共有 することで、 プロジェクト全体で構文の秩序を保つ ことができます。 なお、 「何をもってして間違いとするかの基準」 は自分

AWS Lambda Goで画像アップローダを作る

AWS Lambda Goで画像アップローダを作る : AWS Serverless Uploader https://aws-serverless-uploader.netlify.com/ フロントエンド React Netlify ReactプロジェクトをNetlifyにデプロイ。 CSSフレームワークはBulma。 API通信はAxiosを使用。 バックエンド AWS Lambda Go API Gateway S3 DynamoDB SAM CLI Serverless frameworkかSAM CLIかは好きな方で良さそう。 自分的にはAWS謹製という点に惹かれてSAM CLIを選定。 sam init --runtime go でプロジェクトの雛形をバッと作ってくれてすぐにデプロイできるのと、AWS上の構成をコード管理できる(=infrastructure as code)ので重宝した。 GoでS3 aws-sdk-goを使用。 package main import ( "bytes" "github.com/aws/aws-sdk-go/aws" "github.com/aws/aws-sdk-go/aws/session" "github.com/aws/aws-sdk-go/service/s3" ) func s3Put(img []byte) error { svc := s3.New(session.New(), &aws.Config{ Region: aws.String("ap-northeast-1"), }) if _, err := svc.PutObject(&s3.PutObjectInput{ Bucket: aws.String("バケット名"), ACL: aws.String("private"),

Google Apps Scriptで対数近似を計算するスクリプトを作った

イメージ
Google Apps Scriptで対数近似を計算するスクリプトを作った : やりたいこと Googleスプレッドシートでは入力した数値からグラフを作成し、グラフを近似する曲線と方程式を描画できる。 しかし、この方程式は テキストとしてコピーできない。 (2019/1/25時点の筆者調べ。) 不便なのでGASを使って、セルの数値からグラフを対数近似する関数を計算し、表示されている方程式と同じものをテキストとしてセルに出力するコードを書いた。 問題設定 こんな感じになっているとする。 xの列はグラフの横軸、yの列はグラフの縦軸に対応する。 入力xとそれに対する出力yの組が5個あるというデータ。 このデータの関係を表現する式を導出したい。 (右のグラフにはすでにgoogleが計算してくれた式が出ている。これをテキストで欲しい。) ちなみに、xの最小値が1になっているのは、今回作成したコードではxに0が来るとlog(0)を計算し、結果がNanになるため。まだ対策できていない。 (今年初めまでのSpread Sheetではgoogleの計算も0を回避していた(データ点そのものが無視された)記憶があるんだけど、今は普通に計算されている。↓の画像参照。) xに0を入力した場合。googleは計算でき、結果が上の画像と違う。今の筆者のコードではできない。 解き方 1. 最小二乗法を使う この ベストアンサー をコードに起こした。 リンク先の説明を拝借しながら説明すると、 $y=a\ln x+b$ が当てはめるべき式。 $X=\ln x$として、 $y_1, X_1$ $y_2, X_2$ $\vdots$ $y_n, X_n$ の値の組を得る。つまりこれらの組はそれぞれ、 $y_1=aX_1+b$ $y_2=aX_2+b$ $\vdots$ $y_n=aX_n+b$ という関係。 最小二乗の原理から E=\sum_{i=1}^{n} ( aX_i+b-y_i )^2 \tag{1} を最小にするa, bを求めればよいので、 $(1)$をaで偏微分して0とおき \begin{align} \frac{\partial E}{\partial a}=\sum_

AWSアカウントのMFAは端末に登録されている

AWSアカウントのMFAは端末に登録されている : AWSアカウントのMFAは、格安SIMに変えて、電話番号が変わっても大丈夫。 MFA(Multi-Factor Authentication)とは 多要素認証。IDとパスワードだけでの認証ではなく、別の端末(電話番号やスマホアプリなど)を使って認証する方式。 万が一情報流出等によってアカウントが乗っ取られた際、高額請求などの危険性があるため、AWSアカウントを作ったらすぐ設定すべきとよく言われている。 この記事で伝えたいこと 私はAWSのMFAにGoogleAuthenticatorを使っている。 この認証情報はアプリに登録されているので、電話番号が変わっても、(スマホが変わらなければ)大丈夫。 経緯 そもそもなんでそんなことを(しかも記事投稿に使っていなかったQiitaで)書こうと思ったかという経緯を軽く説明したい。 昨年末、きっかけがあって格安SIMに変更した。 MNPを利用して電話番号を持って移動すると手数料3240円がかかってしまうこと、番号に特に執着がなかったため、新規でSIM変更。 使っている 機種(iPhone)はそのまま で。 流れでわりと突然の変更だったため、電話番号変更による影響は整理しないまま手続きをした。 AWSについては、駆け出しのエンジニアとしては最低限履修しておくべきと思ったため、以前、アカウントを作成していろいろ遊んでいた。が、しばらく放置していたので忘れていた。 ついさっきふと、CloudFrontにhtmlファイルを置きっぱなしだったことを思い出し、ログインを試みた。 IDとパスワードの後、MFAの認証コードを入力したところ、認証エラーになった。 パスワード入力後、MFAの画面に推移しているので、MFAの問題と思い、そこで青ざめた。 電話番号が変わったのが原因ではないかと思ったのだ。 いろいろ調べたが、AWSのMFA関連のQAには、デバイスの故障紛失による端末変更の際の対応が書かれていたものの、 電話番号の変更 については記載がなかったので、カスタマーサポートに問い合わせをしようと思ったが、MFA関連は 英語の電話 がかかってきて云々とあり、ためらった。 IAMユーザのMFAで、キーなどがテキストとしてPC内にあった

AWSでDjangoのWEBサーバーを作る(Amazon Linux 2、HTTPS化)

イメージ
AWSでDjangoのWEBサーバーを作る(Amazon Linux 2、HTTPS化) : Djangoのウェブサーバーを作ります。ハッカソンとかで良く使うのでメモです。 インスタンスの作成 EC2のダッシュボードを開き、インスタンスを作成します。 イメージは Amazon Linux 2 AMI (HVM), SSD Volume Type - ami-0d7ed3ddb85b521a6 を選択しました。 インスタンスタイプは t2.micro です。 セキュリティグループの設定で、 SSH(22) 、 HTTP(80) 、 HTTPS(443) 、 TCP(8000) 用のポートを開放します。 キーペアを任意の名前で作成し、できた .pem ファイルをPuTTY genで .ppk ファイルに変換します。 インスタンスの作成が完了したら、Elastic IPを開き、新しいアドレスを割り当てます。作成したインスタンスにそのIPアドレスを関連付けます。 ドメインを取得 Route53でdomainを作ってください。 www.{name}.com のValueのところにElastic IPを設定します。 チュートリアル: Amazon Linux 2 に LAMP ウェブサーバーをインストールする PuTTYでパブリックIPもしくは、DNS名(www.{name}.com)でSSH接続します。ここで.ppkファイルを使います。ユーザー名は ec2-user です。 sudo yum update -y sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2 php7.2 sudo yum install -y httpd mariadb-server sudo systemctl start httpd sudo systemctl enable httpd sudo systemctl is-enabled httpd Test Pageを表示( http://www.{name}.com )します。 sudo usermod -a -G apache ec2-user exit もう一回ログインします。 groups sudo c

ElectronでFileのOpenとSave

イメージ
ElectronでFileのOpenとSave : Electronでファイル操作する必要があったのでOpenとSaveの方法をメモ。 dialogの制御方法が知りたいのが主目的なので、ロジックはなし。 csvを読み込み表示。そのままsaveする。 仕様 下記のような感じ。 openボタンを押すとファイオープンし、textareaに表示。 saveでtextarea内の内容をfileにSave。 textarea内を変更しても内容はファイルには反映されない。それをやるにはVueとかReact使う。 実装 package.json エンドポイントはmain.jsとしました。 package.json { "name": "openclose", "version": "1.0.0", "description": "sample", "main": "main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "^4.0.2" } } main.js ElectronのQuick Startのmain.jsとほぼ一緒。 起動時の表示としてindex.htmlを呼び出している。 main.js const { app, BrowserWindow } = require('electron') let win function createWindow() { //ウインドウの作成 win = new BrowserWindow({ width: 800, height: 400 }) //ウインドウに表示する内容 win.loadFile('index.html') //デバ

【AWS入門】料金アラート〜AWS料金の見積もり day1-2

イメージ
【AWS入門】料金アラート〜AWS料金の見積もり day1-2 : UdemyのAWSコースの学習ログです。 Udemy コース 手を動かしながら2週間で学ぶ AWS 基本から応用まで https://www.udemy.com/share/100taiB0EfeFtSRnQ=/ 講座の動画を見ながら、料金アラート〜AWS料金の見積もりを学習した。 料金アラート AWSで発生した料金が指定額まで達した時に、メールで教えてくれる CloudWatchで設定する AWSの利用料金が〜$を超えたら通知するよう設定できる 「請求アラートを受け取る」設定する CloudWatchで料金アラートを設定する手順 請求ダッシュボード>設定 請求アラートを受け取る をチェックON CloudWatch>請求>アラームの作成 今月の AWS の合計料金がの欄 超過:とりあえず5を入力 通知の送信先:メールアドレスを入力 入力したメールアドレスに確認メールが送信されるので、リンクをクリック AWS側でメールが確認されるので[確認]をクリック CloudWatchのメニュー>アラームがOKになればよい AWS料金の見積もり方について 2種類ある AWS公式>AWS サービス名 pricingで検索する方法 Simple Monthly Calculatorを利用(簡易計算機) AWS公式>AWS サービス名 pricingで検索する方法 例えばEC2の料金 https://aws.amazon.com/jp/ec2/pricing/ オンデマンドインスタンスの料金を確認する » リージョン:アジアパシフィック(東京) 表のLinux/UNIX の料金を見る t3.nanoの月の料金を計算すると 0.0068*24*31=$5.0592 (料金 時間 日) t3.nanoは月$5.059、という見積もりができる Simple Monthly Calculator https://calculator.s3.amazonaws.com/index.html リージョンの指定を忘れずに 無料枠の計算の有無を指定できる

AWS移行の際に注意すべき点

AWS移行の際に注意すべき点 : ここ数年AWSのインフラ設計~構築~運用をやってきましたが、これからAWSを導入してみよう、使ってみようと言う方のために、その知見を少し公開 アカウントの開設 AWSのアカウントの開設の際、クレジットカードが必要です。個人はともかく法人利用の際は導入時にそれなりの障壁となりますので、注意が必要です。NTT東日本のリセールを通してアカウントを開設すればクレカが不要らしいですが、このような請求代行がいくつかあるので、それらを利用するのも良いかもしれません。 https://business.ntt-east.co.jp/service/publiccloud/ 利用料金と請求書の確認 AWSは従量課金であるため、使った分だけ請求がきます。テストでちょっとだけ使った仮想サーバを立ち上げっぱなしで放置、退職した社員が作成した今は使ってもいない放置された仮想サーバ、誰がなんのために作ったのかよくわからないインスタンスなどなどを放置していますと、請求料金がガンガン上がっていきます。不要なサーバやデータは削除する、使っていない時は停止するなどまめなリソース管理が必要です。 AWSで使えないアドレス 一般的に端末に割り振りできないネットワークアドレスとブロードキャストアドレス以外にAWSではネットワークアドレスに 1~3 を足した次の3つのIPアドレスが予約アドレスとして使えません。 事例(数値はサンプルで、他のネットワークアドレスでも同等です) アドレス 説明 10.0.0.0/24 ネットワークアドレス 一般的に使用できない 10.0.0.1/24 仮想ルータ AWSでは使用できない 10.0.0.2/24 DNSリゾルバ AWSでは使用できない 10.0.0.3/24 AWS予約 AWSでは使用できない 10.0.0.255/24 ブロードキャストアドレス 一般的に使用できない Zone Apex が使えない事例 Zone Apexとは、 tanuki.com などサブドメイン抜きのドメイン名そのものをさしますが、よくウェブサーバでホスト名を付けない短いURLで運用されているのを見かけるかと思います。 名前 説明

freecodecampのWrite Higher Order Arrow Functionsを解いたメモ

freecodecampのWrite Higher Order Arrow Functionsを解いたメモ :  実際の問題へのリンク https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions  問題概要 与えられた配列から正の整数を取り出し、取り出された正の整数で自乗された(squared)配列を新たに作成する。  自分の回答 javascript const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]; const squareList = (arr) => { "use strict"; // change code below this line const squaredIntegers = arr.filter((num) => num > 0 && Number.isInteger(num) ).map(filteredNum => filteredNum ** 2); // change code above this line return squaredIntegers; }; // test your code const squaredIntegers = squareList(realNumberArray); console.log(squaredIntegers);  解説 引数arrが与えられた配列で、まずこの配列からfilter()を使用し正の整数を取り出す。 numに配列の各値が入る。このときnumの変数名は自由につけてOK。 Number.isInteger(値) で整数を取り出す。 整数には負の数も含まれるため 値 > 0 で正の整数に絞り込む。 javascript const squaredIntegers = arr.filter((num) => num > 0 && Number.isInteger

僕はArrow functionが読めない

僕はArrow functionが読めない : はじめに RubyからJavascriptに手を広げている時、Rubyに比べてJSはコードが読みにくいと感じた。 特に Arrow function(無名関数) についてはしっくり理解できるまで時間がかかったので、同じ道を通るかもしれない人に向けて記録を残しておこうと思う。 また、関数で頻繁に使用されている、省略記法が基礎が出来ていない状態で障害になっていたと感じる。 対象となる読者 Javascriptを初めたばかりの方 Arrow functionの利点 1. 短く記述出来る function(){...} vs. () => {...} 2. 関数名を記述しなくて良い Arrow functionは  Anonymous である。 Anonymous functions usually don't have a named identifier 1については、メリットが理解しやすいが、2については文章を見ても直ぐにはしっくり来なかった。 2について具体例を出して考えていく。 function blastoff() { console.log("3...2...1..blastoff!"); } blastoff(); 結果 => 3...2...1..blastoff! ここでは関数名に blastoff という固有の名前がつけられている。 次は、1秒後にconsoleの中身が返ってくるように setTimeout()メソッド  を例に考える。 setTimeout(function() { console.log("3...2...1..blastoff!"); }, 1000) 結果 => 3...2...1..blastoff! 上記の例では、 blastoff の名称を用いた関数の呼び出しは行なっていないが問題なく動作する。 Arrow function を用いると以下のように記述出来る。 setTimeout(() => { console.log("3...2...1..blastoff!"); }, 1000

AWS上の踏み台サーバを経由して、対象のインスタンスに接続する。part2

イメージ
AWS上の踏み台サーバを経由して、対象のインスタンスに接続する。part2 : 前のつづき https://qiita.com/nannany/items/50a514fa56255811704e 踏み台サーバから接続するインスタンスの作成準備から始める。 bastion経由で操作したいインスタンス(targetインスタンス)作成 targetインスタンスを入れるVPCを整備 1. targetインスタンス用VPC作成 aws ec2 create-vpc --cidr-block 10.2.0.0/16 aws ec2 create-tags --resources vpc-0ed7b004702d6b31f --tags Key=Name,Value=target_cli 2. targetインスタンス用サブネット作成 aws ec2 create-subnet --vpc-id vpc-0ed7b004702d6b31f --cidr-block 10.2.0.0/24 aws ec2 create-tags --resources subnet-066876581dbfa4f88 --tags Key=Name,Value=target_subnet_cli targetインスタンス作成(キーペアは前作ったものを使いまわす) 1. 秘密鍵(bastion_cli_key)をmy_bastionに転送 scp -i .ssh/bastion_cli_key.pem .ssh/bastion_cli_key.pem ec2-user@52.198.210.184:/home/ec2-user 2. 秘密鍵の権限を400にして、.ssh配下におさめる ssh -i .ssh\bastion_cli_key.pem ec2-user@52.198.210.184 chmod 400 bastion_cli_key.pem mv bastion_cli_key.pem .ssh 3. VPCどうしをピアリング接続し、その接続を承諾する aws ec2 create-vpc-peering-connection --vpc-id vpc-0ed7b004702d6b31f --peer-vpc-id vpc-

typescript-eslintのversion1.x系がリリースされたので使ってみる

イメージ
typescript-eslintのversion1.x系がリリースされたので使ってみる : typescript-eslintのVersion 1.X系がリリースされましたので、サンプルアプリを使って試してみたいと思います。 typescript-eslintについて typescript-eslint は、 @mysticatea さんの 記事 でもあったように、ESLintチームがTypeScriptのサポートする宣言があり、 1月20日にVersion 1.0.0がリリースされました。さらに3日後にはVersion1.1.0がリリースされています。 現在、TypeScriptが利用されているプロジェクトは、TypeScriptの普及により多くなってきたこともあり、後々TSLintからESLintへの移行が必須になるかと思います(しばらくは大丈夫だと思いますが...)。 そこで、今回は、TypeScript + React のサンプルアプリでtypescript-eslintを試してみたいと思います。また、既存のtslint.jsonを利用したサンプルも試してみたいと思います。 ESLintの導入 create-react-app を利用して、任意のサンプルを作ります。 typescript-eslint $ create-react-app typescript-eslint-react-sample --scripts-version=react-scripts-ts サンプルアプリに移動して、以下のパッケージをインストールします。 eslint @typescript-eslint/parser @typescript-eslint/typescript-estree @typescript-eslint/eslint-plugin パッケージインストール typescript-eslint $ yarn add eslint @typescript-eslint/parser @typescript-eslint/typescript-estree @typescript-eslint/eslint-plugin -D ESLintの設定 eslintの必要最低限の設定をしていきます。 .eslintrc