Reactから外部のライブラリを直接使う - Qiita
Reactで例えばグラフなんかを生成したい場合、d3やChartistを使いたくなる。 いくつかグラフ用のコンポーネントは散見されるが、簡単なものであればスッと利用できそうだが、ちょっと複雑なカスタマイズなどするにはなかなか厳しそうに見えた。 なのでそのまま使うにはどうするかみたいなのを考えた。 （基本的に元のライブラリにパフォーマンスが引きづられがちになったりと若干の邪道感があるやり方になっているのでそこらへんは要注意） Example 今回はChartistを使った。 下記のような感じでRendererを用意する。 class ChartistRenderer{ render(targetSelector, props){ let {data} = props // 必要があればここでデータ加工したり。 var chart = new Chartist.Bar(targetSelect
React初心者が環境構築でつまづかないためのCreate React Appの始め方
初めてReactに挑戦するとまずつまずくのは開発環境の設定です。Facrbookが提供しているCLIツール「Create React App」で簡単に始める方法を解説します。 Reactの新規プロジェクトを始めるには、コードを書いてアプリケーションを形にするだけではなく、ビルドツールでローカル開発環境を整え、ユニットテストをしたあと、最終的にビルドします。思っているほど簡単ではないと感じる方に、簡単なセットアップと最低限の努力で始められる方法を紹介します。 Facebookが提供しているCLIツールCreate React Appを使えば、新規のReactプロジェクトを設定済みの開発者向けwebpackを使って始められます。webpackの設定画面を二度と見なくて済むのです。 Create React Appの使い方 Create React Appはnpmを通してグローバル環境でインスト
Docker で node.js を動かすときは PID 1 にしてはいけない - ngzmのブログ
これは、node.js on Docker の構成で 2〜3日ハマってしまった時の話です。忘れないように記録しておきます。なお、将来は改善・改良されているかもしれませんのでご注意ください。 何が起こったのか node.js の Docker コンテナを、"docker stop" でコンテナを止めようとしても正常に停止せず、10秒くらい経過した後に強制終了してしまうという症状が発生しました。いつも等しくそうなるので、状態とかタイミングとかそういった要因ではなく、そもそも根本的に何かがおかしいと考えられます。 1. node on Docker の構成 Docker コンテナ上で node.js が動いているだけの極めてシンプルな構成でこの問題が発生しました。 node.js で動くアプリは、"Hello World" を出すだけの超簡単な hello.js です。こんな感じです。 cons
【初心者向け】Dockerで手軽にNode.js開発環境構築 (2) - Qiita
サーバーサイド Javascript [参考] Node.js を5分で大雑把に理解する 基礎から学ぶNode.js：第1回 Node.jsとは Express.js シンプルな Web アプリケーションフレームワーク Express - Node.js Web アプリケーション・フレームワーク Version は 4.16.0 を使う 巷には Express 3 の情報が溢れているが（最近は4も増えてきた） 互換性がないので Express 3 系の記事は絶対鵜呑みにしてはいけない 結局上の公式リファレンスが最強だと思う 普通に作ろうとすると ・Homebrew （Mac 用パッケージマネージャー） ・Nodebrew （Node.js のバージョン管理ツール） ・Node.js 本体 をインストールした後 npm （Node.js 用パッケージマネージャー）を用いて Express な
Docker環境内でcreate-react-app - Qiita
業務において、開発環境をDockerで提供することになり、 ビルドのために利用しているNode.jsやnpmコマンドもDockerで提供したところ、そのあたりのバージョン管理が楽ちんになったので、 自分で作っているアプリケーションも積極的にDocker化しようかと思っている今日この頃です。 自分はネットワーク周り苦手なのですが、勉強として「Dockerを使ってcreate-react-appを使ったアプリケーションを構築」をしたいと思います。 図や単語の使い方が間違っているかもしれませんが、その場合は指摘して頂けますと幸いです。 イメージは以下のような感じです。 必要なもの Docker for Mac エディタ 手順 1. docker-compose.ymlと、Dockerfileの作成 今回はこんな感じのファイル構成にします。 /path/to/sample-app ├── dock
npm installしたパッケージの更新確認とアップデート(npm-check-updates) - dackdive's blog
タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際にどのように新しいバージョンにアップデートすればいいのか調べてみた。 今回サンプルに使う package.json package.json の例として、以前、React のチュートリアルをやったときのリポジトリを使う。 { "name": "react-es6-tutorial", "version": "1.0.0", "description": "React Tutorial written in ES6", "main": "index.js", "scripts": { "test": "echo
Docker compose ことはじめハンズオン - Qiita
修正履歴: @aosho235 さんのコメントより、Dockerfile の"EXPOSE 8888" の不要な記述を修正 @aosho235 さんのコメントより、node アプリを起動するコマンドが抜けていた点を修正(Dockerfile, docker-compose.yml) @alt さんより編集リクエスト。シンタックスハイライトを適切なものに修正 感謝<(_ _)> Docker Compose 概要 Docker compose とは、複数のコンテナから成るサービスを構築・実行する手順を自動的にし、管理を容易にする機能です。 Docker compose では、compose ファイルを用意してコマンドを1 回実行することで、そのファイルから設定を読み込んですべてのコンテナサービスを起動することができます。 Docker Compose を使うまでの主なステップ Docker
5分でPHPアプリをGoogle App Engineで動かす - イケてる SaaS を作りたい (koni blog)
以前紹介したGoogle App Engineですが、本当に簡単に動くところまでいけるので、5分で動かすところまで行ってみましょう。 ＜2017/4/20 追記＞ だいぶやり方が変わっているので、全面的に見直しました。 手順① Google Cloud Platform の登録とGAEのリージョンの指定 以下から、アカウントを作成し、任意の名前でプロジェクトを作成します。作成したアプリケーションのURLは、「プロジェクトID」で決まります。プロジェクトIDは全世界でグローバルで、あとから変えられませんので、慎重に決めましょう。 Google Cloud Platform またクレカが必要ですが、無料枠があるのと、3万円の無料利用分があるので、テスト程度では課金されません。 次に左上のメニューからGAEのページを開き、下のような画面でリージョンだけ指定しておきます。 東京にする場合は、asi
運営しているサービスを React で SPA にしてから1年が経ったので、最初から知っておけばよかった！という点を書いておく - koni blog
こんにちは、小西です。 AutoScale という会社で スマートで効率的なTwitter アカウント管理ツール「SocialDog」というサービスを運営しています。 2017年4月にこちらのサービスを React 化してから、約1年が経過しました。 それまでの jQuery のコードと比べ圧倒的に可読性が向上し、バグも激減、SPAになったことでページ遷移もなくなり動作もサクサクになりました。 そこで今回は、開発初期に知っておきたかったなということを中心に、ハマったことや、あの時こうしておけばよかったという点を記事にしてみます。 ちゃんと JS を書いたことがない、これからサービスを SPA 化したい、という方の参考になれば幸いです。 ちなみに現状 SocialDog のJSのコードは、コンポーネント約40個、テスト含め合計行数3万行くらいの規模です。 Twitter アカウントをお持ちの
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
今からはじめるReact.js〜準備〜 - Qiita
仕事を進める上でReact.jsについて教える機会が増えてきました。 React.jsがなんなのかは、各自ググっていただくとして、基本的なところで 何をどうやったらReact.jsでサービスが実装できるのか？ という点について理解できるよう、チュートリアルを作っていきたいと思います。 前提 ・ES5ベースで実装。 ・npmを利用して必要なライブラリを追加。 ・JSXのコンパイルはreactifyで行う。 ・サーバサイドはnode.jsで実装 ・DBはpostgreSQL(Herokuにデプロイするため) 上記、各単語は必要になった時点で触れていきますが、よくわからなければ調べてください。 ※React.jsの技術情報を調べていると、よくES6ベースで書かれたソースをよく見るのですが、現状はブラウザ自体が一部しか対応してなかったり、知識レベルがバラバラな複数の技術者とチームで開発するというこ
コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」
Reactの開発環境構築Reactの開発環境を構築することは当ブログでも以下の通り記事をアップしていますが、使う必要のあるツールがたくさんあり慣れてないとかなり大変です。 Reactを「webpack + babel-loader」でビルドする方法 – maesblogReactをnpmでビルドする方法 browserify (watchify) + babelify編 – maesblogざっとReactの開発に必要なものを挙げてみても、これだけあります。もちろんこれら以外にもまだあります。挙げたらキリがないくらいです。 これらのツールをReactのプロジェクトの度にインストールして、設定してとやるのは骨が折れます。ちょっとしたReactのコンポーネントを作って試したいという時も同様です。 今回紹介するcreate-react-appを使うと、これらのReact開発の度に発生する面倒な作
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック
テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えることができます。取り除くのは先頭行の上だけなので、先頭行の下やほかのテキスト要素はline-heightが適用されます。 Line-height Crop by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 先頭行だけを上に揃えるスタイルシート テクニックの解説 免責事項 はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとし
![[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbe5fdca5858448e042c50f10de1371724f1a1b4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018082000.gif)
LPIC取り扱い停止に関するお知らせ | LPIC | LPI-Japan
LPIC取り扱い停止に関するお知らせ LPI-Japanでは長期にわたりLinux技術者認定試験として「LPIC」の普及活動を行ってまいりましたが、下記の理由からその取り扱いを基本的には停止することといたしました。 今後のLinux技術者認定試験においては、2018年3月から提供をしておりますLinuC（リナック）をご利用いただけますよう、よろしくお願いいたします。 取り扱い停止の理由 1. LPICの試験問題は、インターネットで検索し第三者のサイトから購入ができてしまう状況になってしまいました。このような状況はLinux技術者認定資格としてのLPICの公正性・信頼性が毀損されている状態であると言え、この状況を解決するためにLPI-JapanはLPICの開発元であるLPI Inc.（本拠地：カナダ）に対して早急な試験問題の差し替えを含む改善依頼をしてまいりました。 しかしながらLPI-Ja
新境地を切り拓くダンジョン探索型RPG「世紀末デイズ」。ローグライクゲームへのこだわりも聞けた開発陣へのインタビューを公開
新境地を切り拓くダンジョン探索型RPG「世紀末デイズ」。ローグライクゲームへのこだわりも聞けた開発陣へのインタビューを公開 ライター：丹治正行 カメラマン：佐々木秀二 2018年7月26日に配信されたスマートフォンアプリ「世紀末デイズ」（iOS / Android）は，プレイするたびにダンジョンの構造やアイテムの配置が変化するローグライクゲームの魅力が詰まった，新世代のダンジョン探索型RPGだ。 物語の主人公となる少年少女達は，世紀末感漂う東京を舞台に，失われてしまった日常を取り戻すべく，ダンジョン化してしまったエリアを奔走することになる。 今回4Gamerでは，そんな本作の開発キーマンであるプロデューサーの山口 誠氏（DeNA）と，ディレクターの後藤 真氏（スパイク・チュンソフト），不思議のダンジョンチームの要である長畑成一郎氏（スパイク・チュンソフト）の3人にインタビューを行った。開発
『グランディア』および『グランディアII』のHDリマスターがNintendo Switch向けに海外発表。初代リマスターはPCにも - AUTOMATON
GungHo Online Entertainment America（以下、米ガンホー）は8月20日、『グランディア』および『グランディアII』のHDリマスター版を海外向けに発売すると、海外メディアIGNを通じて発表した。発売時期は今冬で、対応プラットフォームはNintendo SwitchおよびPC（Steam）。Steam向けには、すでに4K解像度と60fpsに対応するリマスター『Grandia® II Anniversary Edition』が発売されており、ここに第一作目が新たに加わることになる。 Grandia I and Grandia II HD Remaster are both heading to #NintendoSwitch. For PC fans, Grandia I HD Remaster will be joining our existing libra
さようなら ImageMagick - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、アプリケーション基盤チームの青木(@a_o_k_i_n_g)です。 一般的な Web アプリケーションがそうであるように、サイボウズのグループウェアにも画像をサムネイルで表示する機能があります。サイボウズでは日々数万件やそれ以上のサムネイルを生成しており、それらは全て ImageMagick によって生成されていました。 そこで得た知見はこちらの記事で公開されています。 blog.cybozu.io しかし現在、サイボウズから ImageMagick は消え去りました。その理由と、我々が取った代替手段について紹介します。 ImageMagick を外した理由 言うまでもなく ImageMagick は優秀なツールで、画像変換に関する何らかのサービスやツールを作る場合には採用の第一候補になることでしょう。あらゆる画像フォーマットに対応し、出力画像をきめ細かに制御できる膨大なオプシ
東京五輪メダル「銀」まだ足りない、小中学校でも回収へ - 日本経済新聞
環境省は、東京五輪・パラリンピック用メダルの原材料になる廃家電などのリサイクル貴金属の回収を強化する。全国の自治体に対し、秋から小中学校で使用済み携帯電話やパソコンなどの回収ボックスを設置するよう協力を呼びかける。これまでの回収で金と銅のメダルに必要な量はメドがついたが、銀は確保できておらず、学校との連携で五輪に間に合わせる。五輪・パラリンピックで必要なメダル数は、金銀銅で合わせて5000個程
無免許に追突されると言うこと。
2018/ 8/17 (金) am 2:43 旦那の運転するエブリイが、 左側から信号無視で走ってきた車に追突されました。 現在旦那は、 絶対安静状態で、 事故の事は一切覚えていませんが、 生きており、 会話も出来ますのでご安心ください。 それだけなら、 報告程度で、 ブログにすることもなかったと思うのですが、 後々判明してきた加害者のこと。 40代男性で、 無職、 無免許、 無保険、 母親の車。 そして信号無視。 クルマに乗る、ということが どういうことなのか？ わからないのでしょうか？ 緊急逮捕されてると聞いていますが、 普通なら数日で釈放ですよね。 無免許の場合、どうなんでしょうか？ 旦那は今の所、 体は動きますが、 頚椎をやっているため 寝てれば治るよ～で済む保証はありません。 事故状況がまだよくわからず、 とりあえずエブリイの確認だけ行きましたが、 これで、よく生きていられたな…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Homepage
物理ボタンで操作ミス防止! 即売会向け簡易レジ「レジプラ」