這篇文章是我這兩週瘋狂旅程的總結。我把老婆熱愛的遊戲靈感，轉化成了帶領玩家走入《銀河鐵道之夜》世界的實體冒險。在 AI 的領航下，我用 Flutter 完成了跨平台手遊開發，並在岩手縣的地圖上撒下了宮澤賢治的記憶碎片。我想分享的不只是技術操作，更多的是在 AI 協助下，一個非工程師如何找回實現創意的自由。
【開發心得】與 AI 奮戰兩週：宮澤賢治主題實地解謎手遊上架實錄
發佈留言
分類彙整: 程式設計
批次編輯商品屬性
WooCommerce 後台清單頁，上方可用分類/標籤篩選；提供母子式下拉選單，批次為勾選商品加入指定屬性與屬性項目（若無該屬性則先建立並排在最後）。列表移除SKU欄位；每個全域屬性各自成欄顯示；屬性類別以 slug 升冪排列；欄位標題可換行；外層視需要允許水平滾動。
閱讀全文
全部商品管理篩選頁面
再全部商品的管理頁面，可以用標籤篩選商品。
閱讀全文
項目符號的形式
order list的項目：
- none ( 沒有符號 )
- cjk-ideographic ( 一、二、三 )
- decimal ( 1、2、3 )
- decimal-leading-zero ( 01、02、03 )
- lower-alpha ( a、b、c )
- upper-alpha ( A、B、C )
- lower-roman ( i、ii、iii )
- upper-roman ( I、II、III )
- initial
語法：
1 | <ol style="list-style-type:upper-alpha"> |
unorder list的項目：
- disc
- circle
- square
- none
1 | <li style="list-style-type: circle;"> |
部落格顯示奇怪的頁面？可能是電信業者或瀏覽器搞的鬼！
最近我的部落格有篇文章點閱率很高，但緊接而來的是這篇文章開始顯示奇怪的頁面。例如我明明用桌上電腦瀏覽，卻出現手機頁面，而且切不回來。還有我更新文章內容，網頁卻沒有更新。由於這樣的症狀和快取（cache）應該很有關係，但我卻找不到是誰「快取」了我的網頁。在網路上找了很久，發現最可能的「兇手」就是電信業者，以及我的Chrome瀏覽器。
根據網路情報顯示，部分電信業者會主動快取部分熱門內容，甚至會主動「最佳化」網頁內容，導致使用者看到奇怪的頁面。另外，Chrome瀏覽器有個Google Web Light的功能，可以降低資料傳輸量，但是當然也會對網頁內容作手腳。身為網路內容的提供者，我當然不希望使用者看到不合適的頁面排版。
解決方法如下（參考網頁）：
1.在網頁的header區域（或是wordpress的header.php）加入
1 2 3 | <?php header("Cache-Control: no-transform"); ?> |
或是
2.在主機資料夾的 .htaccess檔案內加入
1 2 3 | <IfModule mod_headers.c> Header set Cache-Control "no-transform" </IfModule> |
可以避免網頁被快取或是動手腳。
2016.06.18更新
測試過之後，還是有點狀況，我又做了以下的處置：
1.清除瀏覽器本身的快取
2.把Jetpack的功能都關閉（如果有安裝Jetpack的話）
下載 F4M 格式網路影音片段檔案 Adobe HDS
如果利用Chrome下載網路影音的好幫手，GetThemAll Video Downloader，去下載TBC台灣寬頻網路新聞的影音檔時，會下載到很多個附屬檔名像mp4Seg1-Frag3這樣的檔案，而且播放程式打不開。原來這類影音檔是利用Adobe HDS技術把flv檔切成段落，如果利用Bigasoft Video Downloader Pro雖然號稱可以拼接這些影片片段，但我拼起來卻只有影片前半段，只好放棄。
網路上有網友自己寫了一個php的程式，一行指令就可以把影片段落一次下載、拼接完成。不過需要一些前置作業，加上需要用到指令模式，對於沒有圖形界面就不會操作的人有點困難，所以我盡量想辦法讓步驟更簡單。
簡單版本：
1.前往想要下載影片的網站（以http://www.tbc.net.tw/News/NewsDetail?id=0556d332-9bd5-4588-acf4-f93cdaada24a&newsType=4為例）。
2.檢視網頁的原始碼（Chrome的操作：網址欄右側最右邊選單按鈕→更多工具→開發人員工具→Source頁籤），找到一個附屬檔名是f4m的檔案網址（以前一步驟網站為例，找到網址為：http://media.tbc.net.tw/hds-vod/cctv/201604/08-05.mp4.f4m）。
3.下載這個檔案，裡面有PHP 5.5 32bit的主程式（原始來源），PHP的設定檔（原始來源），和下載影片用的程式（原始來源），最後還有我寫的簡易執行檔（run.bat）。
4.解壓縮上面那個檔案。
5.用滑鼠右鍵點選run.bat（或是只看到run）這個檔案，選擇編輯，把檔案中用雙引號包起來的f4m檔網址替換成你要下載影音檔的f4m網址，儲存檔案。（或是用文字編輯程式編輯這個檔案也可以）
6.點兩下run.bat這個檔案。
7.同一目錄下會出現下載好的影片檔。
複雜版本：
1.和簡單版本的差別是，不要下載我準備好的壓縮檔，自己去原始來源下載程式，免得被我下毒。
2.操作說明可以參考這裡。
Jquery Mobile 網頁的選單（menu）功能外掛 – mmenu
行動裝置版本的網頁，常常可以有個「選單」的按鈕在頁面左上角（或是右上角），非常方便好用。所以我上網找了個現成的來用，mmenu！這個外掛除了使用簡單之外，還有階層式的選單，相當好用。
innerHTML搭配jquery mobile的list view
用innerHTML把文字插入網頁中的功能很好用，但是如果是插在jquery mobile的list view裡面，因為多了一個div的標籤，list view就會不見，所以應該把id寫在ul的標籤裡，用+=的方式插入內容。
讓首頁背景圖片符合視窗大小
每個訪客的畫面都不一樣大，為了讓背景圖片可以跟著縮放，可以在網頁裡加上這樣的語法。其中第一段是利用java script判斷訪客的畫面大小，第二段是用css調整背景圖片尺寸。
第一段，請加在script的標籤之間：
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
第二段，請加在style的標籤之間：
body {
background-image: url(welcome.jpg);
background-size: 100%;
}
資訊來源：http://stackoverflow.com/questions/376253/stretch-and-scale-css-background
藝術街網頁上的影像地圖
在台中東海藝術街的網站首頁加了影像地圖，一種是單純的影像地圖，另一種是可以移動放大縮小的影像地圖，附加自動判斷手持裝置和桌上型電腦的網頁程式語法。
東海藝術街網站首頁：首頁會自動判斷瀏覽設備的種類，進入下面網頁。
東海藝術街影像地圖手機板：用手指放大縮小地圖，圖中有編號的十個文創據點是可以點選的。
東海藝術街影像地圖桌機板：地圖可以用滑鼠滾輪放大縮小，有紅色指標的符號可以點選連結。