- keep line breaks 改行を維持を外す
- wrap attribute 折り返しの挙動→しないに設定
React入門メモ
前身：XHP→Facebookが開発。PHPのフレームワークをJSに移植したもの。そのため「毎回ページをレンダリングし直す 」という特徴がある。
MVCのうち、Vのみを担当する。
stateの変更→render関数→仮想ページ→最終的なDOMの更新
JSX
Reactのコンポーネント内でマークアップ言語を記述するためのシンタックス。最終的には完全なJSにトランスコンパイルされる。
利点はほとんどHTMLシンタックスと同じなので、他のUIやマークアップエンジニアが学習しやすく、プロジェクトのリソースを確保しやすい。
picture要素、picturefillについて
<picture> <source media="(min-width: 600px)" srcset="images/demo-over600.png"> <img src="images/demo-under600.png" alt="超え" /> </picture>
さしあたってこれでCDNは読み込める。
<script> // Picture element HTML5 shiv document.createElement( "picture" ); </script> <script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async></script>
メモ
input要素の修飾とクリック時の挙動について理解
stateの状態のパターンが「2より大きい場合」のアニメーションの構造について
See the Pen OmZaYx by nakanishi (@nakanishi) on CodePen.
前回のstateが2つしかない場合のアニメーションの設計の考察に続き、今回はstateが4つあるアニメーションについて考察する。つまり、stateの状態のパターンが「2より大きい場合」について。
この場合について考えてみてわかったことだが、stateの状態のパターン数が2なのか、2より大きいのかは、実装の上では本質的な違いがない。何故なら、前回のように２つの段階に切り分けておけば、アニメーションを実行する段階では既に、対象や(どのDOMを動かすのか)、どのようなアニメーションにするのか(開くのか、閉じるのか)は一意に決まっているからだ。逆に言うと、アニメーションを実行する段階で対象と仕様が一意に決まるからこそ、このような2段階切り分けが有効なのだと考えられる。
タブ、コードの改行、{}の改行の方法
Toggleアニメーション実装の構造に関する考察
See the Pen YVLaQX by nakanishi (@nakanishi) on CodePen.
スライドメニュー等、アニメーション後の状態が2つしかないものの実装を考えてみる。状態=stateがいくつあるのかということは重要だと思う。メニューの表示/非表示、アコーディオンパネルの伸/縮。これらのように2つしかstateがないもの=トグルタイプを考える。
どのような要素で構成されているか
整理して考えてみると、トグルタイプのアニメーションの実装は、以下の4つの要素から構成されている。
- ユーザー操作の検知(例：clickイベントの取得)
- stateによる条件分岐とstateの変更(例：isOpenによる判定)
- DOMの操作・アニメーション(velociy.jsによるアニメーション等)
- DOM操作をトリガーするためのイベントの発行とリスン(例：$(window).triggerHandler(“customEvent”,()=>{}))
以上４つの操作は、実行される時系列に従って並べると以下のようになる。
ユーザー操作を検知(例：clickイベントの取得)
→stateによって分岐(例：isOpenによる判定)
→イベントのトリガー(例：$(window).triggerHandler(“customEvent”,()=>{}))
→イベントのリスナー(例：$(window).on(“customEvent”,()=>{}))
→DOM操作(velociy.jsによるアニメーション等)
→stateの変更(例：isOpenの変更)
「イベントのトリガー」は、なくても実装は出来る。しかし次のように4つの要素を、以下のように2つにわけるとデバグが簡単になる。その理由は後半で検証する。
jsめも
import “velocity-animate”;
だけでnpmのvelocityを使えるっぽい。.velocity記法で。
browse-shimが必要
http://www.jquerystudy.info/reference/traversing/each.html
each return false/true
飲み屋であった人が自然言語処理やってるといってたのでオススメのチュートリアルを聞いてみた
よく行く飲み屋にいた人が自然言語処理を仕事でやられているというので、オススメのチュートリアルを伺った。ちょっとやってみる。
色々手を出して、どれもものになっていないのだが、これはあくまで趣味なので問題ない。いろんな小説の頭の方だけ読んだっていいじゃないか。
↓チュートリアル
https://radimrehurek.com/gensim/tutorial.html
Pythonは自分で覚えるように。Gensimというライブラリかなんかをインストールしておくように。でイントロダクションを読むようにと。
It is assumed that the reader is familiar with the Python language, has installed gensim and read the introduction.
とりあえずIntroを読む。
Gensim is a free Python library designed to automatically extract semantic topics from documents, as efficiently (computer-wise) and painlessly (human-wise) as possible.
Gensimは無料のPythonライブラリで、文章から機械的にsemantic topic=多分、意味、もしくは主題を、抽出します。コンピューターの側にとって処理効率がよく、人間にとって苦痛の少ないものになっています。
Gensim is designed to process raw, unstructured digital texts (“plain text”). The algorithms in gensim, such as Latent Semantic Analysis, Latent Dirichlet Allocation and Random Projections discover semantic structure of documents by examining statistical co-occurrence patterns of the words within a corpus of training documents. These algorithms are unsupervised, which means no human input is necessary – you only need a corpus of plain text documents.
Gensimは人間が書いたそのままの、構造化されていないデジタル・テキストを処理します。Gensimのアルゴリズムは…
Once these statistical patterns are found, any plain text documents can be succinctly expressed in the new, semantic representation and queried for topical similarity against other documents.
わ、わからん。とりあえずPytonをインストールする。ラズパイとかでも使うことになるのでよい機会。
↓これを読んでインストールする
http://qiita.com/icoxfog417/items/e8f97a6acad07903b5b0
まずはpyenvを入れる。これはnodebrewみたいなpythonのバージョン管理ツールのようだ。
$ brew install pyenv
その後インストールするわけですが、
なんかエラーが出るので↓をみて対処。
具体的にはxocodeを入れる。
xcode–select —install
でpyenv install -lsでインストール可能なバージョン一覧から新しいやつを選択して、
pyenv install 3.6.1
でインストールできた。
あとは↓をみてバージョンを指定する。
http://qiita.com/mogom625/items/b1b673f530a05ec6b423
virtualenvをインストールする: pip install virtualenv
これは特定のディレクトリ直下に開発環境を整備するためのもののようだ。node.jsと対比すると、これを使うことでパッケージをローカルにインストールしてそのパッケージを実行するといったnodeだと当たり前の開発環境が実現できる。npm install XXX -D とかってローカルインストールしていくような開発方法が取れる。
↓でnode.jsのpackage.jsonにあたる、インストールしているパッケージの一覧を書き出しできる。他の開発者と環境を整えたければ、このファイルを読み込んでもらえば良い。
pip freeze > requirementx.txt
実行には XX.pi というファイルを作ってそこにかいて、python XX.piで実行できる。例えばprint (“test”)と test.piに書いて、python test.piで実行すると、ターミナルにtestと表示される。
ウェブストームでうまく.piが表示できなかったので調べたらpycharmというIDEがあったのでダウンロードしてみる。Webstormとだいたい同じなので良さげ。Webstormにはpython用のプラグインはない模様。
そしてみんなだいすき www.codecademy のpythonコースで書き方の雰囲気をつかむ。
以下プロジェクトの進め方。
# プロジェクトのフォルダを作成 mkdir myproject cd myproject # 1.仮想環境の作成 venvはフォルダ名でここにプロジェクト用の環境が用意される virtualenv venv # 2.仮想環境を有効化し、pipで必要なモジュールをインストール # Windowsの場合、venv/Scripts/activate.bat なお、Gitのシェルを利用すると同じようにsourceでできる # 仮想環境のactivateを行わないと、グローバルにインストールされるので注意 なお、無効化はdeactivate source venv/bin/activate pip install xxxx # pip freezeで作成した一覧(requirements.txt)からインストールする場合は以下 pip install -r requirements.txt # 3.実行する python xxx.py
変数名
Pythonでは以下のような変数名は使えない
- $は使えない。同じく_以外の記号は使えない。
- 4number 冒頭は数字ではいけない
- many-people 「-」は使えない。使える記号は_のみ。
変数名は、大文字小文字を区別して認識するので、manyPeople ManyPeople manypeople等々はすべて異なる変数名である。
raspberry pi 3 に nodebrew を入れて node のバージョンを管理する。node-redも入れる。
せいごさんに色々教えていただきながら、raspberry pi で IoT に参入し、居酒屋ハッカソンで笑いを取りたいなと作業しています。昨日はラズパイにnodeのバージョン管理ツールであるnodebrewが普通に入ることを教えてもらったのでやってみました。
まずなぜnodebrewを入れる必要があるかというと、根本的にはNode-REDを使うためです。Node-REDはnode.jsのnpmなので、動かすためにはnode.jsか必要になります。
では、なぜnode.jsを普通にインストールするのではなくて、nodebrewというnodeのバージョン管理ツールを入れる必要があるかというと、node.jsはバージョンによって差異が大きく、また更新も早いので、いくつかのバージョンを使い分けなくてはいけないシーンが出てくるからです。これは、フロントエンドの開発においてnpmを使ってタスク処理をさせている方には馴染みのある知識だと思います。具体的には、nodeのバージョン以上に、npmのバージョンが大きく、npm2でインストールしたnpmは、npm3でインストールすることを前提に動いているnodeでは全く機能しません。他にも細々とバージョンによってトラブルが起きるので、バージョンを管理し、開発者間で基本的には同じバージョンのnodeを使う必要があります。そのためにnodebrewが必要になります。
また、ラズパイのraspbianという標準的なOSには最初から、node.jsがインストールされていますが、このnode.jsのバージョンはかなり昔のものなので、基本的にはサポートしておらず、バージョンアップするようにかかれています。http://nodered.org/docs/hardware/raspberrypi ですのでnodebrewを使わない人も、この指示に従ってnode.jsとNode-REDのバージョンをあげましょう。
問題は、上の指示は基本的に最初からラズパイに入っているnodeとNode-REDのバージョンを、まとめてあげるものであって、今回のようにnodeを自分で入れて、npmとしてnode-redをインストールするときにどうすればいいのかが書かれていないように思われます。
とはいえ、nodeのバージョンを管理しないのは不便だと思うのでnodebrewを入れる方向を選びました。さしあたってnode-REDは動きますし、nodeの管理もmacでやっている時と同じようにできるようになりました。問題は、上のドキュメントで言及されているラズパイのGPIO関係のNode-RED用ノードが入っているのか、動くのか、ということだけです。これはまだ検証していません。ラズパイのGPIO出力端子が、メスだということを予想しておらず、家にケーブルがなかったからです。アードゥイーノユーザーの方は注意してください。
さてインストールしていきます。nodebrewの公式ドキュメントに書いてある通りに、まずはインストール。
$ curl -L git.io/nodebrew | perl – setup
次にパスを通すわけですが、.bashrcに書くと書いてありますが、何かと.bash_profileに書いた方が良いらしく、なぜなのかは私にはわかりませんが、そうします。
そして、vimというエディターで編集するのは、操作方法がいつも使っているwebstormとは全く異なり使えません。なので、nanoエディターを使います。最初から入っています。
$ nano ~/.bash_profile
でナノエディターでバッシュを開いて編集します。以下のものを追加します。初めての人は多分何もないと思います。で、保存。ナノエディターの下の方に保存のコマンドとかありますので、それみてやります。
export PATH=$HOME/.nodebrew/current/bin:$PATH
これでnodebrewをnodebrewコマンドで使えるようになったはずです。では
nodebrew help
とnordebrewのコマンドを叩きます。ちゃんと入って入れば、ヘルプが出ます。うまくパスが通っていないと、パスを指定しろと言われます。
次にnordebrewを介してnode.jsをインストールします。
nodebrew install-binary stable
これで、ノードの安定バージョンがインストールされます。他にもバージョンを指定する方法や、最新を入れる方法等、コマンドあるのでマニュアルをみてください。
インストールしたあとに、
nodebrew use バージョン名
で、使うものを指定して、初めてnodeコマンドが有効になります
ローカルにインストールしたノードの一覧は
nodebrew ls
で確認できます。
そのあとはnpmを使ってNode-REDをインストールします
npm install -g node-red
インストールできたので、実行
node-red
そしてらブラウザでlocalhost:1880にアクセスしてエディターを開きます。
できました！
GPIOが使えるかどうかチェックしたら、また記事を書きます。