React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita
手元でコードを書きながら React.js を学習しようと、タイトルどおりの最小構成を作ってみました。 上記の公式ページの Starter Kit や Tutorial の構成が物足りなかったので.. GitHub に置いたので、よろしければ参考にしてください。 ⇒ https://github.com/hkusu/react-babel-browserify-gulp-sample 上記の README.md に記載している通り、特徴としては次のとおりです。 ECMAScript 6 構文のサポートおよび JSX ファイルのコンパイルに Babel を利用 依存モジュールの管理(CommonJS準拠)に Browserify を利用 タスクランナーとして gulp を利用 またサンプルコードとして、簡単なデータバインドを React.js で実装してあります。デモは こちら(GitHub
ゲームして映画みて寝落ち……したい人のベッド | ROOMIE（ルーミー）
週末の最適な寝落ち空間、誕生。 映画を観ながら寝落ちするなんて、映画好きにはたまらないことですが、それをものすごく快適に実現できるアイテムが登場しました。 その名も「iNyx」。プロジェクターやスクリーン、音響システムまでがすべて一体化したベッドです。 大画面のテレビや、こだわった音響システムを持っている、という方はいるでしょう。しかし、それは「寝ながら見るのに快適」に設置されているでしょうか？ ベッド周りにケーブルをたくさん這わすのもイヤだし……。 その点「iNyx」は、スクリーンは天蓋に、音響システムは内蔵式になっているので、ベッド周りもスッキリなんです。 HDプロジェクターはベッドフレームに内蔵されており、プロジェクターが頭上に落ちてくる心配は無用です。音響システムは体を包み込むように5つのポイントに設置されています。 スクリーンは天蓋から引っ張り出して使います。キングサイズのベッド
Node.jsとnpmをアップデートする方法
いつも忘れてしまうので書き留めておきます。macOS Monterey（12.4）で確認をして内容を更新しました。この記事で紹介しているツール「n」もv8.2.0になりました！ Node.jsのアップデート n という便利なバージョン管理ツールがあるので、これを使ってバージョンを確認してアップデートします。nの詳しい使い方はこちらの記事 あたりをご参照いただくと良いと思います。n を使う際の注意点もしっかり説明されています。 nのインストール $ npm install -g n Node.jsのバージョンの確認 1行目の「–stable」でStable（推奨版）のバージョン、2行目の「–latest」で最新版のバージョンが確認できます。 $ n --stable $ n --latest Latestのインストール $ n latest latestは最新の機能を搭載した最新版へのアップ
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
for文を使わないプログラミングって？（関数型プログラミング入門） - Qiita
前置き 例のコードは JavaScript で書きます。 理由は for 文を使うこともできるし、使わないこともできるから。 関数型プログラミングにガッツリ触れますが、そこはフォローします。 この記事から関数型に興味を持っていただければ嬉しい限りです。 for 文って？ プログラミング初心者がぶつかる壁の一つです。 乗り越えてしまえばなんということもないのにね。プログラミングってそういうの多いよね。 よくある使い方としては、 配列の中身のそれぞれについて何かする 配列の中身の合計とかを出す とかがありますね。 for文を使って書くと var arr = [1, 2, 3, 4, 5]; var i; // 配列の中身を全部出力する！ for (i = 0; i < arr.length; i++) { console.log(arr[i]); } // 配列の合計値を出す！ var sum
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
estimote iBeacon分解 - Qiita
estimoteのiBeaconがBLEでスキャンしても見つけられなくなった・・・ もしや電池切れ？ということで、分解して電池交換してみました。 電池2年持つって話だし、まさかとは思うが念のため。 注）estimoteのiBeaconは技適通ってないので国内で利用出来ません まずは裏のシリコンをはがします。 べったりくっついているのでカッターで切りながらはがします。。 電池交換しているようには見えませんね。 シリコンをはがすと今度はプラスチックの板で覆われています。 このプラスチックもべったりケースにくっついているので、やっぱりカッターで切りながらはがします。。 しつこいようですが、電池交換作業中です＞＜ 基板が出てきました！ 分解完了。き、きたない。 電池交換作業中といったら、はたして何人が信じてくれるでしょうか。。 はたからみると、破壊的衝動に駆られたただの変態にしか見えないのではない
Estimote Beacon をリバースエンジニアリング - Qiita
Estimote のビーコン、先月の SDK アップデートでついに 温度センサと加速度センサをサポート したのが記憶に新しいところですが、その数ヶ月前に、Estimote のビーコンを分解したり、 Core Bluetooth フレームワークのメソッドを Method Swizzling したり class-dump したり してアドバタイズメント・パケットの内訳や内部実装を解析した海外記事がありました。 下記記事でその内容をかいつまんで紹介しています。 結局のところ、この解析により割り出したアドバタイズメント・パケットには「加速度センサや温度センサのデータ」は入ってなかった（※当時のファームウェア）のですが、 ソースが公開されていないSDK／フレームワーク／ライブラリの解析 ってこうやってやるのかーという点で非常に勉強になりました。 関連記事 【iBeacon】Estimote iOS
すべてのReact.js初心者が知っておくべき9つのポイント - Qiita
9 things every React.js beginner should knowを意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 私は約6ヶ月間React.jsを使用してきました。それほど長い歴史ではありませんが、あなたがひげの長老として扱われるようなJavaScriptフレームワークの目まぐるしい世界の大きな枠組みの中で、私は最近、React初学者のTipsで少数の人々を支援してきましたので、ここでより多くの人々にその内容を共有するのが良いアイデアであると思いました。これらは全て私が始めた時に知っておきたかったことか、もしくはReactを習得するために本当に役立ったもののいずれかです。 あなたが絶対的な基本を知っていると想定して話を進めますが、もしコンポーネント、propsやstateなどの言葉に馴染みがなければ、公式の入門やチュートリアルページを読むと
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
【工作】子供の頃から憧れていた『バリア』を作ってみた - ARuFaの日記
こんにちは、ARuFaです。 突然ですが、皆さんには「子供の頃から憧れているもの」はありますか？ 僕はと言うと、小さい頃から『バリア』に強い憧れを抱いていました。 …ひとたび発動させれば、あらゆる攻撃を無効化し、弾き返してくれるバリア。 そのファンタジックな外見と絶対的な防御力は、幼少期の僕のハートをわしづかみにしたのです。 一般的に、子供の頃の憧れは成長するにつれて薄れてしまうものですが、僕のバリアに対する情熱は、大人になっても冷めやらないため、今回の記事では…… 実際にバリアを作りたいと思います！ 「大人になる」ということは、決して「現実的になる」ということではありません。 大人になった今だからこそ、子供の頃には果たせなかった夢を叶えましょう！ さあ、今回「バリア」を作る材料として用意したのは、こちらの透明な下敷き。 様々な材料で試した結果、この下敷きが最もバリアに優れていそうだったの
２０１８FIFAワールドカップアジア２次予選、日本代表対シリア代表のレビューとハリルホジッチ戦術、そして日本サッカーの病について - pal-9999のサッカーレポート
さて皆さん、お久しぶりでございます。更新が半年近く止まってましたが、久々に日本代表のレビューでもやってみようかと思います。対象の試合は、直近のアフガニスタン戦とシリア代表戦になります。この2試合なのですが、ハリルが色々と戦術のテストをしてくれたおかげで、うちのブログでも書くことが出来た訳です。本当に有り難い話です。うちみたいなブログは監督が戦術いじってくれないと書くことなくて困るのです。 今回のエントリなんですが、シリア戦のレビューとかいいつつ、アフガニスタン戦の話もします。内容的には、いつかやろうと思っていた話なんですが、「サイドにＷＧ貼るタイプのサッカー」と「サイドにＷＧが貼らないサッカー」の戦術の違い、選手の動き方の違いなんかを扱います。 実は、日本サッカーの場合、「ＷＧを使ったサッカー」をやるチームがそんなに無く、ＷＧを使ったサッカーの代表格である４３３系はあんまり人気がありません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自分が撮った写真がアニメ背景に！「漫画の背景に使えそう」「フォトショ舐めてた」と絶賛のTL
2015年のフォント総括／鷹野 雅弘（スイッチ）
npmコマンドの使い方 - Qiita
【停止】Qiitaのデイリーストックランキング！ウィークリーもあるよ - Qiita
