ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

日本にはドン引きするくらい個人情報漏洩してるウェブサイトが多すぎる

題名の通りですが。 謎の誰でもクエリを実行できる管理画面、名前、職業、住所、子供の年齢、電話番号がびっちり書かれた顧客情報リストへのアクセスに一切管理者権限がいらない、 そんなサイトが多すぎると思います。 たいてい古き良きWEBサイト。メンテし…

Gmailの独自ドメインでcontact form7 を利用してwordpressからメール配信をする方法の最新版

一個も正式な方法が日本語文献でヒットしなかったので書いておきます。 まず、プラグイン を入れる。 Gmailを選択。 画像元: https://wpforms.com/wp-content/uploads/2017/12/Choose-Gmail-for-SMTP-mailer.png なぜかOther SMTPを選択させる解答ばかり。…

モーションキャプチャの格安レンタルをやります。

もっと広がれば、楽しくなりそうなものに、モーションキャプチャがあります。 私自身、中高時代運動部だったのですが、モーションキャプチャが利用できれば確実にもっと強くなっていただろうなと思います。 半年に一回、先生が録画して見返すみたいな機会が…

React - production環境でconsole.logなどの出力を消す

このためには、webpackのコンパイル設定を手動で変えられるようにする必要がある。 package.jsonのscriptsに "eject": "react-scripts eject" を追加して、 npm run ejectを走らせる。 これは簡単のためcreate-react-appが隠蔽している、パッケージの依存関…

firebaseでTwitter認証がproductionのみ効かないとき

承認済みドメインという欄を忘れがちなので記録しておきます。 ログインにおいて、それ以外でのハマりピントはほぼない。

firebaseでユーザーが自身のアカウントを削除できるようにする

cloud functionsを利用するのが一番早そうだった。 deleteUserByAdmin というエンドポイントをcloud functionで作って、 それを fire.functions().httpsCallable('deleteUserByAdmin');でクライアントサイドから叩くというコードです。 クライアントサイド f…

github pagesにreact-create-appで作成したReactアプリを独自ドメインでデプロイしたのに表示されないときのチェックポイント

公式リファレンスに沿ってデプロイしたのに表示されない。なぜだろう? 独自ドメインをpackage.jsonの"homepage" 欄に設定していますか? gh-pagesブランチをデプロイブランチに設定していますか? CNAMEファイルに接続したいカスタムドメイン(独自ドメイン…

Webデザイナーさんに伝えるために書いた最速でコーディングに入るためのReact.js初心者向け概論

一緒にやっているWebデザイナーさんに初めてReactアプリのコーディングを頼むときに書いた概論です。 最速でコーディングに入ることを目的としていた文章ですので、 ザックリしすぎる一般化もありますし、深いReact理解/実装を求めるなら公式リファレンスを…

Youtube Video List APIからyoutube動画情報(ビュー数、説明、サムネイル)を取ってくる【javascirpt/node.js】

公式APIにリクエストをしてレスポンスから抽出するだけのシンプルな実装です。 動画のタイトルやサムネイルなど基本情報はitem.snippet、 ビュー数などの情報は item.statisticsに入っています。 partに取得したい情報を明記する必要があります。 まずyoutub…

react-router-v4 でリンクが変わってもスクロールの高さが初期化されない問題を解決する

リンクが変わっているのに、前のページのscrollHeightを引き継いでしまうことがありました。 以下のように、browserHistory.listen()にトリガーさせて、スクロール位置を初期化させるコードを挿入するようにしたら、解決しました。 import { Router, Route, …

processing & p5.jsの直感的な説明ー円の生成からアニメーション、ランダム増殖まで

p5.jshはアーティスト向けビジュアルコーディングツールprocessing(Javaベース)をjavascriptで実行可能にしたものです。jsなのでDOMの操作が可能で、サイトの組み込みが非常に楽なのが特徴です。 導入 動く円を描く 前のフレームの画像が残る場合 文字の描…

コスメ動画を探せる・コスメがすぐ買えるサービスmakeup-tube.comを作りました

いろんなビューティーyoutuberさんを探せる、カテゴリからyoutubeビューティー動画が探せる、動画からコスメがすぐ買える そんなサービスをつくりました。 ビューティーyoutube面白くて為になるのでよく見てるんですけど 探しにくいし、すぐ商品買いにくいな…

サーバーサイドjavascript・canvasでpng画像をリアルタイム描画する仕組み

これは以下の記事のつづきです。 www.daily-dev.net これは https://text2ogp.com から、 もう一つ別に立てた画像生成サーバーにリクエストを送って、返却されたpng画像をプレビュー画像として表示するという仕組みで作っています。 将来的に自分が色々なサ…

テキストからアイキャッチ画像を自動生成するサービスをつくりました

テキストからアイキャッチ画像を生成するサービスを作りました。 text2ogp.com というサービスです。 良かったらブログのサムネイル画像づくりにお使いください。 テキストを入力して、背景色を変えたり、フォントを変えたりして、ワンクリックでダウンロー…

ユーザーが設定したアラート時刻をjavascriptで【世界標準時ミリ秒】に直してリモートサーバーに保存して実行するには

問題 時刻文字列をパースしたときに返ってくる数字とは? 最終的な仕様 スクリプト 問題 アラートアプリを作っていました。 ユーザーは自分のタイムゾーン設定に合わせて時刻を決定できます。 クライアントサイドの時間設定は人それぞれなので、そのまま保存…

iOSのアプリ画面みたいに自分のブログやアカウントを表示できるサービス「Linqs」を作りました

自己紹介がわりに自分のアカウントをまとめて共有できる、大げさじゃない気軽な形がほしくて作りました。 Linqs 作ったきっかけは、firebase for web を使う練習としてなにかやってみたいと思ったことです。 普段から、自分のことをプロフィール上でなんと表…

【3分デプロイ】nodeプロジェクトをデプロイする最速の手段・now【登録から独自ドメインまで】

now とは ミニマルなデザインが素敵なこのサービス Now – Global Serverless Deployments javascriptで開発されたサイトもしくはDockerで構成されたサイトをコマンドラインから簡単にデプロイできる。 それでは早速 $ npm install -g now で入れます。 githu…

firebase cloud functions で爆速でAPIサーバー作ってcron-job.orgで定期実行する

firebase cloud functions HTTP request のここがすごい cronで定期実行 ちなみに cron-job.orgってどうマネタイズしてるの heroku とかだとデフォルトでスケジューラ機能が付いているんですが 2018.9時点でfirebaseには付いていないので、 cron-job.org と…

Node.jsのWebアプリケーションの自動デプロイ【pm2のecosystem】

pm2というプロセスマネージャを使ったら、非常にカンタンにデプロイできたのでメモしておきます pm2はnodeでインストールできる、複数プロセスを管理するコマンドライン。 これを使うとnodeサーバを走らせるデーモンをバックグラウンドでカンタンに作れます…

firebase について最初から知っておきたかった細かいポイント(cloud function, firestore)

firestore: set({params,merge:true})とupdate()のちがい mergeオプションのあるset()は、ドキュメントが存在しなければ作成するし、存在すれば更新する。mergeオプションがないとすべてを上書きする。 updateは、対象ドキュメントが存在しない場合、エラー…

最初にこう説明してよと思った、javascriptのPromise, async/awaitの直感的な説明

わたしの理解力はアレなので、あまりスッと入ってくる直感的な説明がなかった。1ヶ月後の自分に向けて書く。 Promiseの使い所 javascriptで、APIを叩いたり、データベースと接続して、そうやって得た値にまたホニャララして、それを改造した値をさらにホゲホ…

jsのmap と forEachをどう使い分けるといいのか:実行速度、使いドコロ

拡張機能を作ったり、フロントエンドをreactで作ったり、なんか必要だからと、その場しのぎに使ってきた、javascript。 特にわかっていなかったのが、map/forEachの使い分けと、Promiseの使い所などだった。 初歩的で恥ずかしいけど、どうせ忘れるので書いて…

create-react-appでreactプロジェクトを作成しscssを自動反映する+firebase deployするなどの設定

scss自動コンパイラの設定 package.jsonにて "scripts": { "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", "start-js": "node scripts/start.js", "start": "…

reactのライトな多言語化ならi18nextを使おう - 言語認識ライブラリ,ネスト翻訳も利用

ライブラリの追加 # npm $ npm install i18next --save ​ # yarn $ yarn add i18next CDNで読み込みたい場合は、以下URLで貼ります。 <script src="https://unpkg.com/i18next/i18next.js"></script> 多言語jsonデータを、言語の分だけ作成 (src/locals/ja/translation.json , src/locals/en/translation.json など、分か…

アカウント間・リージョン間でRDSインスタンスを移行/変更したいならDMS(Database Migration Service)を使うのが一番速い

Database Migration Serviceって知らなかったけどめちゃめちゃ簡単で便利なサービス。>< 「RDS リージョン 変更」で調べるとデフォルトのシングルAZをマルチAZにして、手動でフェイルオーバーするとリージョンが変わりますよ、って記事がググって一番上に…

モーションキャプチャデバイスの方式とそれぞれのメリット・デメリットについてまとめた

モーションキャプチャとは、人や物の動きをデジタル化するシステムで、 スポーツやリハビリ等における身体の動きのデータ収集 CGで作られるキャラクタの動きを、人間らしく再現 自動車部品や機械製品の挙動、ゴムや布等の素材の伸縮や反応のデータ化・評価 …

Amazon machine image(AMI)のアカウント間共有の仕方

1. 共有対象のAmazonアカウントIDをメモる ログイン後右上のアカウントページからIDの確認可能。 2. 共有側でAMI を選択し、[Actions] から [Modify Image Permissions] を選択 [AWS Account Number] フィールドに AMI を共有するユーザーの AWS アカウント…

Atomから乗り換え。vscodeでvimのキーマップ割当:Ctrl+j をescキーに割り当てる

先月はAtom使っていたけど、いまいち起動が遅くて乗り換えることにした。 早速vim関係のキーマッピング設定をした。 Ctrl+j をescキーに割り当てる設定にしているのだけど、 調べたら「できない、issueになっている」と出てきた。とはいえ試したら普通にでき…

Atomで快適にVimの矩形選択モードを利用する(2018)

atom-sublime-selectとか、vim-mode-visual-blockとか、いろいろプラグインはあるけれど、メンテナンスされていなかったり、マウスを使わなければいけなかったり、v+control+j/k で操作したい自分には適していなかった。 vim-modeの作者さんが作った、 2015…

Pythonでdotenv

pip install python-dotenv # coding: utf-8 # 環境変数のあれこれ from os.path import join, dirname from dotenv import load_dotenv dotenv_path = join(dirname(__file__), '.env') load_dotenv(dotenv_path) import os for k, v in os.environ.items()…