Loser X Programmer: 2017

2017年11月27日星期一

AR NPC：Patrol

讓NPC自動巡邏的Script

https://docs.unity3d.com/Manual/nav-AgentPatrol.html

https://www.youtube.com/watch?v=M6zFKfF4gOE

須先安裝最新的Unity, Vuforia

目前找到最快速有效的手法

新增Shader用的code如下：
＝＝＝＝＝＝＝＝＝＝
Shader "UnlitShadows/UnlitShadowReceive" { Properties{ _Color("Main Color", Color) = (1,1,1,1) _MainTex("Base (RGB)", 2D) = "white" {} _Cutoff("Cutout", Range(0,1)) = 0.5 } SubShader{ Pass{ Alphatest Greater[_Cutoff] SetTexture[_MainTex] } Pass{ Blend DstColor Zero Tags{ "LightMode" = "ForwardBase" } CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" #pragma multi_compile_fwdbase #include "AutoLight.cginc" struct v2f { float4 pos : SV_POSITION; LIGHTING_COORDS(0,1) }; v2f vert(appdata_base v) { v2f o; o.pos = mul(UNITY_MATRIX_MVP, v.vertex); TRANSFER_VERTEX_TO_FRAGMENT(o); return o; } fixed4 frag(v2f i) : COLOR{ float attenuation = LIGHT_ATTENUATION(i); return attenuation; } ENDCG } } Fallback "Transparent/Cutout/VertexLit" }
＝＝＝＝＝＝＝＝＝＝

2017年10月17日星期二

如何用PHP匯入XML檔案到MYSQL資料庫中

＊這是一個有附原始程式碼的教學網站

＊若有比較多層包資料的XML檔，參考這個Stackoverlow問題
＊另一個問題參考，比較像我現在的工作需求

2017年9月8日星期五

PHP MYSQL 會員登入/註冊系統的網頁建立

PHP MYSQL 會員登入/註冊系統的網頁建立

我是從這個網站學的，裡面的code有一點bug，
加上現在使用較新的mysqli，新的code附在下面：

註：要先建立一個叫做member的會員資料table，才能供登入新增。
table欄位：id, name, email, password, nick

2017年9月1日星期五

寫得很好的前端programming教學

以下筆記了好用的線上教學資源，都能夠從讀者角度寫出貼近學習者心理的教學，並且每個步驟都有附程式碼，好學易懂。

No More Cowboy Coding: Improving Your WordPress Workflow
增進WP的整體作業思維，讓開發更有效率。

應用Git的Wordpress網站開發流程
非常詳細的文章，解析一個WP網站開發如何使用Git，適合剛開始開發網站的人員，
建立或反省自己工作模式的好參考。

www.codeofaninja.com
從這個網站學到：從FB連結相簿嵌入顯示在網頁
他還有教：Bootstrap、PHP、AJAX 等等

Tania Rascia
從這個前端設計師的個人網站教學學到：把靜態網站轉為Wordpress的Theme
個人的轉職發展紀錄值得一讀。

把網頁元件置中

非常簡單好用的code

#wrapper {
  background-color: green; /* for vizualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for vizualization purposes */
  display: inline-block;
}

<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

來源發問串：stackoverflow

Photo Gallery，採用背景圖片的方式，各種縮圖的呈現調整

(參考Stackoverfolw討論)

找到該元件的html，然後修改它的css style

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size: [參考下列方式] ;
}

無調整
照片100%置放，通常會整個超出外框顯示

方法一：
background-size: 100% 100%;
照片不維持原比例，依據外框的長寬伸展到邊緣，沒有被切圖

方法二：
background-size: contain;
照片維持原比例，自動 fit in 外框，同樣沒有切圖，但是內部會留白邊

方法三：
background-size: cover;
overflow:auto;
照片維持原比例，會自動resize依據外框的短邊，長寬多出的部分切掉

2017年8月31日星期四

Git + Wordpress

複習了去年接觸現在忘得差不多的Git，最近也剛學了Wordpress，覺得這兩個東西應該可以結合在一起，然後真的有找到教學。WP有plugin可以跟Git連結，這是對開發者們是很好的事情。

No More Cowboy Coding: Improving Your WordPress Workflow
這篇文章描述如何將WP的開發流程更有組織效率，同時也利用Git，在三個地方：

・Local開發環境
・封閉的Bitbucket Git專案區
・開放的網頁產品版本

文章裡面有教學建立這個模式的步驟。

如果有一個線上的Git專案區，就代表有一個完整的網頁備份，
若需要與人共同開發時，就可以階段性開發完成後整合，
再推到公開的產品端，這讓流程好控制許多。

有一個在Beta階段(2017.9.5)的外掛- VersionPress，能夠記錄WP所有的修改，
每個修改後面都有undo可以回溯，他正在不斷完善當中，是WP界很被期待的工具。
(VersionPress的起源介紹)

* 使用VersionPress之前先學WP-CLI，Wordpress的Command Line Interface:
WP-CLI is the command-line interface for WordPress. You can update plugins, configure multisite installs and much more, without using a web browser.

2017年8月30日星期三

Git - Branch

Branch，當一個專案在新增功能或測試時，可以分出一個或多個開發支線，開發支線更新、測試，待沒問題之後，就可以merge回到主branch，這樣取名也是因為專案發展中各種功能跟時間點的開發，就像樹枝一樣，開展，再回歸到一起。

gitk --all

這個指令可以用基本的GUI看到目前的樹枝狀態。
"gitk --all & " 可以讓終端機和GUI同時執行

git branch

可以列出所有的樹枝以及目前位在哪一個

git branch star
可以開一個新的樹枝，上面的star是取名

GUI中可以看到新增出來了

git checkout star
就會從現在的master樹枝跳到star樹枝上面，進行工作

經過幾次master跟star兩根樹枝上面的工作來回，GUI呈現以下狀態：

(發現有還沒add 跟commit的內容)

(更新完畢)

從commit可以知道誰做的更動在什麼地方

現在，用git rebase來整理工作完成的branch，因為branch的階段任務做好後，就要把它更新到master樹枝，然後刪掉。
先進入star branch，然後輸入git rebase master，兩條線會合一。

接著到master樹枝，輸入git merge star，把star吃掉，

再用git branch -d star，把功成身退的star樹枝刪除。
完成！

基本學習紀錄到這邊，接下來可以練習實作一下了。

進階的樹枝操作介紹

Git的世界 - 安裝跟基本操作

非常常聽到，聽起來就很厲害的東西，Git，我現在處於一知半解，還未能融入工作模式的情況下，開始這個學習紀錄：

外部資源：
Git 教學(1) : Git 的基本使用
使用 Git 做為網站開發版本控管工具

第一部分：環境
1. 註冊Github帳號
2. 安裝Git環境
Download and install the latest version of Git.
Set your username in Git.
Set your commit email address in Git.
3. Git是可以用command line全程操作，若需要有GUI的軟體可以用
4. command line的操作稍微熟悉一下
5. 複習vim文字編輯器（最下面）

第二部分：基本操作
1. init (開啟一個自己的Repository, 專案工作區)
在cmd中 cd 進入欲工作的資料夾，指令 git init，就會將這個資料夾開成Repository

2. clone (複製別人在網路上的專案)

指令：git clone "要clone的專案網址"
整個專案就會下載到local資料夾中

3. Repository的狀態：Status, Add, Commit, log, .gitignore

$ git status : 確認目前專案裝態
$ git add "filename" : 新增/改過的檔案原本是untracked的狀態，add 可以把檔案轉成"stage"狀態，在下次更新時就會上傳。沒有經過 add 的是"unstage"狀態

git add test.php 之後：

$ git commit
會把更新的檔案上傳，一個commit就是一個節點，作為未來可以追蹤或回溯的參考。未來若有需要可以回到這個存檔狀態。
git commit之後會看到下列內容：

或是用 git commit -m "commit message" 比較快，盡量寫清楚，讓未來自己與別人都好懂。

$ git log
可以看到過去commit的紀錄

git log --stat 可以看到更完整的commit紀錄
git log -p 可以看到更完整的檔案修改內容

$ vim .gitignore 會進入一個文字檔，讓不想加入版本控制的檔案標記起來，以後就不會一直更新了。

vim文字編輯器的基本操作（更多看這裡）：
1. 按 i ，進入編輯
2. 編輯文字
3. 按esc，然後按"："
4. 接下來檔案編輯完的處理：可以按 q (離開) / w（寫入）/ qw（寫入後離開）

2017年8月29日星期二

如何在Wordpress網頁中內嵌臉書相片/相簿

無論個人或公司，可能有網站又有臉書專頁，若想要省去上傳兩次照片的作業，只上傳一次到臉書，就能同時也讓網頁顯示最新內容，瀏覽相簿，要如何做呢？
這是demo網頁，還有lightbox的切換效果。

我一開始先搜尋了這個：在WP網頁嵌入臉書的相簿（可在網頁上直接瀏覽臉書相片），介紹了其中一種外掛，之後還試了幾種WP外掛，如以下：

1. Facebook Feed WD: 可以抓動態貼文到網頁，但預設全類型，若要指定圖片或其他就要購買。如果專門用手機瀏覽還算方便。（我的自製theme點開lightbox會有錯誤）

2. WP Embed Facebook:
有縮圖，有lightbox，但是縮圖太小不能調整，蠻可惜，如果這外掛的規劃範圍不大可以考慮。

3. Custom Facebook Feed Pro
介面設計得不錯但客製化功能要用買的

4. Feed them social
跟3一樣，若要客製化layout或是點開相片的lightbox就要購買。純粹貼文的顯示在手機上瀏覽還不錯。

試完上面幾個外掛，我覺得若不付費用，功能都閹割得太多，很不理想。這些外掛主要是給無法自己開發或使用開源框架的人付費使用，我也希望能夠多有一點自己開發的自由。

一直尋找線上資源，最後找到這個網站 www.codeofaninja.com 有步驟教學，比較適合開發者。他們有賣外掛，但也有把code內容放上來做成教學，真是少見不藏私的風格。

follow完上面的教學，以下是我一步步coding到WP的步驟：

一、這是一段完整的內嵌php網頁code，用顏色區分要切給Wordpress的區塊

-----code-----

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">


<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="Bootstrap-Image-Gallery-3.1.1/css/bootstrap-image-gallery.min.css">

<style>
.photo-thumb{
width:150px;
height:150px;
float:left;
border: thin solid #d1d1d1;
margin:0 1em 1em 0;
}

div#blueimp-gallery div.modal {
overflow: visible;
}

#wrapper {
text-align: center;
}

#gal-img {
display: inline-block;
}
</style>
</head>
<body>

<div class="container">
<?php

$access_token="你的FB access token";
$album_id="你的FB相簿id";
$json_link = "https://graph.facebook.com/v2.3/{$album_id}/photos?fields=source,images,name&access_token={$access_token}";
$json = file_get_contents($json_link);

$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

$photo_count = count($obj['data']);

echo "<div id='wrapper'>";
for($x=0; $x<$photo_count; $x++){

$source = isset($obj['data'][$x]['images'][0]['source']) ? $obj['data'][$x]['images'][0]['source'] : ""; //hd image
$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";

echo "<a id='gal-img' href='{$source}' data-gallery>";
echo "<div class='photo-thumb' style='background: url({$source}) 50% 50% no-repeat;background-size: cover; overflow:auto;'>";

echo "</div>";
echo "</a>";

}
echo "</div>";
?>
</div>


<div id="blueimp-gallery" class="blueimp-gallery">

<div class="slides"></div>

<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>

<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="Bootstrap-Image-Gallery-3.1.1/js/bootstrap-image-gallery.min.js"></script>




<script>
$('#blueimp-gallery').data('useBootstrapModal', false);
$('#blueimp-gallery').toggleClass('blueimp-gallery-controls', true);
</script>

</body>
</html>

-----code ended-----

二、我們要把上面的code整理到Wordpress：

1. 上面header中紫色的css reference整併到WP theme的footer.php
2. 上面footer中紫色的js reference整併到WP theme的footer.php
3. 上面橘色的css reference貼到WP theme裡面的.css檔
4. 上面所有紅色的php code部分用WP外掛"Insert PHP Code Snippet"做一個shortcut，記得放在一起，變數才讀得到。
（注意！<blueimp-gallery>這個放進外掛的html div要先轉成php code，不然網頁會失敗）：

------code------

$access_token="your access token";
$json_link = "https://graph.facebook.com/v2.3/"your album id"/photos?fields=source,images,name&access_token={$access_token}";
$json = file_get_contents($json_link);

$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

$photo_count = count($obj['data']);

echo "<div id='wrapper' style='margin-top:20px;'>";
for($x=0; $x<$photo_count; $x++){

$source = isset($obj['data'][$x]['images'][0]['source']) ? $obj['data'][$x]['images'][0]['source'] : ""; //hd image
$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";

echo "<a id='vul-img' href='{$source}' data-gallery>";
echo "<div class='photo-thumb' style='background: url({$source}) 50% 50% no-repeat;background-size: cover; overflow:auto;'>";

echo "</div>";
echo "</a>";

}
echo "</div>";

echo "<div id=\"blueimp-gallery\" class=\"blueimp-gallery\">\n";
echo " \n";
echo " <div class=\"slides\"></div>\n";
echo " \n";
echo " <h3 class=\"title\"></h3>\n";
echo " <a class=\"prev\">‹</a>\n";
echo " <a class=\"next\">›</a>\n";
echo " <a class=\"close\">×</a>\n";
echo " <a class=\"play-pause\"></a>\n";
echo " <ol class=\"indicator\"></ol>\n";
echo " \n";
echo " <div class=\"modal fade\">\n";
echo " <div class=\"modal-dialog\">\n";
echo " <div class=\"modal-content\">\n";
echo " <div class=\"modal-header\">\n";
echo " <button type=\"button\" class=\"close\" aria-hidden=\"true\">×</button>\n";
echo " <h4 class=\"modal-title\"></h4>\n";
echo " </div>\n";
echo " <div class=\"modal-body next\"></div>\n";
echo " <div class=\"modal-footer\">\n";
echo " <button type=\"button\" class=\"btn btn-default pull-left prev\">\n";
echo " <i class=\"glyphicon glyphicon-chevron-left\"></i>\n";
echo " Previous\n";
echo " </button>\n";
echo " <button type=\"button\" class=\"btn btn-primary next\">\n";
echo " Next\n";
echo " <i class=\"glyphicon glyphicon-chevron-right\"></i>\n";
echo " </button>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo "</div>\n";

echo "<script>";
echo "$('#blueimp-gallery').data('useBootstrapModal', false);";
echo "$('#blueimp-gallery').toggleClass('blueimp-gallery-controls', true);";
echo "</script>";

-----code ended-----

下一步，開新的page，

把上面背景黃色的code，就是以下這段貼上，就完成了！

-----code-----

<div class="container">
[xyz-ips snippet="你取的外掛變數名稱"]
</div>

-----code ended-----

如果都跟著做完，看看效果吧 demo。

謝謝寫教學的codeofaninja.com，也希望你成功。

附註連結：
＊如何開啟一個臉書App，並且得到授權key，以用來來取得臉書資源到外部

＊如何取得臉書access id

＊如何取得臉書page id

2017.Aug

＊如何移除WP編輯內容時自動多出來的空白元素

訂閱：文章 (Atom)

2017年11月27日 星期一

2017年10月17日 星期二

2017年9月8日 星期五

2017年9月1日 星期五

2017年8月31日 星期四

2017年8月30日 星期三

2017年8月29日 星期二

2017年11月27日星期一

2017年10月17日星期二

2017年9月8日星期五

2017年9月1日星期五

2017年8月31日星期四

2017年8月30日星期三

2017年8月29日星期二