誰もあなたには興味がない、恥をかいた分だけ幸せになろう 「多動力」 堀江貴文
- 作者: 堀江貴文
- 出版社/メーカー: 幻冬舎
- 発売日: 2017/05/27
- メディア: 単行本
- この商品を含むブログ (3件) を見る
メモ
- 車輪の再発明をしないように気をつける
- 三つの肩書きを持てば1/100万。 一万時間→1/100。 仕事を掛け算するときは遠く離れてるものを掛け合わせた方が希少性が高まる。
- 全部自分でやらなければならないという思い込みをしていては多くの仕事をすることはできない、自分がもっとも力を発揮できる仕事だけをやろう
- やりたいことはやりたいときに全部やり倒す習慣をつける
- 恥をかいた分だけ自由になれる
- 資産が人をダメにする。 自分が持っているものをなんとか生かそうとすることであなたの動きは遅くなる、手持ちのカードを捨てやりたいことに最短距離で行こう hogeをしたい→hogeが必要 が重要であり hogeをもっている→hogeをしないともったいない というのはよくない
- 予定調和の幸福を求める人生はつまらない、未体験の予定を詰め込んでみたことのない景色を見よう
感想、所感
ホリエモンはどの本でも一貫して、「やりたいことを今すぐやれ」ということしか言ってない気がする。すべてはそこから始まると
実際にできること
- [ ] 一万時間がどのくらいなのか、年で計算する
- [ ] 抱えているタスクをすべて書き出す
- [ ] やらないタスクをやらない方法を考える
- [ ] どんな形でもいいからアウトプットをする
- [ ] 一日24時間をこと細かに書き出す
- [ ] その中でワクワクしないことをやめる
- [ ] 会うことがワクワクしない人は次会うので最後にする
- [ ] 受けない仕事リストを作る
- [ ] 退社時間を早めることで効率的に仕事を終わらせられるようにする
- [ ] 同じような予定を過ごさない、土日の予定を考える
あきらめない強い精神とは、まるで実態のない「できる」という呪文を頭のなかで反復する行為 「図解モチベーション大百科」
動機付け
- キャンディ効果 メンバーのいい気分を作る 作業捗る
- ご褒美の効果は二ヶ月
- 自問式セルフトーク 断定よりも疑問の方が答えとモチベーションを引き出す助けになる
- 日記に自分にとって今一番大切なことは何か、その価値に結びつくどんな行動をとったか書いてもらう、自分の価値観を思い出すと自信が強まり、周りの人に対する愛情が深まる
- 自発的な行動に対してご褒美を与えると内発的動機づけが損なわれる
- なんの見返りも意義も生産性もないからこそ良い
- やりたいことは手順を減らし、やめたいことは手順を減らす
- 他人の比較よりも自分の成長度合いによって評価された方が人は努力しやすい、前と比べてどうだったかを評価規準にする、客観的理由でやらない
- インセンティブは成功したらあげるより、失敗したら取り上げる方が効果がある。基本的には安定や現状維持をめざしながら生きている
人をうごかすものは最終的には6つしかない
- 安定感
- 変化(不安定感)
- 重要感
- つながり
- 成長
- 貢献
人材育成
- 人の考えは理由をたずねると強化され、目的をたずねると軟化する傾向がある
- 他人の言葉遣いに引っ張られず自分らしい言葉を使おう
- やりたくないことはどうしたらやりたくなるかを考えよう
- 存在にむすびつけて褒めた方が意識の深いところに影響を与える
- 人は自分と主義が似ているけど考えを徹底していない人のことを嫌う傾向がある
- 仕事のずっと先を想像する、今自分が取り組んでいる仕事が社会にどんな風に役立つかを考えるとモチベーションが上がる
- ダメだったものをまた試す、つまり何度か失敗したというだけでうまくいく可能性が残されているのにも関わらず私たちはいともたやすくあきらめやすい
目標設定
- 人は求められた以上のことはしない傾向にあるが、具体的で難しすぎず、受け入れられるレベルの目標を提示されるとやる気をだす、いつでもだれでも同じように解釈できる具体的なもの
- 競争心ではなく、あなたならできると向上心をあおる
- 信頼関係を築くには一緒に楽しいことをするより、協力が必要な場面を共有した方が信頼関係が芽生えやすい
- 目の前で起きている出来事そのものが、ラッキーかアンラッキーか決めているわけではなく、結果はその出来事に対して、どういう意味づけをするのかによって変化する
- 人は期限が見えないと集中できない
- 理由を考えると行動力が鈍り、何をすべきかに意識を向けると具体的な行動をしやすくなる
- 守らないと他人にどういう影響があるかを伝えよう
- 自分の作業日数は楽観的に見積もりやい
- 自分のこととなると安定志向になるが他人のことになると「なにをすれば後悔しないのかわかる」
- エクササイズは2/3で疲れると予想する(コーチに10回やれと言われたら、15回くらいだと思うことにする)
意思決定
- プロスペクト理論、得るものか失うものか話の順番によって選びたいものが変わる傾向がある
- 得られるものは何かにフォーカス→リスクのある選択肢を避ける、失うものは何かにフォーカス→多少のリスクをとってもいいと考えるようになる
- 穏やかに快適に暮らす幸せもある。あとで振り返った時にあのときは大変だったけど、良い経験だったと思える方が脳はより幸福を感じる。
- 自分の作業計画書を作る、必要なものをあたまで覚えていると必要以外のものも買ってしまいやすくなる、必要なものを紙に書いておけば衝動買いは減る、これは一日の予定も同様、朝一番に今日やることを紙に書いて、デスクの一番目立つところに貼っておく、シチュエーション別にやることを決める。休日も同様。
- 決定を先延ばしにすることによって自分にとって最適な答えを見つけやすくなる
- 常識はずれなものごとからはじめると独創的なアイデアがうまれやすい
OOCEMR
- OUTCOME 何を差し置いても得たい結果を明らかにする
- OPTION 選択肢を出し続けること
- CONSEQUENSE なんでもいいからとにかく結果を出すこと
- EVALUATE 得たい結果にどれだけ近づいているかを評価する
- MITIGRATE マイナス面を減らすこと
- RESOLVE 締め切りをつくること
自己管理
- 疲れているときほど、動作を大きくゆっくりにしよう
- 背中を丸めるとストレスのホルモンが出る
- 事前に考えすぎたり、分析しすぎたりすると行動力が鈍っていく
- やりたくないことをするたびに自制心が減っていき、感情的になり、目の前の出来事に流されやすくなる
- 交互練習は集中練習と比べて、理解しづらく、成果も実感しにくいが、長期記憶の役にたつ
- 自分でコントロールできることがあると、幸せで健康的な生活を維持できる
- ポジティブな空想は人をリラックスさせると同時に人の行動力を奪う可能性がある
発想転換
- あきらめない強い精神とは、まるで実態のない「できる」という呪文を頭のなかで反復する行為
- 自分が直面している問題より他人が直面している問題の方が答えを見つけやすい
- ピンチはチャンスというが、はじめからどこにでもチャンスはあるもの、ただピンチに没頭しているとチャンスが目の前を通っても気づけない
- 仮定で考えるよりそうなった前提から考えた方が、発想が膨らみやすい
感想、おもったこと
- 今回はメモしなかったが、人を巻き込む・仕事をしてもらう方法もたくさん書いてあったので、たくさんのひとに仕事を振るような立場になったら、もう一度読み返したい
- モチベーションで大事なのは他人ではなく自分がどのくらい成長したか
- 物事を具体的にすれば行動につながる
- 期限とかを月単位のもの、週単位のもの、日単位のもの、三時間単位のもの、この30分間というように細かいものにしておくと、すぐに期限がせまってくるので、行動しやすくなる。結局だらだらまだ大丈夫というのは期限が先にあるからであって、常に期限が迫っている状態であれば、ケツに火がついてるどころか、ケツにロケットエンジンつけてるくらいのスピードで仕事できるのではないか。それはあと少し、あと少しと思い続けることによって工夫や行動の回数が増える。そしてその積み重なった達成感が自信に変わり、最終的にでかいことができる
- プロスペクト理論はちょっと物事の言い方を変えるだけで、行動を促しやすくなるのでいいと思った。(リスクをとる選択肢を取って欲しかったら失うものは何かにフォーカスすればよい)
- だれかに夢を語って気持ちよくなっていたらその時点でリラックスしてしまっているので、早くオフィスに帰って仕事をしましょう
具体的に実践できること
- [ ] 今はポモドーロ効果を狙って、25分単位で作業をしているが、期限が細かく設定されていなかったので、二時間単位とかでの細かい目標もたてて、作業をする
- [ ] 自分が取り組んでいる作業が自分のまわりの人、それよりもっと多くの人にとってどういう影響を与えているかを考える
- [ ] すべてがうまくいったとしてどれくらいまでいけそうかを基準に目標を立てる
- [ ] 二ヶ月後にご褒美を用意する
- [ ] 自分が投下できると思った時間に2/3をかけて時間を割り出す
- [ ] 普段の会話の中でプロスペクト理論を使う
- [ ] 更新していないやりたいことリストを更新する
- [ ] 前日の夜疲れている時間に次の日にやることを紙に書き出す
- [ ] シチュエーション別にやることリストを作っておく
- [ ] もう絶対に行かない授業を決める
- [ ] 重要なこと(その課題の解決方法・実装方法など)は休憩を挟んでから決める
- [ ] 人とは違う視点で物事を見るため、スケボーに引き続き乗り続ける
- [ ] 飽きたらすぐ他の技術書・記事・リファレンスを読む
- [ ] 夢を語ったら、夢が覚める前に現実に向けた一歩をふむ
- 作者: 池田貴将
- 出版社/メーカー: サンクチュアリ出版
- 発売日: 2017/06/12
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
pryについて
今まで
- rubyのドキュメント( http://ref.xaio.jp/ruby )とかでそれっぽいメソッドを探していた。しかもこのドキュメントよく見たら、1.9くらいだった笑
- 検証したいときは、適当なとこにbinding.pry書いて、無理やりインタープリターを起動して検証したりしていた。
pryのちゃんとした使い方を知って
MacBook-Pro:~ hogehoge$ pry [1] pry(main)> cd String [2] pry(String):1> ls String.methods: try_convert String#methods: % [] casecmp? concat each_codepoint getbyte length ord rstrip slice succ to_str unpack1 * []= center count each_line gsub lines partition rstrip! slice! succ! …… …… …… …… locals: _ __ _dir_ _ex_ _file_ _in_ _out_ _pry_ [3] pry(String):1> show-doc upcase From: string.c (C Method): Owner: String Visibility: public Signature: upcase(*arg1) Number of lines: 6 Returns a copy of str with all lowercase letters replaced with their uppercase counterparts. See String#downcase for meaning of options and use with different encodings. "hEllO".upcase #=> "HELLO" [4] pry(String):1> hoge = "hoge"; [5] pry(String):1> hoge.upcase! => "HOGE" [6] pry(String):1> hoge => "HOGE"
みたいな感じで単純にメソッド探して、確認できるみたいな便利なことができると知りました。無知ですいませんでした。
[5] pry(main)> help
とやると他にも便利なメソッドがたくさんありそうです。
今流行りのdockerで使うには??
$ docker-compose run --service-ports hoge
Run command with the service’s ports enabled and mapped to the host.
だそうです。
所感
ここら辺のserviceportとかとか、pryとかirbがどんな感じで動いてるかとかあまりわからないので、勉強しないと。
参考リンク
rubyで最近へーと思った箇所まとめ
- 右辺が , 区切りで複数ある場合には配列に変換される
a = 1, 2 => [1, 2] a.class => Array
- 右辺の要素の残り全部を配列として受け取ることもできる
a, *b = 1, 2, 3 => [1, 2, 3] a.class => Integer b.class => Array
- 全部捨てる←これは笑った
[11] pry(main)> * = 1, 2, 3 => [1, 2, 3]
- hashは通常、一つの値として代入されるが、* をつけると Hash#to_a されて多重代入できるようになる
a = { a: 1, b: 2 } => {:a=>1, :b=>2} a => {:a=>1, :b=>2} a, b = { a: 1, b: 2 } => {:a=>1, :b=>2} a => {:a=>1, :b=>2} b => nil a.class => Hash b.class => NilClass a = *{ a: 1, b: 2 } => [[:a, 1], [:b, 2]] a.class => Array a => [[:a, 1], [:b, 2]] a, b = *{ a: 1, b: 2 } => [[:a, 1], [:b, 2]] a.class => Array a => [:a, 1] b => [:b, 2] b.class => Array
- FixnumクラスとBignumクラスがIntegerクラスに統合された いつもこのwarningが出てて、その原因がわかってすっきり
/app/vendor/bundle/ruby/2.4.0/gems/middleman-core-4.1.10/lib/middleman-core/sitemap/resource.rb:88: warning: constant ::Fixnum is deprecated /app/vendor/bundle/ruby/2.4.0/gems/sprockets-3.7.0/lib/sprockets/digest_utils.rb:47: warning: constant ::Fixnum is deprecated /app/vendor/bundle/ruby/2.4.0/gems/sprockets-3.7.0/lib/sprockets/digest_utils.rb:51: warning: constant ::Bignum is deprecated /app/vendor/bundle/ruby/2.4.0/gems/sprockets-3.7.0/lib/sprockets/processor_utils.rb:110: warning: constant ::Fixnum is deprecated /app/vendor/bundle/ruby/2.4.0/gems/sprockets-3.7.0/lib/sprockets/processor_utils.rb:111: warning: constant ::Bignum is deprecated /app/vendor/bundle/ruby/2.4.0/gems/concurrent-ruby-1.0.2/lib/concurrent/map.rb:206: warning: constant ::Fixnum is deprecated
- sumメソッド、引数で初期値変更、アルゴリズム的に、+より誤差が少ない、少数は誤差発生
[0.1, 0.1, 0.1].sum => 0.30000000000000004 ['foo', 'bar'].sum('') => "foobar" [[1, 2], [3, 1, 5]].sum([]) => [1, 2, 3, 1, 5]
- 2.3.0~ digコマンド
h = { foo: {bar: {baz: 1}}} => {:foo=>{:bar=>{:baz=>1}}} h.dig(:foo, :bar, :baz) => 1 h.dig(:foo, :zot, :xyz) => nil
From: hash.c (C Method): Owner: Hash Visibility: public Number of lines: 9 VALUE rb_hash_dig(int argc, VALUE *argv, VALUE self) { rb_check_arity(argc, 1, UNLIMITED_ARGUMENTS); self = rb_hash_aref(self, *argv); if (!--argc) return self; ++argv; return rb_obj_dig(argc, argv, self, Qnil); }
From: array.c (C Method): Owner: Array Visibility: public Number of lines: 9 VALUE rb_ary_dig(int argc, VALUE *argv, VALUE self) { rb_check_arity(argc, 1, UNLIMITED_ARGUMENTS); self = rb_ary_at(self, *argv); if (!--argc) return self; ++argv; return rb_obj_dig(argc, argv, self, Qnil); }
- &. safe navigation operator nilでもNoMethodErrorにならずにnilを返してくれる
[18] pry(main)> str = nil => nil [19] pry(main)> str.upcase NoMethodError: undefined method `upcase' for nil:NilClass from (pry):10:in `__pry__' [20] pry(main)> str&.upcase => nil
所感
参考リンク
- http://qiita.com/yancya/items/c557864f307d429bbde4
- http://qiita.com/jnchito/items/9f9d45581816f121af07#%E3%81%82%E3%82%8F%E3%81%9B%E3%81%A6%E8%AA%AD%E3%81%BF%E3%81%9F%E3%81%84
- http://mitrev.net/ruby/2015/11/13/the-operator-in-ruby/
- https://docs.ruby-lang.org/ja/latest/method/Hash/i/dig.html
- https://docs.ruby-lang.org/ja/latest/doc/news=2f2_3_0.html
- http://qiita.com/jnchito/items/0faac073cb77417d61c7#nil-%E3%81%A7%E3%82%82%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%81%8C%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84-safe-navigation-operator
HTML5のいろいろ
7つの「○○ウェブ」
オフライン
- アプリケーションキャッシュ
- Web Storage
- Indexed Database API
- File API
リアルタイム
- WebSocket
- Server-Sent Events
- WebRTC (Web Realtime Communication)
スピーディ
- SPDY
- HTTP/2.0
- オフライン技術
レスポンシブ
- CSSメディアクエリ
- レスポンシブ・イメージ
- グリッドレイアウト
インプレッシブ
プラットフォーム
デバイス固有の機能にアクセスすることも可能に
- 位置情報の取得
- カメラ・マイクにアクセス
- 音声によるテキスト入力
- デバイスの向きや傾きを取得
- 温度や光、近接センサー
- バイブレーション
- アドレス帳、ギャラリーへのアクセス
セマンティック
- HTML5 Semantic Elements
- HTML5 Microdata
- RDF/RDFa/RDFa Lite
- Microformats
webアプリvsネイティブ
Webアプリに足りないものと、その現状
デバイスの機能を使い切れない
- 仕様と実装の両面で強化が図られている
- SysApps WG / Chrome Packaged Apps /PhoneGap…
速度が遅い# HTML5について
7つの「○○ウェブ」
オフライン
- アプリケーションキャッシュ
- Web Storage
- Indexed Database API
- File API
リアルタイム
- WebSocket
- Server-Sent Events
- WebRTC (Web Realtime Communication)
スピーディ
- SPDY
- HTTP/2.0
- オフライン技術
レスポンシブ
- CSSメディアクエリ
- レスポンシブ・イメージ
- グリッドレイアウト
インプレッシブ
プラットフォーム
デバイス固有の機能にアクセスすることも可能に
- 位置情報の取得
- カメラ・マイクにアクセス
- 音声によるテキスト入力
- デバイスの向きや傾きを取得
- 温度や光、近接センサー
- バイブレーション
- アドレス帳、ギャラリーへのアクセス
セマンティック
- HTML5 Semantic Elements
- HTML5 Microdata
- RDF/RDFa/RDFa Lite
- Microformats
webアプリvsネイティブ
Webアプリに足りないものと、その現状
デバイスの機能を使い切れない
- 仕様と実装の両面で強化が図られている
- SysApps WG / Chrome Packaged Apps /PhoneGap…
速度が遅い
- 限界突破のための様々な取組み
- asm.js / NaCl / PNaCl / Dart…
- 一般的な用途では遅くない?
- Fastbook
アプリストア的な導線がない
- 各社による様々なアプローチ
- Webアプリならではの導線があるのは強み
UIコンポーネントや開発環境の不足
- Web Componentsには注目!
- Adobe Edge Tools & Servicesを筆頭に、開発環境も整いつつある。
感想# HTML5について
7つの「○○ウェブ」
オフライン
- アプリケーションキャッシュ
- Web Storage
- Indexed Database API
- File API
リアルタイム
- WebSocket
- Server-Sent Events
- WebRTC (Web Realtime Communication)
スピーディ
- SPDY
- HTTP/2.0
- オフライン技術
レスポンシブ
- CSSメディアクエリ
- レスポンシブ・イメージ
- グリッドレイアウト
インプレッシブ
プラットフォーム
デバイス固有の機能にアクセスすることも可能に
- 位置情報の取得
- カメラ・マイクにアクセス
- 音声によるテキスト入力
- デバイスの向きや傾きを取得
- 温度や光、近接センサー
- バイブレーション
- アドレス帳、ギャラリーへのアクセス
セマンティック
- HTML5 Semantic Elements
- HTML5 Microdata
- RDF/RDFa/RDFa Lite
- Microformats
webアプリvsネイティブ
Webアプリに足りないものと、その現状
デバイスの機能を使い切れない
- 仕様と実装の両面で強化が図られている
- SysApps WG / Chrome Packaged Apps /PhoneGap…
速度が遅い
- 限界突破のための様々な取組み
- asm.js / NaCl / PNaCl / Dart…
- 一般的な用途では遅くない?
- Fastbook
アプリストア的な導線がない
- 各社による様々なアプローチ
- Webアプリならではの導線があるのは強み
UIコンポーネントや開発環境の不足
- Web Componentsには注目!
- Adobe Edge Tools & Servicesを筆頭に、開発環境も整いつつある。
感想
一概にwebといっても色々なものがあるのだと感じた。また今後webがどういう風になっていくのか気になる。
参考リンク
- https://www.slideshare.net/shumpei/toka39
- こういうの作りたくなりました!!面白い!!VRとかたいそうなものじゃなくてもブラウザでもいいから空飛んだりしたい!! www.ro.me
- https://www.w3.org/TR/html5-diff/ 一概にwebといっても色々なものがあるのだと感じた。また今後webがどういう風になっていくのか気になる。
セマンティックHTML
セマンティックHTMLとは
セマンティックHTMLとは、作成者がたくさんの労力を払って、マークアップによってコンテンツの編成と構成を実現するHTMLのことで、働きに合わせた正しい要素やタグを使用する。
例)<p>タグや<h1>タグがコンテンツに関する追加的な情報を伝える。これらのタグはそれぞれ、「これは段落」、「これは第1レベルの見出し」という情報を持つ。
議論に上がること
コードの軽量化
CSSでスタイル設定するセマンティックHTMLは、一般的に、テーブルでフォーマット設定するHTMLよりも、必要とするコードが少なくなります。ただし、テーブルを利用しない非セマンティックHTMLを記述できる点は注目に値します。これでもコードのサイズが小さくなる可能性はありますが、簡単に理解できるコードにはならないでしょう。
ここの記述があまり理解できなかったです。
アクセシビリティ
障害を持つユーザーがサイトを実行しやすくなる。ページの部分を、タイトル、見出し、段落、およびリストとして適切にラベル付けすると、スクリーンリーダーなどの補助的なテクノロジーによって解析し、障害を持つユーザーが理解できる形態でコンテンツを表示することが簡単になる。 ただしアクセシビリティ対応サイトの構築が少し簡単になる程度。
検索エンジン最適化
セマンティックHTMLは、ソフトウェアによるサイトのコンテンツの解析を簡易化することによって、検索エンジン最適化(SEO)を向上させる傾向がある。検索エンジンは、HTMLファイルに含まれるHTMLテキストをスキャンするが、CSSのレンダリングは行わず、JavaScriptも実行しない。したがってHTMLに重要なコンテンツを含めない場合、検索エンジンがそのコンテンツに触れることはないため、ランキングされることはない。また、ページからHTMLのゴミが取り除かれ、コンテンツを説明するマークアップのみが残ることで、検索エンジンがより簡単にサイトの本来の内容に近づけるようになる。
ホワイトハットSEO
Google検索エンジンが推奨する検索ルール(アルゴリズム)に従い、自分のホームページやブログを検索エンジンのランキング上位に表示させるために行うさまざまな検索エンジン最適化手法や技術
ブラックハットSEO
Googleが定めるガイドラインに反し、アルゴリズムの穴を突いて不正に検索順位を上昇させるための手法
セマンティックHTMLがSEOに適しているという保証はない。Web開発者は、検索エンジンがセマンティックHTMLを支持すると考えています。Googleが進めるHTML5への投入量は、その考えを示唆しているが、検索エンジンは、そのアルゴリズムを厳密に保護しているため、非セマンティックHTMLに関連性の高いコンテンツを持たせる可能性も残しておく必要がある。
再利用
意味付けがされているので再利用できる
開発者の理解力
セマンティックHTMLを使用することで、ほかの開発者やHTML作成者にとっては、コードで実行される内容を理解しやすくなる
HTML5におけるセマンティックの実際
具体的な要素の解説、使い方
セクション
セクションとは、文書を"論理的に"分割した単位のこと ex)
- 章、節、項…
- メニュー、本文、サイドバー…
- ページ、ダイアログ…
具体的には以下の四つ
<section> 汎用的なセクションを表す要素 <article>/<aside>/<nav>以外のセクションは全て<section> <article> 独立した「本文」として取り扱うことが可能なセクション。 そのセクションをRSSリーダーで全文配信しても意味が通るならばarticle <aside> ページの他の部分と「あまり関連がない」(=重要度が低い)セクション。 ex) 広告やサイドバーガジェット そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら、aside <nav> サイト内の「主要な」ナビゲーションメニューを表す。 内部に<ul>と<a>を用いてリンク一覧を作るのが基本。 <nav>の部分のみが「メニュー」として提示された場合に、ユーザにとって便益があるかどうかで考える。
そのセクションをRSSリーダーで全文配信しても意味が通るならば→article そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら→aside
セクションとアウトライン
https://gyazo.com/5f21762b891783026c2b4800c50aeb05
セクションの階層構造が文書のアウトラインを構成する。つまり、セクション要素の利用=アウトライン操作。
HTML5Outlinerを使うと、HTMLからアウトラインを抽出できる。
<h1>This is a section</h1> <section><h1>And this a subsection!</h1></section>
1.This is a section 1.And this a subsection!
セクションに関連する要素
- 見出し要素(h1〜h6,hgroup)
- 見出し要素(h1〜h6)は、セクションの見出し、という意味を与られている。
- 見出しのランクはセクションごとにリセットされる。
- 基本的には、h1のみを使うべし!
- セクション要素は、常に見出しとセットだと考えるべし。
- 原則的には、1セクション1見出し
<body> <h1>もうすぐ絶滅するという紙の書物について</h1> <section> <h1>序文</h1> ... </section> <section> <h1>本は死なない</h1> … </section> </body>
<body> <hgroup> <h1>HTML5&API入門</h1> <h2>キャンバス、VideoからWebSocketまで</h2> </hgroup> … </body>
- セクションルート(body/blockquote/details/fieldset/figure/td) body/blockquote/details/fieldset/figure/tdといった要素はセクションルートと呼ばれ、独立したアウトラインを構築する
<body> <hgroup> <h1>HTML5&API Start Guide</h1> <h2>Canvas,Video,WebSocket,etc.</h2> </hgroup> <section> <h1>HTML5 Overview</h1> </section> </body>
- ヘッダ、フッタ(header/footer)
<header>、<footer>要素は、セクションのヘッダ、フッタを表す これらにどんな要素を含めるかは自由だが、一般的には見出し要素を<header>に入れる
暗黙のセクション
- 明示的なセクションなしに見出し要素を使用すると、暗黙セクションが生成される。
- 暗黙セクションは推奨されない。
<body> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h2>H2 again</h2> </body>
<body> <section> <hgroup> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> </hgroup> </section> <section> <h2>H2 again</h2> </section> </body>
その他
- time要素
- 日付、時刻を表す要素。
- タグのtextContent、もしくはdatetime属性で日時を表すことができる。
- 日時のフォーマットはISO8601形式
- pubdate属性がtrueの場合、親となるbody/article要素の「公開日時」を表す。
<time datetime="2011/08/24T10:13:24.123+09:00"> 2011年8月24日 10時13分 </time>
- address要素
- 親となるbody/article要素の「問い合わせ先アドレス」を表す。
<address> <a href=http://twitter.com/Shumpei> Shumpei Shiraishi </a> </address>
練習
スライドの最後の部分のdiff https://github.com/tenshotanaka/markup_excersize/pull/1
結論
セマンティックHTMLで書いた方がよい
今日の名言
- 分け入っても分け入ってもdiv
- エンジニアがマークアップに意味を吹きこむ
参考リンク
- http://www.adobe.com/jp/devnet/html5/articles/semantic-markup.html#articlecontentAdobe_numberedheader_3
- http://progressive.hatenablog.jp/entry/2017/06/02/120540
- https://www.slideshare.net/shumpei/html5-9013839
- http://www.htmq.com/html5/
- https://gsnedders.html5.org/outliner/
- https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
- https://www.w3.org/TR/html5-diff/
Semantic Versioningについて、感動しました!!
今までバージョンとかテキトーにあまり気にせずいたが、このたび上司のTにプルリクで言われて、勉強になったので記事にしました。
rubyとかいろんな言語やらライブラリにあるx.y.z、rubyの安定版は2.4.1かな(今2017/6/2)とかはフォーマットがあって、決められていた。(そりゃ当たり前だろってはなしかもしれないが笑)
自分の中の参考リンクを読んだ感じのイメージは、xがアプリが前のバージョンから大きく変わった場合(いわゆる互換性がない)で、機能追加はyで、バグ修正はzみたいな感じで、たまに段階によって、releaseってついたりするみたいなイメージになっている。
詳しいことは下記リンク参照。
qiitaの参考記事はすごくわかりやすかった。整形記事のやつ。
あとsemanticって意味って意味らしい。
最近semantic htmlとかも勉強しているので近々アウトプッとしようと思う。