初心者にGit教える時に必要最低限のCUIコマンド
前提条件
ガチ初心者でgitの操作をCUIで学ぶため、基本1人でmasterで作業するという「いやお前それGit管理じゃないだろそれ」という前提でやってもらます。いいんだよ細かいのはこれから学んでいけば。
作業前にリポジトリとかはどこかで作って置いたほうがよい(Github、Bitbucket、backlogなど)。
必要なコマンド群
リポジトリのクローン ... gitを使う設定
git clone https://xxxxxxxx/xxxx.git
※この時もしかしたらログインIDやパスワード聞かれるかもだが、気にせず入力してください
作業ファイル全追加 ... 作業したファイルを保存
git add -A
コミットメッセージ ... 何の作業をしたかの記録
git commit -m "commit message"
プッシュ ... サーバーにアップする
git push
プル ... 人が作業した分を同期・ダウンロード
git pull
右のはあくまでもそうした意味ではなく、イメージ。だいたいこれで足りる。自分は足りた。
cloneした後に「作業 → add → commit → push」を基本ローテーションとして作業。
必要に応じて他の初心者を入れて同様に作業させて、pullを理解してもらう。コンフリクト起こしたら、その時は都度修正、コミットなどしてくれ。
基本の骨組みはこのイメージでいいのではないか
実際Gitは様々なコマンドがあったりフローが存在して、いわゆる「ちゃんと理解できたらちゃんと使える」代物とも言われてるので、使いこなすにはある程度知識や経験が伴う。
とはいえ自分がやってきた中では基本このイメージさえできていれば、後はそれに付随する肉付きをしていけばいいんじゃないかと思っている。
たとえば作業でpushまでしたけど実は違ったものが最新になっていたのでそれを直すというのがあった際に、上記コマンドであれば作業後に再びadd、commit、pushなどをする一連の流れがあるわけだが、そのままだと煩雑なコミットログになりかねない(別に慣れる間であれば気にしなくて良いのだが)
そのためにgit revertだったりresetだったりcheckoutというコマンドが調べて出てくるのだが、そうした時に学んでいけばいいんじゃないかとは思う。
それなりに親切なGit
あとGitは丁寧なので、たとえば新しくブランチを切って作業して何も考えずadd、commitしてpushすると「リモートにそんな追従ブランチねーよ」と教えてくれて以下のコマンドを提示してくれます。
git push --set-upstream origin branch
アメリカ語だけど頑張って訳せばそれなりにちゃんと教えてくれてるんだというのがわかる。なので極端に怖がらなくてよいのだ。
極端な言い方をさせてもらえば、やり方次第でなんとかなるのがGitである。
Git教育について知見が欲しい
ウチではこうやってるよ的なのを募集しています。
HTML5 Conference 2016 行ってきたよ
自分のまとめです。
Reactの最新動向とベストプラクティス
@koba
この内容の通りです。https://getstorybook.io/とかhttps://storybooks.io/は視覚的に確認できるのがめっちゃ便利だと思いました。
あと会場内でのReact体験者 - React業務経験者 = だいぶ少ない印象でした。
webのグラフィックス2016
WebGL事例 - @mattari_panda
www.slideshare.net
コロプラの中の人。今回はサイトで使うWebGL(というかThree.js)の紹介。簡単なものから導入してみるのはよいことですね。
WebGLパフォーマンス - @emadurandal
パフォーマンスを測る方法など。CPU側とGPU側でボトルネックになり得る箇所があるかもなのでそこを履き違えないようにという感じ。
CPU側(Javascript部分とか)は描画処理以外でもネックになりえている可能性があるので調査は割としやすいかもだけど、自分はGPU側はあまり知り得てないので使うときには軽く触れておくといいかもしれない。
あとThree.jsなどのライブラリには内部にWebGL命令が書かれているので最適化は難しいが、チューニングの仕方を知ったりやノウハウを集めていく(Stackoverflowとかで)やり方がよい。
Material Design for Web
@taquo
Google Developer Relations所属。プレゼンというか間のとり方上手いなという印象だった。
様々なデバイスへの対応
歴史
4,5年前
Gmail、Android Gmail、Mobile Web Gmail 実はデザインはすべてバラバラ
2011
Project kennedy - ユーザー体験を統一化しようプロジェクト 黒帯メニュー部分がプロジェクトの集大成
Holo フレームワークが登場 ↓ デスクトップとAndroidで違う…
2014
Material Design誕生 異なるプラットフォームでアクセスしても平等なアクセスが出来る ↓ Googleサイト、アプリ以外にも様々なサードパーティでも利用できるように マルチデバイス・クロスブラウザ問題の解消をすすめる
- Tangible Surface (物質的なデザイン) → デジタルな紙で表現
- Print Like Design (印刷物デザイン) → グリッド計算 1dp → 約8px
- Meaningful Motion(意味のあるモーション) → 現実世界の動きに準ずる
アプリケーションコストを下げられるのではないだろうか?
Use Case
- inbox : google
- Google Cultural Institute
- Google I/O
- PESTO
Framework
- PolymerPaper Elements
- Angular Material
- Material Design Light
Layouts
- ai frameworks
- Device metrics
- Resizer
Fonts
- Google Fonts
- Noto Sans
Icons
- Material Icons
Summary
デザインフレームワークに縛られてほしくない
Anouncement
コミュニティ(Slack) http://design-jp.herokuapp.com
協働のためのデザイン思考の再構築
@yhassy
デザイナー エンジニア 各自のコミュニケーションが永遠の課題
デザインとコードの同時進行が最近の動き 「デザイナーはコード書くべき、ビジネスを知るべきだ!」ニーズ
ツールで解決
Sympli
パターンを考える
UI構築のスピードアップ
一定以上の品質担保
- ある程度のパターン言語を作るべき
- ユーザーが最低限満足するツールを作るため
- あらゆる状況に対応できるように汎用性のあるもの
パターン言語
ATOMIC DESIGN
デザインの最小要素とは何か?
MATERIAL DESIGN
Bootstarp
フォースプラットフォーム、すべてで同じ体験をする
自社スタイルガイド、パターン言語をつくる
例:MailChimp
- 利用者ニーズに最適化するUI
- 製品・サービスに合う名称
そもそもの大きな問題
デザイナー… 全体構成から詳細部分をつくる → 部品から作れない
エンジニア… パーツ単位から全体のサービス → 一貫性がないと二度手間
プロトタイプツール
invision
考え方を合わせるアプローチ
スタイルガイドの作成など ← ただし必ずうまくいく訳ではない
今考えられる解消の仕方
エンジニア
ドメイン駆動設計 DDD(言葉のズレの解消)
ドメインモデルーーーーーユーザーの目的
デザイナー
オブジェクト指向UX
ユーザー像 → シナリオ → オブジェクト化
コンテンツモデル(例)
レビュー
- タイトル
- 本文
- 概要
- 日付
- アイテム --- 名前、概要、価格、発売日、メディア、ブランド
- タグ
- 評価
- 筆者
オブジェクトで考えよう、言葉を合わせよう
いったいどういうコンテンツを設計しようとしているのか?
JOB TO BE DONE
JOB
どの製品・サービスでもお客様に「仕事を与えられている」という考え
ユーザー属性は違う…でも同じ目的がある(20代女性、40代男性でも自分の写真を「知人に共有させたい」)
Facebookの写真機能は知人と一緒に見て楽しむ
ユーザーの動機、求められる結果を突き詰める
- 状況 … レストランで"食べ物"がきた時
- 動機 … 美味しそうな"写真"が撮りたい
- 結果 … いい"場所"を知っていると思われたい・"お店"に来て欲しい…願望
ユーザーインタビュー, 仮設検証
こんな機能はどうだ?こう使って欲しい
↓
ユーザーの求めている結果に対して詰めてゆく!
Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦!
それでは皆さんには殺し合いをしていただきます #html5j_c pic.twitter.com/5GNYv9JDz9
— やまのく (@yamanoku) 2016年9月3日
Sublime Text派なんですが、推しの人がそこまで推しておらずいいかげんにしろって感じだよ(怒る)。WebStormは有料だからすごかった。
Atom
中島 滋 ledsun
マルチプラットフォーム
ユーザー数 100万人 1500万ダウンロード
標準機能
カスタマイズ方法
- エディタ設定
- snippet
- パッケージ4600以上
- テーマ1500以上
パッケージの例
atom-beautify
- コードフォーマッター
hyperclick
- 関数・変数定義へのジャンプ
- 言語毎のサブパッケージ ex:js-hyperclick
やっててよかった話
1 マークダウンで書きたい
- markdown-preview(標準機能)
- 標準機能(ctrl+shift+m)
2 Railsアプリケーションの修正、slim記法をやるとき
3 html文章を組む時全角半角が混ざっている時
- japan-util
- 選択範囲を修正
Sublime Text
こもりまさあき
基本概念
必要最低限の機能だけが搭載されたテキストエディタ
いまどきのGUIエディタの大本
何気にかゆいところに手が届くもの
拡張性の高さ
今はいろんなエディタにも対応されているが…
言語や技術にも素早い対応
今はいろんなエディタにも対応されているが…
すごいSublimeのプラグイン、笑
— .Hiroya◆9/3HTML5conf (@Soten_Bluesky) 2016年9月3日
#html5j_c pic.twitter.com/IF4OSpE475
WebStorm
山本裕介 @yusuke
- JetBrains製のIDE
- 拡張・カスタマイズ不要
- 有料 ¥5,940~
機能例
- Github Isuue検索できる
- ブランチ作成できる
- コミットのブランチをする
- color Pick
WebStormすげぇ! #html5j #html5j_c pic.twitter.com/8NDtqQgbAk
— 山本 裕介 (@yusuke) 2016年9月3日
Visual Studio Code
機能
- エディタ
- Git
- タスク実行
- runtimes
- 拡張機能
ルート起点でcode .で起動
terminal起動してコンパイラーを走らせられる
Nodeや.NET/ASP.NETほかウェブブラウザでの環境でもデバッグできる
Visual Studio Code Extensions | Visual Studio Marketplace
個人的なこととしてはプロスマブラーの人が来ていたり、@Stocker_jpの中の人が目の前の席に座っていたのですげーってなりました。
色々他にもセクションはあったと思うのでそこらへんのまとめは他の人にまかせる。というか普通にセッションスライドまとめとか公式で作って欲しい。
こちらからは以上になります。
XSS対策のセキュアJSについて(基本編)
社内ブログでまとめた内容をこっちでも書いてみる。ただ、フレームワーク使ったりしている中級者以上にはあんま参考にならないと思いますが基本編みたいなノリで御覧ください。
エスケープをする
すぐできる対策であり、割と効果的なものがエスケープ処理です。これは問題を起こしうる特殊文字を文字参照に変換して、実行させないようにする処理です。対応する特殊文字は「&」「<」「>」「”」「’」の5つです。
function escapeHTML(str) { str = str.replace(/&/g, '&'); str = str.replace(/</g, '<'); str = str.replace(/>/g, '>'); str = str.replace(/"/g, '"'); str = str.replace(/'/g, '''); return str; }
ちなみにES6であればテンプレートリテラル(=Template strings)を使用して下記処理もできます。
function escapeHTML() { var raw = String.raw.apply(null, arguments) var safe = raw.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, '''); return safe } var input = "<img src=# onerror=alert(1)>"; var html = escapeHTML`<div>${userinput}</div>`;
テンプレートリテラルの使い方は「`」(バッククオート)で囲むだけです。
URLはhttpおよびhttpsスキーム
URLを取り出し、それをデータとして扱う際に気をつけたいことは、javascriptスキームなど複数のスキームを介在させないために、リンク先がhttp://かhttps://なのかを判断して挿入するようにすることです。
var url = decodeURIComponent(location.href); if( url.match( /^https?:\/\// ) ){ var elm = document.getElementById("link"); elm.setAttribute("href" url); }
javascriptスキームはいわゆるブックマークに登録して便利な機能として使うというのが一般的ですが、それをXSSとして使用されるのを防ぐための策であります。
JSONPの取り扱い注意とJSON.parse
JSONPはクロスドメイン、つまり同一のドメインのデータでなくても引っ張ってこれるもので便利なものではありますが、同時に他者が仕組んだ悪意のあるJSONPデータも入り込む可能性があります。
JSONPをまったく使用するな、ということではないのですが使用する際は信頼のあるデータであることを証明した上で使用するのが吉です。
そしてJSONほか外部データを使用する際は必ず JSON.parse関数 を使用してください。これは文字列を JSON として解析するためのものなので、eval関数だとJSONの中に実行文が紛れていると実行されてしまう恐れがありますので意識して使いましょう。
レンダリングメソッド使用廃止
主に下記のソースになります。これは上述したエスケープ処理がない場合、確実にXSSの標的になり得ますし、この部分を使って悪用されるおそれがあるかもしれないからです。
element.innerHTML = “…”; element.outerHTML = “…”; document.write(…); document.writeln(…);
jQueryに頼り過ぎるな
jQueryはjsライブラリの1つですが、煩雑なコードを容易に記述しやすくして、デザイナーさんにも扱える簡単なもので今も制作会社で広く使用されていると思われます。
実はjQueryでもXSS対策はできるものがあり、それは text() です。受け取る値をテキストデータにエスケープしてくれる代物なのでinputでの入力を即出力するものには適しています。
$('input').on('keyup', function(e){ $('.hoge').text($(this).val()); });
しかしながら、jQuery自身の長所でもあり弱点としても見られる「DOMの直接操作」部分が割とネックとなってきています。つまりDOM操作によるXSSの介入が起こりうる可能性があるのです。
以前のver.1.6では $(location.hash) の脆弱性が指摘されており、要素の検索や作成などを引数の文字列で判断するため、$()内でスクリプトを記載すると#idで指定したものがそのまま要素として判断されることがありました(ver1.6.3にて修正済み)
http://my-web-app/#<img onerror="alert(1)" src="xxx"> $('#<img onerror="alert(1)" src="xxx">') //ハッシュ値で判断すると左の値で取得する //<img>タグで処理されるようになってしまう。
jQuery自身もver3.0の更新(2016年5月)があったように、日々使いやすくかつ脆弱性を潰してきて、簡単な装飾程度であれば使用する面では問題無いかもですが、セキュリティ面を考えた上でwebサイト・アプリに使い続けるというのは難しい選択のようにも思えます。
なのでjQueryのみに頼り続けるのは危ないかも、というのを念頭に置いておくと良いかもしません。(※使用をやめろ!と固く禁じる訳ではないです)
こちらからは以上です。つまりReact.jsについてちゃんとやれということでした。
マテリアルデザインについて学ぶ社内勉強会
初夏のJavaScript祭2016 行ってきた。
個人的には参考になった。jsってやっぱ色々できるんだな。
以下発表順メモなど
node.jsでデスクトップアプリをつくる
@CHIHIRO_KAASAN
仕事中に自動で開発コストをかけずにいろいろできるものをつくる。
- 実行環境の準備
- 猫ファイルを取得
- jsonで保存
- Electronで実施
cheerio-httpcli スクレイピングを実行する。
moduleを呼び出す。ダウンロードする。
画像、自分のほしい文字列を指定してあげる。
npm パッケージをつくろう
@anticyborg
小規模のwebページ、LP制作について
- 製作期間が短い
- html, css, jsも同じような記述が多い
- jsのui実装はだいたい自作・・・
- ライブラリの解析・カスタムにかける時間で作れる
npm パッケージ化でいけそう!
package/${name}
普通に実装してもgulpビルドやBabelでもOK。common.jsスタイルで書くといろいろと楽。
パッケージを使う時
npm i packagename -D
呼び出し方法
- htmlにスクリプトタグ
- gulpfile.jsにconcatする
- main.jsでrequire (browserify)
バージョンの管理:セマンティックバージョニング
APIの呼び出し回数に制限があって困ったのを、SEQ-QUEUEを使ってどうにかした話
@ampersand_xyz
ハッカソンで優勝した作品をローンチすることになった
ハッカソンで使っていたAPIを実際ローンチするために使うのは無理。PUXがAPIを提供。
PUX「APIリクエストは3秒に1回まで」
APIとは?
アプリケーションの機能を利用するための入り口
つまり仕事を頼むのは3秒に1回までね
処理手順
- アップロードファイル受け取り
- iMageMagickでサイズ調整・保存
- APIリクエスト
- APIレスポンス処理
- 一時ファイルの削除
seq-queueはsetTimeoutのように処理時間を調整できる キュー数を取得して処理が多かったらsubmit前に混んでいるかどうかを知らせる
#jsfes pic.twitter.com/XLx3Rdm3lh
— やまのく (@yamanoku) May 14, 2016
JAVASCRIPTでLEAPMOTION事始め
@kuwk
- v1は割と動作が糞
- 2014にv2リリースして、手の動きなどが詳細的になった。
- VR対応までできた
SDKは色々ある
JavaScript SDK Documentation — Leap Motion JavaScript SDK v2.3 documentation
デモの様子
#jsfes pic.twitter.com/XZbSLfFK4j
— mokelab (@mokelab) May 14, 2016
#jsfes pic.twitter.com/uwzgOY4JWQ
— mokelab (@mokelab) May 14, 2016
ES2015の今とこれから
@lion_man44
- ES2015
- ES Next
ES2015, ES6でそれぞれQiitaで検索するとES6のが検索数が多い
ES2015https://t.co/6Dd7uQP7Qf
— やまのく (@yamanoku) May 14, 2016
ES6https://t.co/vgVPTxnYzb#jsfes
ES2015仕様に関する議論
GitHub - tc39/ecma262: Status, process, and documents for ECMA262
ES2015の各ブラウザサポート状況
ECMAScript 6 compatibility table
JAVASCRIPTでデバイス連携してみて出会える技術!広がる知識!
http://www.1ft-seabass.jp/memo/
www.slideshare.net
連携の流れ IFTTT → heroku → milkcocoa
milkcocoaだとjsでリアルタイム通信が開発できる