Design Storyboard (1.1.x)

Easy to building storyboard (for design software)

這是一支，可以協助您用最簡單的方式製作流程表、流程分鏡的小工具

此設計的靈感來自於拍攝影片用的分鏡表

您只要新增一個純文字檔案，用您喜歡的 Editor 書寫，無需複雜語法

即可在彈指之間，將文件內的流程內容輸出成網頁

Design Storyboard

特色 (feature)

用在文字敘述的方式，將複雜步驟流程，變成一個清楚易懂的網頁表格
您可以在裡面加入連結、圖片

以及給您網頁輸出後的樣式調整的空間

此工具可以協助您在設計軟體程式的作業流程或想法時

可避免您在維護 Office Word、Visio、Pages 等各種複雜之文件困擾

另外，您只要使用 Mac OS X 的 Safari/Chrome 也可順利輸出成 PDF 噢

安裝方式 (install)

gem install design-storyboard

確定您的環境有安裝 ruby 2.0 以上，以及有安裝 design-storyboard

最近釋出的穩定版本是 1.1.x 版本

# ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-darwin14]
ruby -v

# Successfully installed design-storyboard-1.1.0
gem install design-storyboard

使用指令 (how to use)

用 Mac 可以用打這個指令，會自動開啟 Safari / Chrome 網頁 (Mac Only)

story build [INPUT_FILE_PATH] --open

若不是或不想預覽，可以用下列的方式來建立

story build [INPUT_FILE_PATH]

若按照下列的範例教學，指定打起來會像是

story build example.txt --open

語法範例教學 (example)

您可以用終端機或電腦上的 editor 來建立這份資料

本教學先用終端機的 cat 指令來建立範本檔案

1. 開啟終端機

# 為了教學方便，先切到家目錄
cd ~

# 按下 cat 指令後，cat 會等您輸入資料，您就在這裡貼上資料
# 貼完後按下 Ctrl+C 離開，cat 指令會幫您存檔案
cat > example.txt

2. 將下列語法範例貼上

==== 前置作業 ====

Step 1:
先將網頁上的語法範例複製下來

  Step 1-2:
    開啟您的編輯器貼上

      nOTe 1-2:
      這裡是備註，Step 跟 note 不分任何大小寫

    Step 1-3:
    然後將檔案儲存起來

      由於本人希望
      您在編輯時的時候容易閱讀
      您可以盡情地使用縮排，讓大家看起來比較舒服

        ^^^^ 1-3:
        這是 note 的另一種語法，只要用 ^^^^ 就可以出現東西

==== Design-storyboard 語法說明 ====

Step 2:
你看到的 Step 或是 note 都有一個編號，這組編號對應的是步驟，因此一定要打
「Step 編號A」或「note 編號A」可以是數字跟連字號(-)

Step 3:
而您到的 ==== 是 headline，表示您這個流程的重點，一個部分的段落只能有一組

  ^^^^ 3:
  使用 headline 記得前後都要加入 ====，否則不會動

Step 4:
我本人有設計兩種語法，方面再讓您建立 Storyboard 的時候可以使用一點連結或圖片

  ^^^^ 4:
  本身有設計輕鬆打功能，所以語法的認定上很寬鬆

  Step 4-1:
   所以，連結可以這樣打
   url:  http://google.com
   url:  http://google.com | title:google
   url:  網址 | title: 連結的標題
   link: 網址 | caption: 連結的標題
   url:  網址

  Step 4-2:
   而圖片可以這樣打
   img:     網址
   images:  網址
   image:   網址
   pic:     網址
   picture: 網址

   ^^^^ 4-2:
   以預設的樣式來說，圖片放在裡面，會自動放大到 100%
   因此您可以修改 CSS 樣式表
   pic: https://help.github.com/assets/images/site/be-social.gif


==== 最後，再補充一下這玩意的 CSS 支援設計 ====

Step 5:
這個程式會自動生出 CSS 語法，放在「release/css/」下
有一組「storyboard.css」檔案，此檔案可以讓您方便修改輸出後樣式

        ^^^^ 5:
        建立過一次這份css後，就不會再建立

    Step 5-2:
    接著你現在看到的網頁，會有幾樣東西會變色
    是因為我對括號做了記號，只要是（ 或 「 或 [ 都有它個別不同的色彩
    你可以自行開啟 css 修改顏色

      ^^^^ 5-2:
        「我是藍色」、(我應該是綠色)、[我應該是紅色]


==== 大致上的說明，差不多是這個樣子，謝謝您的瀏覽 ====

貼完後按下 Ctrl+C 離開，cat 指令會幫您存檔案