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

とある情報系大学院生のメモ。React, firebase, 機械学習など

フロントエンド

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

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

自動でOGP画像を生成できるサービスtext2ogp.comをつくりました【node, canvas】

画像生成サーバー 描画 フォントの読み込み 画像の読み込み グラデーション 文章を改行しつつ、真ん中に表示する 生成したcanvasオブジェクトをpngとして返す CORS SSL化 text2ogp.com 本体 概要 クリックしてリモートの画像生成サーバーの画像をダウンロー…

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

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

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

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

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ツリーに追加される前に一度だけ実行され…

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

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

Rails5でDeviseにプロフィール画像項目を追加するときのTips

gemを入れる deviseはインストールされている前提で進めます。 gem 'devise' # 以下、追加 gem 'carrierwave' gem 'mini_magick' uploaderを作る $ rails g uploader Avatar avatar_uploader.rb で, include Carrierwave::MiniMagick をコメントアウトして有…

【Rails5】ActionCableリアルタイムチャットを実装。

Action Cableは、 WebSocketとRailsのその他の部分をシームレスに統合するためのものです。Action Cable が導入されたことで、Rails アプリケーションの効率の良さとスケーラビリティを損なわずに、通常のRailsアプリケーションと同じスタイル・方法でリアル…

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

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

font-awesomeに飽きたら使いたい、いろいろなアイコン

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

いろいろなjQueryプラグイン

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

herokuでカスタムエラーページ&メンテナンスモード

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

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

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

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