daily-dev.net

React, firebase, 機械学習など

フロントエンド

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

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

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

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

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

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

【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 =“"に入れる日本語はエンコードしておく。