コーディングがラクになる！？ “自分仕様”のさくさくコーディング法

1. 千貫りこコーディングがラクになる!? “自分仕様”のさくさくコーディング法 2014.10.29 GAT/COLLEGE

2. 千貫（せんがん）りこ 1997年からWebサイト制作の仕事をスタート 2005年からフリーランスに制作、講師、執筆

3. 今日やること “がんばりどころ”を考える MarkdownとSass 便利なツールいろいろ

4. “がんばりどころ” を考える

5. “がんばりどころ”を考える覚えなきゃいけないこと、たくさん！ホントに必要？

6. “がんばりどころ”を考えるツールやテクニックは一過性のものが多く、いざ使おうと思ったタイミングになったときには、古いアプローチという場合がよくあります（中略）実践するときは、もう一度検索したり確認することになるので、ツールやテクニックは流し見程度。それより中長期にわたって使える知識やアプローチを「何が必要なのか」「なぜ必要なのか」を意識して吸収するようにしています。 http://www.yasuhisa.com/could/article/what-you-need-to-know/

7. 押さえておきたいポイント 1.自動化 2.黒い画面と仲よくする 3.道具を使い分ける “がんばりどころ”を考える

8. 自動化 “がんばりどころ”を考える

9. “がんばりどころ”を考える • ライブリロード • ファイルの結合 • CSSプロパティの並び順整理 • 構文チェック • コードのminify • CSSスプライト生成 • 画像最適化 • FTPアップロード

10. “がんばりどころ”を考える http://gruntjs.com/ http://gulpjs.com/

11. 黒い画面と仲よくする “がんばりどころ”を考える

12. “がんばりどころ”を考えるアプリケーション＞ユーティリティ＞ターミナル.app

13. Ruby https://www.ruby-lang.org/ja/ http://nodejs.jp/ Node.js gem npm “がんばりどころ”を考える

14. 道具を使い分ける “がんばりどころ”を考える

15. “がんばりどころ”を考える Dreamweaver Edge Code Sublime Text Coda

16. http://getkirby.com/ “がんばりどころ”を考える http://www.mamp.info/

17. Markdown

18. Markdownって？ Markdown Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。もともとは読みやすいプレーンテキスト形式の文書をHTML化するために開発された…（後略） Wikipediaより

19. Markdown http://daringfireball.net/projects/markdown/

20. Markdown なぜMarkdown？ • 専門的な知識がなくても編集できる • 文脈を意識したコーディングが可能 • Webサイト制作以外の場面でも使える • ツールに含まれていることがある

21. Markdown Markdownエディタ http://25.io/mou/ http://pad.haroopress.com/

22. 具体的に見てみよう Markdown

23. Markdown 見出し <h1>大見出し</h1> <h2>中見出し</h2> <h3>#小見出し</h3> #大見出し ##中見出し ####小見出し

24. Markdown 段落 Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。　 ⏎ もともとは読みやすいプレーンテキスト形式の文書をHTML化するために開発された。⏎ ⏎ **Wikipedia**より <p>Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。<br>もともとは読みやすいプレーンテキスト形式の文書をHTML化するために開発された。</p> <p><strong>Wikipedia</strong>より</p>

25. - リスト項目1 - リスト項目2 - リスト項目2-1 - リスト項目2-2 - リスト項目3 箇条書き <ul>あ <li>リスト項目1</li> <li>リスト項目2 <ul>あ　 Markdown <li>リスト項目2-1</li> <li>リスト項目2-2</li> </ul>あ </li>あ <li>リスト項目3</li> </ul>

26. |header1|header2|header3| |-------|------:|:-----:| |data1|data2|data3| 表組 Markdown <table> <thead> <tr> <th>header1</th> <th align="right">header2</th> <th align="center">header3</th> </tr> </thead> <tbody> <tr> <td>data1</td> <td align="right">data2</td> <td align="center">data3</td> </tr> </tbody> </table>

27. Markdown リンク [Google](http://www.google.co.jp/) <a href=“http://www.google.co.jp/”>Google</a>

28. Markdown 画像 ![ねこ](img/cat.jpg) <img src=“img/cat.jpg” alt=“ねこ”>

29. Markdown リンク画像 [![ねこ](img/cat.jpg)](http://www.google.co.jp/) <a href="http://www.google.co.jp/"> <img src="img/cat.jpg" alt="ねこ" /></a>

30. Markdown 罫線 - - - <hr>

31. # Webクリエイターに足りない本当のSEOスキル ## 前提 * 生き残るクライアントと取引しないと共倒れになる * 集客にコストを割くのは当然 * インタビューサイトで人脈、人柄、ライティング能力をアピール ## 間違いだらけのSEO ### SEOとは * 検索エンジンからの動線を最適化する * 検索者の意図に沿った情報発信で、情報を探している人々の来訪を促進する * 情報提供によって潜在客にリーチすると同時に、見込み客へと育成する試み * コンテンツや被リンクなど集客のための無形資産を形成する試み * 広告は出稿をやめたらそこでおしまいだが、蓄積されたコンテンツにはトラフィックを生む力になる * ずっと続いていく投資のようなもの ### 検索の目的 * 調べもの（ダントツ） * 検索エンジンは、本来売り込み（セリング）を意図していない * 分からないことを分かるようにするのが効果的 * 商用ワードやセリングページは、楽天メソッド的LPを最適化してリスティング広告で集客が効率的 * 競合がリスティング広告を出している＝もうかっている * 目的のサイトへの移動 * 買い物 Markdown

32. Sass

33. Sassって？「CSSプリプロセッサ」と呼ばれるCSSメタ言語のひとつ。他に、less、Stylusなどがある。 Sass

34. なぜSass（CSSプリプロセッサ）？ Sass • 何度も登場するスタイル（コード）に名前を付けて登録、呼び出して利用 →ソースが簡潔に、見やすい • ボックスのサイズなどを、プログラム処理で自動的に算出 • 複数のファイルを結合したり、改行やインデントを削除したり…… →表示高速化に貢献？ • ツールに含まれていることがある

35. Sass http://sass-lang.com/

36. 1. Macなら「ターミナル」 Windowsなら「コマンドプロンプト」を起動 2. gem install sass 管理者権限が無い場合は、先頭にsudoを付加（sudo gem install sass） 3. 「sass -v」コマンドでSassのバージョンが確認できたら、インストール成功！ Sass Sassのインストール

37. 具体的に見てみよう Sass

38. ul { margin-top: 10px; li { font-size: 12px; a { text-decoration: none; &:hover { color: red; } } Nested Rules } } ul { Sass margin-top: 10px; } ul li { font-size: 12px; } ul li a { text-decoration: none; } ul li a:hover { color: red; }

39. $green: #4D926F; #header { color: $green; } h2 { color: $green; } Sass #header { color: #4D926F; } h2 { color: #4D926F; } 変数名は日本語でもOK！ Variables

40. @mixin kadomaru { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } #header { @include kadomaru; } #footer { @include kadomaru; } Sass Mixin #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }

41. @mixin kadomaru($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } #header { @include kadomaru; } #footer { @include kadomaru(10px); } Sass Mixin（引数） #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

42. コンパイル sass input.scss:output.css Sass sass input.scss:output.css --watch sass scss:css --watch 監視を止めるには Ctrl＋C sass input.scss:output.css --watch --style compact

43. body { color: #000; } body h1{ margin:0 } body { color: #000; } body h1{ margin:0 } body{color:#000} body h1{margin:0} body{color:#000}body h1{margin:0} Sass body { color: #000; h1{ margin:0; } } expanded nested compressed compact

44. 便利なツールいろいろ

45. CSSフレームワーク便利なツールいろいろ汎用性の高いスタイルがモジュール化されており、ユーザーが自由に組み合わせることができる。

46. CSSフレームワーク便利なツールいろいろ http://foundation.zurb.com/ http://compass-style.org/

47. http://getbootstrap.com 便利なツールいろいろ

48. <div id="content" class="row"> <div class="col-md-3"> ... </div> <div class="col-md-9"> ... </div> </div> 便利なツールいろいろ

49. <img src="img/cake.jpg" alt="" class="img-thumbnail"> <img src="img/living.jpg" alt="" class="img-circle"> 便利なツールいろいろ

50. 便利なツールいろいろ <img src="img/living.jpg" alt=“” class="img-responsive">

51. 便利なツールいろいろ <h3><span class="glyphicon glyphicon-leaf"></ span>おいしいケーキでほっと一息</h3>

52. 便利なツールいろいろ <ul class=“list-inline”>あ <li><a href="index.html">ホーム</a></li> <li><a href="menu.html">おすすめメニュー</a></li> <li><a href="access.html">お店へのアクセス</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul>

53. index.html 便利なツールいろいろ <li><a href="index.html" class="btn btn-default">ホーム</a></li> _bootstrap-variables.scss $btn-default-color: #fff; $btn-default-bg: #9c3; $btn-default-border: #990;

54. Static Site Genarator 便利なツールいろいろ静的（static）にWebサイトを生成するためのツール。全ページ分のHTMLがあらかじめ生成されている。動的（dynamic）：要求（HTTPリクエスト）が来たときに、リアルタイムにHTMLを生成する。

55. Static Site Genarator 便利なツールいろいろ http://middlemanapp.com/jp/ http://laktek.github.io/punch/

56. http://jekyllrb.com/ 便利なツールいろいろ

57. http://jekyllthemes.org/ 便利なツールいろいろ

58. まとめ

59. • 便利なツールやサービスは“黒い画面”とセットになっていることが多い →アレルギーをなくそう • “ハブ”になる技術をマスターしよう • まずは試してみよう！まとめ

60. Thank you ! www.facebook.com/rico.sengan

SlideShare for iOS

コーディングがラクになる！？ “自分仕様”のさくさくコーディング法

by Rico Sengan , HTMLコーダ- at ＴＩＳ

on Oct 29, 2014

Statistics

Views

Actions

1 Embed 1

Accessibility

Categories

Upload Details

Usage Rights

Report content

コーディングがラクになる！？ “自分仕様”のさくさくコーディング法 Presentation Transcript