- 1. Figmaプラグインで日本語テキストを英語に翻訳
- 2. sweet alert
- 3. 五億年ぶりに JavaScript を書いてみたら Observable や Promise や async, await のことが何もわからなくなっていたので次の五億年後に忘れてても思い出せるようにここに記す
- 4. Fabric.jsでCanvasのピンチイン ピンチアウトで苦労したのでまとめる
- 5. 【JavaScript】配列でよく使用する関数まとめ
- 6. useStateとuseReducerの関係（どっちが強力？同じ？わずかな違い？決定的な違い？）
- 7. AIによる中耳炎画像認識LINE Botの作成
- 8. NestJSで始めるGraphQLサーバ開発（コードファースト編）
- 9. 【React Native】ScrollViewでスライドビューワ擬きを作ろう
- 10. 「ユーチューブ自動いいね」のChrome拡張機能を作成中
- 11. Slack の Home タブを使って君だけのオリジナルの New Relic ダッシュボードを作ろう！
- 12. Javascript コールバック関数の理解に関する備忘録
- 13. jscodeshiftのテストを書く
- 14. 正規表現を理解してみる
- 15. Figmaプラグイン開発のデバッグ方法
- 16. 【自分用メモ】supertestとpassport-stubをmochaテストに組み合わせる
- 17. JavaScriptの基本箇所についての復習：寄り道（変数var）
- 18. メモ
- 19. Three.jsで遊んでみよう
- 20. Expoで作成したアプリをGoogle Playに申請するまで（2019/11~12時点）
Figmaプラグインで日本語テキストを英語に翻訳
# はじめに
こちらは[FigmaプラグインAdvent Calendar 2019](https://qiita.com/advent-calendar/2019/figma-plugin)の4日目の記事です。Figmaプラグイン開発のチュートリアルとして、Figma上の日本語テキストを英語に翻訳する機能を作りました！
ほとんどは、AWSのtranslate APIが頑張ってるのですが、SDKの使い方も含め書ければと思います！
# 作ったもの
選択したテキストが自動で英語に変換されます。
before
「カカロット。お前がナンバーワンだ。」after
「Kakarot. You’re the number one.」# 作り方
## 処理の流れ
１、選択されたテキストをui.htmlに
sweet alert
laravelの開発でsweet alertを使ったので忘れないように記述。
“`
| updateProfile(e){
|
| let file = e.target.files[0];
| let reader = new FileReader();|
| let limit = 1024 * 1024 * 2;
| if(file[‘size’] > limit){
| swal({
| type: ‘error’,
| title: ‘Oops…’,
| text: ‘You are uploading a large file’,
| })
| return f
五億年ぶりに JavaScript を書いてみたら Observable や Promise や async, await のことが何もわからなくなっていたので次の五億年後に忘れてても思い出せるようにここに記す
# Observable とは
* Observer パターンの Subject
* subscriber へ値を publish する処理が本体で、subscriber が subscribe すると処理が実行される
* サーバーにリクエストを出して受け取ったレスポンスを publish する処理を Observable で実装し、レスポンスを扱う処理を subscriber で実装したりする“`js
// Observable の作成
const observable = new Observable(subscriber => {
// subscriber に値 1 を publish する
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
// subscriber に処理の終了を通知する
subscriber.complete();
}, 1000);
});conso
Fabric.jsでCanvasのピンチイン ピンチアウトで苦労したのでまとめる
福岡から世界中の”むずかしい”を簡単にする株式会社[diffeasy](https://diffeasy.com)CTOの西[@_takeshi_24](https://twitter.com/_takeshi_24)です。
この記事はアドベントカレンダー「[diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/diffeasy24)」の4日目の記事です。
#Nuxt.jsとFabric.jsでCanvasお絵かき
ある開発プロジェクトで、Webアプリケーション内で画像にお絵かきして保存する処理が必要になりました。
利用する端末はiPadで、Safariブラウザを使って、タッチペンで書き込みます。タッチペンでの記入のほか、画像には細かい文字もあり、ピンチイン・ピンチアウトによるズーム機能も必要です。
前提として、フロントエンドはNuxt.js & TypeScriptで開発しています。
これを素のCanvasで一から開発していくとかなり大変なので、
【JavaScript】配列でよく使用する関数まとめ
# 概要
JavaScriptを使用して開発をしている際に、配列でよく使用する関数を項目ごとにまとめました。
各例のトップレベルで下記のコードが定義されている事を前提とします。“`javascript
var arr = [1, 2, 3, 4, 5];
“`# 要素の追加・削除
## pop()/push()
`pop()`: 配列の最後の要素を削除し、その要素を返します。
`push()`: 配列の最後に要素を追加し、新しい配列の要素数を返します。“`javascript
arr.push(6);
console.log(arr); //=> [1, 2, 3, 4, 5, 6]arr.pop(6);
console.log(arr); //=> [1, 2, 3, 4, 5]
“`## shift()/unshift()
`shift()`: 配列の先頭の要素を削除し、その要素を返します。
`unshift()`: 配列の先頭に要素を追加し、新しい配列の要素数を返します。“`javascript
arr.unshift(0);
cons
useStateとuseReducerの関係（どっちが強力？同じ？わずかな違い？決定的な違い？）
## はじめに
React HooksのuseStateとuseReducerに関する小ネタです。
## useStateはuseReducerで実装されている
内部実装ではuseStateはuseReducerで実装されていると、どこかに書いてありました。[こちらのブログ記事](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)にuserlandでの実装例が載っています。
“`javascript
const stateReducer = (prevState, newState) =>
typeof newState === ‘function’ ? newState(prevState) : newState;const stateInitializer = initialValue =>
typeof initialValue === ‘function’ ? initialValue() : initialValue;const useState = initi
AIによる中耳炎画像認識LINE Botの作成
##概要
プログラムの勉強を始めて5か月ほどの開業医です。
前回、Microsoft Custom Vision Service を使用して鼓膜画像認識を試し、極めて高い診断精度でした。
[Microsoft Custom Vision Service を使用した鼓膜画像認識](https://qiita.com/doikatsuyuki/items/bbed5e902577d68fb8a9)前回は「正常鼓膜」か、「急性中耳炎」か、「滲出性中耳炎」かを分けるためのタグだけでしたが、今回は急性中耳炎の重症度を判定できるようにするため「鼓膜の発赤の程度」、「鼓膜の腫脹の程度」、「耳漏の有無」に関するタグに追加しました。
さらに、LINE Botと連携しNowでデプロイしました。
##実装
スマホから鼓膜の写真をLINE Bot宛てに送ると、中耳炎かどうか応えてくれるLINE Bot。
##概念図
NestJSは、TypeScriptで記述するバックエンドアプリケーションフレームワークです。デフォルトで DI(Dependency Injection) の仕組みをサポートしており、テスト可能な構成を簡単に作ることができる特徴があります。
今回の記事ではNestJSを使用して最もシンプルなGraphQLサーバを構築します。
↓完成イメージ
# GraphQLの基本
GraphQLは、RESTエンドポイントのように煩雑に管理されたエンドポイントではなく、１つのエンドポイントに対して厳
【React Native】ScrollViewでスライドビューワ擬きを作ろう
初投稿です。React Nativeでスライドビューワ的なものを作りました。よかったら見ていってください。
# 対象読者
この記事は最近React Nativeを使い始めた人向けの記事になります。私もその一人です。
React NativeのScrollViewの挙動に躓いた方のお役に立てればと思います。# 作ったもの
スワイプで次のスライドや前のスライドに移動するというもの。React nativeでスライドビュー的なものを作りました pic.twitter.com/nEW9XWtwjD
— けこ (@kekouhei) December 3, 2019
「ユーチューブ自動いいね」のChrome拡張機能を作成中
ふと拡張機能を作ってみたくなり、javascriptの勉強中。
ユーチュブの自分の投稿動画ページにて10個ほど「いいね」するシンプルなモノを作ろうとしてみる。
“`manifesto.json
{
“name”: “Youtube Auto Favo Count”,
“version”: “1.0.0”,
“manifest_version”: 2,
“description”: “”,
“content_scripts”: [{
“matches”: [“http://www.youtube.com/*”, “https://www.youtube.com/*”],
“js”: [“lib/jquery.min.js”, “lib/jquery.easing.js”, “js/content.js”]
}]
}
“`“`content.js
alert(‘Youtube Auto Favo’)
document.querySelectorAll(‘#like-button’).forEach((v,i)=>{if(i<10)v.c
Slack の Home タブを使って君だけのオリジナルの New Relic ダッシュボードを作ろう！
# はじめに
・・というわけで、[DeAGOSTINI（デアゴスティーニ）](https://deagostini.jp/)風のタイトルを付けてみましたが、これは [New Relic Advent Calendar 2019](https://qiita.com/advent-calendar/2019/newrelic) の 4 日目の記事です。
この記事では「**New Relic のエージェント、REST API / Insights Query API あたりと Slack の新しい UI 機能を組み合わせて、ちょっと楽しいことができるよ！**」ということをお伝えします。
# Slack 使っていますか？ :wave:
New Relic を利用されている開発者の方の中でコミュニケーションや情報の共有は [Slack](https://slack.com/) を利用しているという方も多いのではないでしょうか？事実、先日 Slack の東京オフィスを会場提供して開催した [New Relic さんのミートアップ](https://newrelic.co.jp/even
Javascript コールバック関数の理解に関する備忘録
#Javascript コールバック関数の理解に関する備忘録
##コールバック関数、意味がさっぱりわからなかった
ProgateのJavascript編を学習していて、オブジェクト、クラスあたりから理解が怪しくなりコールバック関数のところ （JavascriptⅥ,Ⅶ）でついに意味が全くわからなくなった。いくつか解説記事を読んで、コードを眺めていたら理解できた気がしたので、備忘録をQiitaでの初投稿も兼ねて書いておく。
今後、初学者のうちから積極的にメモとしてQiitaに投稿していきたい。
▼Progate Javascript Ⅶ.1より
“`Javascript
const printWanko = () => {
console.log(“にんじゃわんこ”);
};const printHitsuji = () => {
console.log(“ひつじ仙人”);
};const call = (callback) => {
console.log(“コールバック関数を呼び出します。”);
callback();
};// 引数をpr
jscodeshiftのテストを書く
（用意していた記事が壮大になってきて、本日中に書き終わらないと思ったので、急遽極小ネタに切り替えました。）
前日、同僚の[@toshi__toma](https://twitter.com/toshi__toma)がjscodeshiftについて投稿しているのですが、TDD的にAST変換を書けるのがjscodeshiftの強みの一つかなと思ったので、jscodeshiftのテストについて書きます。[@toshi__toma](https://twitter.com/toshi__toma)の記事↓と合わせて読んでいただけると、ちょうどよいかな〜と思います。
[JavaScriptのリファクタリングツール「jscodeshift」の使い方 – Qiita](https://qiita.com/toshi-toma/items/93f1dfdf0a820fe6fccc#transform-file)
## 準備
jscodeshiftとjestをインストールします。
“`cli
$ npm i -D jscodeshift jest
“`何も変換しない`transform
正規表現を理解してみる
# はじめに
これは、[静岡 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/shizuoka)の3日目の記事となります。今年は勉強会には2019/1/26(土)に「DevLOVE静岡」しか参加していないので勉強会のことは書きにくい。
一応、Qiitaは技術系ブログなので静岡にまつわる(名産品や地名など)なら何でもいいかなと、ネタとして2012年に静岡Developers勉強会で「[JavaScriptの正規表現](https://www.slideshare.net/yaju88/javascript-14525756)」のセッションを引っ張り出して、これをQiita用に書き直してみました。# 正規表現
正規表現ってなに？
正規表現とは、簡単に言えば 検索や置換をより便利にするものです。
例えば文章中に 「りんご」 と 「みかん」 を検索したいとき、別々に検索するのは手間だし面倒です。
正規表現で検索に使うキーワードを以下のように書くと“`
りんご|みかん
“`「りんご」と「みかん」を同時
Figmaプラグイン開発のデバッグ方法
# はじめに
こちらは[FigmaプラグインAdvent Calendar 2019](https://qiita.com/advent-calendar/2019/figma-plugin)の3日目の記事です。Figmaプラグイン開発を始める上で、使えると便利なデバッグの方法をご紹介します。
基本的には以下に載っている方法の紹介です。
https://www.figma.com/plugin-docs/debugging/## デバッグ方法
早速デバッグ方法を紹介していきます。
### 1. コンソール出力
実際の開発でとりあえずコンソールに値を出力してみる、ということがあると思います。Figmaプラグインでも同様のことを行うことができます。今回は1日目の[figmaプラグイン開発の準備](https://qiita.com/tatsuyafukui/items/b8b01218e9ef1020aacb)の内容を使ってコンソール出力を利用してみましょう。
#### step1. console.logをコードに書き込む
出力させたい箇所でconsole.logを書きま
【自分用メモ】supertestとpassport-stubをmochaテストに組み合わせる
##supertestとは
supertestはmochaと組み合わせて使うのですが、ExpressのRouterモジュールのテストを行うことができます。
例えば以下の例では、`/`にアクセスしたらindexRouterが処理されるかテストしてくれます。
もちろん、`/login`も`/logout`もテストしてくれます。“`JS:app.js
app.use(‘/’, indexRouter);
app.use(‘/login’, loginRouter);
app.use(‘/logout’, logoutRouter);
“`##passport-stubとは
passport-stubは、passportモジュールを利用した認証システムを、テストする際に役に立ちます。
例えば、
「facebook認証などのテストをしたいけど、facebookアカウントを持っていない！」
といった時に役に立ちます。##テストの例
“`JS:test.js
//supertestの読み込み
const request = require(‘supertest’);
//supe
JavaScriptの基本箇所についての復習：寄り道（変数var）
#はじめに
JSの変数宣言には3つの方法があります。
`var`,`let`,`const`です。
これから3回にわたって、この3つの違いについて解説したいと思います。
最初は`var`です。
#実行
`var`は昔からある書き方のようで、***宣言した関数の中でしか使えない変数***です。
次の関数を実行すると、意味がわかると思います。“`javascript
var name = “suzuki”;function Say() {
var name = “satou”;
console.log(name);
}Say();
console.log(name);
“`
まず`name`に`suzuki`を代入し、その次に`Say`関数を定義します。
`Say`関数では、最初に`name`に`satou`を代入し、`console.log`で出力する、という処理を行います。
関数を定義した後は、`Say`を実行し、最後に`name`の中身を`console.log`で出力します。この一連の処理を行うと、どういう風に出力されるでしょうか？
まず一番
メモ
#ストロングパラメータ
指定したキーのみを受け取るので、データをDBに入れるかどうかを判別させるために使う。
ex params.permit(:キー名,キーの値）#java script
list.push(***); 配列に要素を追加する。
list.pop(); 配列の最後の要素削除
⇅ 逆の関係
list.shift(); 配列の最初の要素削除オブジェクトの作成
let object = {};関数を使うとき
returnを記述する。
returnは関数内で処理をした結果戻り値として返す。関数とは
入力された 値に対して 出力して 返すこと引数 → 関数 → 戻り値
function calc(num1,num2){
return num1*num2;
}let num1 = 5;
let num2 = 7;
console.log(calc(num1,num2));DOM (document object model)
htmlを階層上に表現したデータでjava script
body ———header
Three.jsで遊んでみよう
「GLSLの記事書いておいて、今さらWebGLのライブラリかよ！」というツッコミは置いておいて
実はオライリーのThree.jsの参考書を読んでいる最中なのです。
（第2版の内容はr78ですが、ここではr107で進めていきます。）これからThree.jsを触ってみようという方向けに
流動食のように咀嚼しやすく飲み込みやすく書いていこうと思います。## Three.jsとは？
WebGLをイチから書くのは、とんでもなく大変なのです………。
「じゃあ、WebGLを簡単に書けるようにしようじゃなイカ！」
そうして生まれたJavaScriptのライブラリです。WebGLのライブラリは他にもありますが、代表的なものだと
2Dは[PixiJS](https://www.pixijs.com/)、3Dは[Three.js](https://threejs.org/)
といったところでしょうか？## そもそもWebGLとは？
すっごく簡単に言うと
> インターネットブラウザをプレイステーションにしてしまう魔法の技術
（引用元：http://wise9.jp/archives/606
Expoで作成したアプリをGoogle Playに申請するまで（2019/11~12時点）
[App Store版の記事](https://qiita.com/mildsummer/items/e98b1b8e4ea7f72b9899)と同様に、Expoで作成した最低限のアプリをGoogle Playに申請する流れに関してまとめます。
今回私が作成し申請したアプリは[こちら](https://play.google.com/store/apps/details?id=qr.attendance.manager.nodokayamamoto.com)のFirebaseとカメラを使用したアプリです。
# Google Play Developper登録
Google Playにアプリを公開するには、GoogleアカウントとGoogle Play Developerとしての登録が必要です。
Google Play Developer
https://developer.android.com/distribute/consoleこちらの「ログイン」ボタンから新規登録して支払い情報を入力してください。
App Storeと違う点は年額ではなく最初に$25かかるだけであると
