Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

14,734 views

Published on

2014年10月29日、銀座GAT/CALLEGEにて開催されたセミナー資料

Published in: Internet
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 千貫りこ コーディングがラクになる!? “自分仕様”のさくさくコーディング法 2014.10.29 GAT/COLLEGE
  2. 2. 千貫(せんがん)りこ 1997年からWebサイト制作の仕事を スタート 2005年からフリーランスに 制作、講師、執筆
  3. 3. 今日やること “がんばりどころ”を考える MarkdownとSass 便利なツールいろいろ
  4. 4. “がんばりどころ” を考える
  5. 5. “がんばりどころ”を考える 覚えなきゃいけないこと、たくさん! ホントに必要?
  6. 6. “がんばりどころ”を考える ツールやテクニックは一過性のものが多く、いざ使おうと思ったタイミ ングになったときには、古いアプローチという場合がよくあります (中略) 実践するときは、もう一度検索したり確認することになるので、ツール やテクニックは流し見程度。それより中長期にわたって使える知識やア プローチを「何が必要なのか」「なぜ必要なのか」を意識して吸収する ようにしています。 http://www.yasuhisa.com/could/article/what-you-need-to-know/
  7. 7. 押さえておきたいポイント 1.自動化 2.黒い画面と仲よくする 3.道具を使い分ける “がんばりどころ”を考える
  8. 8. 自動化 “がんばりどころ”を考える
  9. 9. “がんばりどころ”を考える • ライブリロード • ファイルの結合 • CSSプロパティの並び順整理 • 構文チェック • コードのminify • CSSスプライト生成 • 画像最適化 • FTPアップロード
  10. 10. “がんばりどころ”を考える http://gruntjs.com/ http://gulpjs.com/
  11. 11. 黒い画面と仲よくする “がんばりどころ”を考える
  12. 12. “がんばりどころ”を考える アプリケーション>ユーティリティ>ターミナル.app
  13. 13. Ruby https://www.ruby-lang.org/ja/ http://nodejs.jp/ Node.js gem npm “がんばりどころ”を考える
  14. 14. 道具を使い分ける “がんばりどころ”を考える
  15. 15. “がんばりどころ”を考える Dreamweaver Edge Code Sublime Text Coda
  16. 16. http://getkirby.com/ “がんばりどころ”を考える http://www.mamp.info/
  17. 17. Markdown
  18. 18. Markdownって? Markdown Markdown(マークダウン)は、文書を記述す るための軽量マークアップ言語のひとつである。 もともとは読みやすいプレーンテキスト形式の文 書をHTML化するために開発された…(後略) Wikipediaより
  19. 19. Markdown http://daringfireball.net/projects/markdown/
  20. 20. Markdown なぜMarkdown? • 専門的な知識がなくても編集できる • 文脈を意識したコーディングが可能 • Webサイト制作以外の場面でも使える • ツールに含まれていることがある
  21. 21. Markdown Markdownエディタ http://25.io/mou/ http://pad.haroopress.com/
  22. 22. 具体的に見てみよう Markdown
  23. 23. Markdown 見出し <h1>大見出し</h1> <h2>中見出し</h2> <h3>#小見出し</h3> #大見出し ##中見出し ####小見出し
  24. 24. Markdown 段落 Markdown(マークダウン)は、文書を記述するための軽量マークアップ 言語のひとつである。  ⏎ もともとは読みやすいプレーンテキスト形式の文書をHTML化するために 開発された。⏎ ⏎ **Wikipedia**より <p>Markdown(マークダウン)は、文書を記述するための軽量マーク アップ言語のひとつである。<br>もともとは読みやすいプレーンテキス ト形式の文書をHTML化するために開発された。</p> <p><strong>Wikipedia</strong>より</p>
  25. 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. 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. 27. Markdown リンク [Google](http://www.google.co.jp/) <a href=“http://www.google.co.jp/”>Google</a>
  28. 28. Markdown 画像 ![ねこ](img/cat.jpg) <img src=“img/cat.jpg” alt=“ねこ”>
  29. 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. 30. Markdown 罫線 - - - <hr>
  31. 31. # Webクリエイターに足りない本当のSEOスキル ## 前提 * 生き残るクライアントと取引しないと共倒れになる * 集客にコストを割くのは当然 * インタビューサイトで人脈、人柄、ライティング能力をアピール ## 間違いだらけのSEO ### SEOとは * 検索エンジンからの動線を最適化する * 検索者の意図に沿った情報発信で、情報を探している人々の来訪を促進する * 情報提供によって潜在客にリーチすると同時に、見込み客へと育成する試み * コンテンツや被リンクなど集客のための無形資産を形成する試み * 広告は出稿をやめたらそこでおしまいだが、蓄積されたコンテンツにはトラフィックを生む力になる * ずっと続いていく投資のようなもの ### 検索の目的 * 調べもの(ダントツ) * 検索エンジンは、本来売り込み(セリング)を意図していない * 分からないことを分かるようにするのが効果的 * 商用ワードやセリングページは、楽天メソッド的LPを最適化してリスティング広告で集客が効率的 * 競合がリスティング広告を出している=もうかっている * 目的のサイトへの移動 * 買い物 Markdown
  32. 32. Sass
  33. 33. Sassって? 「CSSプリプロセッサ」と呼ばれるCSSメタ言 語のひとつ。他に、less、Stylusなどがある。 Sass
  34. 34. なぜSass(CSSプリプロセッサ)? Sass • 何度も登場するスタイル(コード)に名前を付けて登録、 呼び出して利用 →ソースが簡潔に、見やすい • ボックスのサイズなどを、プログラム処理で自動的に算出 • 複数のファイルを結合したり、改行やインデントを削除し たり…… →表示高速化に貢献? • ツールに含まれていることがある
  35. 35. Sass http://sass-lang.com/
  36. 36. 1. Macなら「ターミナル」 Windowsなら「コマンドプロンプト」を起動 2. gem install sass 管理者権限が無い場合は、先頭にsudoを付加(sudo gem install sass) 3. 「sass -v」コマンドでSassのバージョンが確認でき たら、インストール成功! Sass Sassのインストール
  37. 37. 具体的に見てみよう Sass
  38. 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. 39. $green: #4D926F; #header { color: $green; } h2 { color: $green; } Sass #header { color: #4D926F; } h2 { color: #4D926F; } 変数名は 日本語でもOK! Variables
  40. 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. 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. 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. 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. 44. 便利なツールいろいろ
  45. 45. CSSフレームワーク 便利なツールいろいろ 汎用性の高いスタイルがモジュール化されており、 ユーザーが自由に組み合わせることができる。
  46. 46. CSSフレームワーク 便利なツールいろいろ http://foundation.zurb.com/ http://compass-style.org/
  47. 47. http://getbootstrap.com 便利なツールいろいろ
  48. 48. <div id="content" class="row"> <div class="col-md-3"> ... </div> <div class="col-md-9"> ... </div> </div> 便利なツールいろいろ
  49. 49. <img src="img/cake.jpg" alt="" class="img-thumbnail"> <img src="img/living.jpg" alt="" class="img-circle"> 便利なツールいろいろ
  50. 50. 便利なツールいろいろ <img src="img/living.jpg" alt=“” class="img-responsive">
  51. 51. 便利なツールいろいろ <h3><span class="glyphicon glyphicon-leaf"></ span>おいしいケーキでほっと一息</h3>
  52. 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. 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. 54. Static Site Genarator 便利なツールいろいろ 静的(static)にWebサイトを生成するためのツール。 全ページ分のHTMLがあらかじめ生成されている。 動的(dynamic): 要求(HTTPリクエスト)が来たとき に、リアルタイムにHTMLを生成する。
  55. 55. Static Site Genarator 便利なツールいろいろ http://middlemanapp.com/jp/ http://laktek.github.io/punch/
  56. 56. http://jekyllrb.com/ 便利なツールいろいろ
  57. 57. http://jekyllthemes.org/ 便利なツールいろいろ
  58. 58. まとめ
  59. 59. • 便利なツールやサービスは“黒い画面”と セットになっていることが多い →アレルギーをなくそう • “ハブ”になる技術をマスターしよう • まずは試してみよう! まとめ
  60. 60. Thank you ! www.facebook.com/rico.sengan

×