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

React, firebase, 機械学習など

sponsored

javascript

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

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

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, …

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サーバを走らせるデーモンをバックグラウンドでカンタンに作れます…

最初にこう説明してよと思った、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 など、分か…

Twitterみたいに各タブが無限スクロールするコンポーネントの実装【React】

ツイッターの様な、 「タイムライン」「お気に入り」「フォロワー」 みたいなタブが横並びになっており、それぞれに無限スクロールが可能なユーザープロフィールページは、どうコンポーネント分けるのがベストなのか? について悩んでしまいました。 これ、…

Reactのライフサイクルメソッドとその使いドコロのまとめ - ajax callをするのに最も適した場所は?

React.jsを勉強し始めて3日経ちました。 いまいちよくわからなかったReactのライフサイクルメソッドの使い分けについて調べたのでまとめます。 ライフサイクルと使いどころ componentWillMount コンポーネントがDOMツリーに追加される前に一度だけ実行され…

React.js - Tabの表現には props.children が便利

最近、遅まきながらReactを勉強しています。VR, Web, iOS, androidで一つのコンポーネントを使いまわして表現できるのはとても魅力的だと思ったからです。 呼び出す親側から変数をDOMタグのアトリビュートとして受け取りpropsから引き出す・・・という形態に…

D3.jsによるデータビジュアライゼーション-樹形図(d3-hierarchy・Treeview)まとめ

インストール d3.tree() tree(root) tree.size( [width, height] ) tree.nodeSize( [width, height] ) サンプルコード データ可視化ライブラリD3jsの中でも, 階層的なデータの表現を扱う, d3-hierarchyモジュールの中の樹形図を表現するTreeAPIについてまと…

はじめてのグラフの描画 - D3.js を利用してDOM操作・棒グラフを作成してみる

D3.jsはとても便利なグラフ用ライブラリです。データに応じたDOM要素の扱いがとても簡単にできます。 導入 CDNが利用可能です。 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> チュートリアルは D3 入門 | スコット・マレイ | alignedleft が大変わかりやすいです。以下はこのチュートリアルに沿っていま…

OAuthの仕組みとchrome拡張機能への利用

OAuthとは? 「facebookの自分のアカウントを今使っているサービスと連携したいと考えている花子」を例に出すと, facebookに花子が登録した情報や投稿、花子がアクセス権限を持つ各種機能(facebookの友達の情報を見たり投稿を読む)に対し、 花子の許可を受…

Ruby on Railsユーザ向け速習CoffeScript + vim のシンタックス設定

Ruby on Railsの生みの親であるDHHが、次期バージョンのRails3.1でjQueryやSCSSと合わせて、CoffeeScriptをデフォルトとして採用するとTwitter上で発言して注目を集めた. Rubyist, Pythonia にはとっても馴染みやすいので, 手っ取り早くこれを頭に入れておけ…

ボタンを押したらスクロールダウンが始まり、指定の位置まで下がっていく実装をデザインまで[javascript, jQuery, css]

いろいろなjQueryプラグイン

よく使われるフロントライブラリを集めてみた。 あくまで「使う」ではなく、「読める」「適切な位置に置く」ための参考程度の情報。

javascriptイベントで作成した要素に対してonイベントが効かない

対処法:動的に変化する要素のイベントは、変化しない親の要素に仕込む。

かんたん自作シェアボタン | Ruby で動的にツイート内容を変える

Ruby で日本語を含む文字列を扱うために、URLモジュールを入れる ブラウザは、URLにエスケープされた文字列が含まれていた場合それを展開して表示するが、通信するときはエンコードしている。そのため、a href =“"に入れる日本語はエンコードしておく。