サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
おみそ汁
umi-uyura.hatenablog.com
これまでWindowsでNode.jsのバージョン管理はNodistを使っていましたが、改めて環境構築を構築をしていくにあたってMicrosoftのドキュメントを眺めていたところ、Nodist以外にもそういったツールがあることを知りました。 NodeJS をネイティブ Windows 上に設定する | Microsoft Docs WSL 2 上で Node.jis を設定する | Microsoft Docs WSL2(Linux)向けの方で掲載されているパッケージ管理ツールのほうが多いですが、その中のいくつかはマルチプラットフォームで、ネイティブWindowsでも使えそうなものもあります。 2020 年ではもう使えない Nodist はアンインストールする (Windows) この記事に触発されたというわけでもないのですが、最近WSLを触り始めたこともあり、Windows/Mac/Li
メンターが足りてないのでGitとGitHubを使ったことがある人でメンターやってもいいよって人は是非ご登録ください! 12月19日 GitHub Patchwork Tokyo https://t.co/AsS18Qv08u— Takafumi Ikeda (@ikeike443) December 12, 2015 9月に参加させていただいたGitHub Patchwork Tokyo、自分的にはとても楽しいイベントでした。 umi-uyura.hatenablog.com 上のツイートを見かけて、参加者は満員なのに、メンターはその時点で募集人数の半分くらいしか埋まっていなかったようだったので、 他のメンターを呼びに行く係 くらいにはなれるかもしれないと思って、参加させていただくことにしました。 まだ小さい子供がいる身としては、特に夕方以降の動ける時間が限られるため、なかなか週末のイベン
先日、React + Material UIでタイムゾーン変換ツール TimezoneConv を作ってみました。 umi-uyura.hatenablog.com 公開するにあたって、当初はHerokuもしくは別のホスティングサービスを使おうとも思ったのですが、Reactとは言えサーバーサイドレンダリングを使っているわけでもなく、ソースをGitHubで管理していることもあり、GitHub Pagesを使ってみることにしました。 GitHub Pagesとは GitHub Pages 必要なファイル一式をGitHub上のリポジトリにアップすることで、静的サイトとして公開できるというサービスです。 GitHub Pagesの使い方としては、大きく2つあるようです。 種類 割り当てられるURL ユーザー or Organization用サイト http://<ユーザー名 or Organiza
以前、EmacsでReact(JSX)コーディングする環境について調べた際に、JSXの構文チェックとして JSXHint を使うようにしました。 umi-uyura.hatenablog.com ところが、こちらの記事によると、どうやらすでにJSXHintはDeprecatedになっていて、ESLintへの移行を促しているとのこと。 vim + syntastic + jshint だと JSX がエラーになる問題 | はなたんのブログ ESLintがJSXにも対応していることは前回把握していたものの、一通り設定をするのが面倒だったので採用していませんでしたが、そろそろES6も触ってみたいこともあり、このタイミングでESLintの環境を用意しておくことにしました。 ESLintの導入 npmからESLintをインストールしておきます。 $ npm install -g eslint Fly
先日、とりあえずEmacsでESLintを使う環境を作ってみましたが。 umi-uyura.hatenablog.com チェック内容を設定しておかないと意味がないので、基本的なものだけでも設定しておこうと思い、調べてみました。 設定ファイル雛形の生成 そもそも、これまでESLintの導入まで至らなかったのは、設定項目が多すぎて、使うまで時間がかかりそうという印象があったからでした。 ところが、どうやら.eslintrcの雛形を生成してくれる機能がESLintにはあるもよう。 eslint --init を実行すると、ウィザード形式で.eslintrcを生成できます。 $ eslint --init ? What style of indentation do you use? Spaces # インデントのスタイルはスペース ? What quotes do you use for st
ReactとMaterial UIを組み合わせると、それだけでBrowserifyで結合したJavaScriptファイルが1MB超えてしまうので、やっぱり圧縮とかした方が良いのかな―と思い、やり方を調べてみました。 ※2015/08/03更新 Licensifyを開発された @t_wada さんから改良の連絡をいただいたので、Licensifyの最新版1.4.0をもとに内容を更新しました。 Licensify - Nodeモジュールのライセンスコメントを生成する JSファイルを圧縮すると、ライセンスが記載されているコメントが消えてしまうという問題があるということで、本題の前に、Browserifyと組み合わせて、読み込んだNodeモジュールのライセンスコメントを生成してくれる Licensify を試しておくことにしました。 インストールはnpmから。 $ npm install lice
先日から少しずつ触っているReactですが。 umi-uyura.hatenablog.com とりあえず日本語で入門的な情報がまとまっている 一人React.js Advent Calendar 2014 - Qiita をざっと読んでみました。 後半のAdd-onsやServer-side rendering、テスト関係などはもう少し使ってみないとわからないところもありますが、前半のReactの基本的な使い方はとてもわかりやすかったです。 で、チュートリアルなどを読み進めたり、もう少し具体的な実装をするにあたり、どういったAPIがあるのかをざっと把握したくて、 Reactの公式サイト のREFERENCEを眺めていたのですが、ちょっと一覧性が悪かったので、Cheat Sheet的にまとめておくことにしました。 Top-Level API React は、React Libraryのエン
ちょっとした日時計算をするだけのペライチなWebページを作ろうとしていました。 日時情報を取り扱う処理を実装するので、定番の Moment.js を組み込んでいたのですが。 UI部分は最近取り組んでいるReactを使うことにして、JSXの変換も済ませた形で組み込むのが良いと思ったので、開発環境としてはBrowserify + Babelify (+ Watchify)としつつ、Moment.jsも含めて、npmで諸々導入していました。 そのついでに、特に必須というわけではなかったのですが、日付や時刻の表記をMoment.js使えば国際化するの簡単なんじゃじゃない?と思ってやってみたところハマってしまったので、そのメモです。 ハマったこと ハマった点は、以下の3つ。 クライアント(ブラウザ)のタイムゾーンが取れない Moment.jsをrequireで読み込んだ場合、ロケールデータが読み込ま
ズルズルときていた年度末案件がようやく収拾ついてきたので、なんとか次に向けての動きがとれるようになってきた今日このごろ。 業務にて、エンジニアではない人向けにちょっとしたツールを作る必要が出てきたので、この機会にとnode-webkitを使ってみることにしました。 非エンジニア向けということでGUIが必要であったことと、私も含め社内のほとんどの人はMacを使っているものの、一部Windowsを使っている人もいるため、マルチプラットフォームに作れるものが欲しかったということがあります。 というわけで、試したことの作業メモ。 開発環境の構築(node-webkitのインストール) プロジェクト用のフォルダを作成した後、npmを使ってインストールしました。 $ mkdir nwdemo $ cd nwdemo $ npm install nodewebkit@0.9.2-6 はじめバージョンを指
以前少しnode-webkitを触って、ちょっとした社内ツールなどに使ってみていました。 umi-uyura.hatenablog.com それからしばらく経ちますが、Node.jsから派生したio.jsの登場により、node-webkitもNW.jsと名前を改めることになったようです。 ちょっと新しいツールを作らなければならなくなったので、今度はNW.jsベースで作ってみようと思い、大きな違いはないと思いつつ、振り返りついでに使い方を確認してみました。 NW.jsのバージョンは0.12.0-1で試しています。 開発環境の構築(NW.jsのインストール) いきなりつまづいたのは、 公式サイト を見ても、 GitHubのリポジトリ を見ても、パッケージのインストールについての記載が見当たらなかったこと。 以前は $ npm install nodewebkit でインストールしていたのですが
私はデザインセンスがかけらもないので、UI部分については、どうしても素っ気ないものになってしまいます。 最近取り組んでいるReact + NW.jsですが、そのまま作ると素のHTML要素が並ぶことになるので、せめて基本的なコンポーネントくらいは見栄えを良くできないと、何かデザインフレームワークを使ってみることにしました。 探してみると、 Material UI という、Reactベースでマテリアルデザインのフレームワークを見つけたので、以前から作っていたReact + NW.jsのサンプル( umi-uyura/react-on-nwjs-sample )をベースに、Material UIを適用してみることにしました。 ※2015/05/26追記 これを書いたタイミングではMaterial UIのバージョンは0.7.5だったのですが… 昨日ネタにしたReactベースのMaterial UI
タイトルのとおりなので、もう導入されている人にはなんの糧にもなりません。 qlmarkdownとInkMarkという2つのプラグインを見つけたので、比較してみたという記録です。 Markdown用のQuick Lookプラグイン Macユーザーになって、かれこれ5年くらい経ちますが、これまでQuick Lookといえば画像の確認くらいにしか使っていませんでした。 しかし、プラグインを入れるとけっこう便利ということに今さらながら気づいて色々と試していて、先日Qiitaにも iOS - プロビジョニングプロファイル用のQuick Lookプラグイン「ProvisionQL」 - Qiita というのを投稿してみました。 それ以外に、最近は作業中のメモやQiitaやブログやらとMarkdownで書くことが多くなってきたので、こちらも今さらですが、Markdown用のQuick Lookプラグイン
そろそろ <script> タグではなく、Node.jsらしく require でモジュール読み込みしたくなってきたので、Browserifyを試してみることにしました。 ベースとしたプロジェクト 以前React on NW.jsの取っ掛かりとして作ったサンプル があったので、違いを理解するためにも、それをベースにして組み込んでみることにしました。 umi-uyura.hatenablog.com 主要なソースだけ抜き出すと、 index.html と app.jsx の2つで、以下のような単純なものです。 index.html <html> <head> <title>React on NW.js</title> <script src="node_modules/react/dist/react.js"></script> </head> <body> <div id="app"></
Reactの開発をする際、JSXで書くのか、それともJavaScriptベースにするのかと大きく2パターンありますが、コンポーネントの構造が把握しやすい点や、タイプ数も少なくなりそうなので、JSXで書くことにしています。 JSXの場合、JavaScriptのコードの中にHTMLタグが出てくるというものになりますが、Emacsでコーディングする際に、シンタックスハイライトや構文チェックをやりたいなーと思ったので、調べてみました。 ※2015/10/28追記 JSXHintがDeprecatedになったため、ESLintに切り替えました。 umi-uyura.hatenablog.com ※2015/11/7追記 js2-modeがJSXの編集に対応したそうです。 Emacs で React の jsx を js2-mode で書けるようになってたメモ - 牌語備忘録 -pygo 前提 項目
先週から作っていた社内向けツールがなんとなく動いたので、Windows環境でも動くかどうかを確認するために、パッケージングすることにしました。 node-webkitのパッケージングは何度かやったことがありましたが、手動でやると若干面倒くさいので、今回は以前見かけていた node-webkit-builder というパッケージングツールを使ってみたので、そのメモです。 環境 パッケージ バージョン NW.js 0.12.0-1 React 0.13.1 React-tools (jsx) 0.13.1 node-webkit-builder 1.0.11 導入 npmから。 $ npm install node-webkit-builder --save-dev グローバルにインストールすることもできますが、こちら( npm で依存もタスクも一元化する - Qiita )の記事などを読むと
去年は職場のMacやプライベートのMacが頻繁に不調に陥り、何度かMacの環境を作り直すことがあったのですが、Boxenベースの構築ツールを用意していたことで、けっこう助かっていました。 Boxenで環境構築してみました - Umi Uyuraのブログ とは言え、 Boxenは2013年でオワコンとされている( Mac - Boxen使ってて許されるのは2013年だけだった - Qiita ) し、確かにPuppetモジュールベースはアップデートへ追従していくのがなかなか手間なので、昨年末ころから環境構築方法について見なおしていました。 ようやくMac OSもYosemiteにアップデートして、そこである程度動作確認が取れたので、まとめておこうと思います。 方針 おおきくは、以下の方針で整理していこうと考えていました。 主なアプリはHomebrewベース(brew bundleとHomeb
少し前になりますが、自宅から会社のMacを操作する方法を探していて、Chromeリモートデスクトップを試したときのことを書いておこうと思います。 リモートデスクトップソフトで気になった点 リモートデスクトップ系のソフトは色々とあり、LogMeInやteamviewerなどいくつかを試してみたことがありますが、どれも少し気になる点がありました。 それは、リモートから操作している間、ホストとなるMac側にも操作中の画面が表示されており、かつホスト側からも操作が可能な点でした。 つまり、ホストPCが設置されている場所に第三者がいた場合、あまり見せたくない情報を見られてしまったり、その人に操作されてしまう可能性が出てくるということです。 基本的には会社に置いてあるホストPCを想定しているので、第三者と言っても同じ会社の人間であるのだと思いますが、とは言え、悪意がある人がいないとも限らないわけで、せ
先日Herokuから発表された、これ。 Introducing Heroku Button GitHubにあるのHerokuアプリを直接自分のHerokuアカウントにデプロイして動かせてしまうというもの。 Herokuでルートドメインの静的サイトを構築のときにも書いた通り、個人的に、静的なWebサイトの動作確認などでHerokuを活用させていただいていたりするので、これは使えるのでは、ということで試してみることにしました。 Heroku Buttonの設置準備 そもそもの前提として、 Herokuにデプロイできるアプリケーションがあること リポジトリがGitHubで公開されていること になります。 そこで、前述の記事でも書いていたumi-uyura/node-static-siteは、Node.jsベースでHerokuで動かす想定のものだったので、これに設置してみることにしました。 app
※2014/09/10追記 ブコメで教えて頂きましたが、こんなマドロッコシイことしなくても、シンボリックリンク張れば瞬殺でした! id:toshimitsu_sasaki さん、ありがとうございます! $ ln -s /Applications/Xcode.app/Contents/Applications/FileMerge.app /Applications/ まあ、なんか使い道あるんじゃないってことで... ※2015/05/26追記 Meldという差分比較ツールも使っていて、こんなツールも作ってみたので、良かったら使ってみてください。 umi-uyura.hatenablog.com FileMergeはXcodeのDeveloper Toolsに含まれている差分比較/マージツールですね。 Windowsの頃はWinMergeに非常にお世話になっていました。 ファイルだけでなくフォ
このページを最初にブックマークしてみませんか?
『umi-uyura.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く