[PHP] php extension 初試: extension parser parameter (接收參數)

接續先前的基本範例，接著要來練習怎麼接收帶入extension的參數：

zend_parse_parameters方法

zend_parse_parameters提供不同的接收變數的方式， 變數1: ZEND_NUM_ARGS() TSRMLS_CC， 二個值中間是空白，ZEND_NUM_ARGS表示傳入參數的個數 變數2: 傳入變數的格式化字串

[PHP] php extension 初試

拜讀完php-extension骨架練習，
如果C語言忘得差不多錄影檔有從基本的C語言開始教起:D

如果C語言已經很熟的話，可以跳至26:38秒開始

測試環境

1. MacOSX EI
2. MAMP (所以流程中有其他錯誤要處理一下:D)

ZVal是什麼

http://php.net/manual/en/internals2.variables.intro.php

Note:

PHP is a dynamic, loosely typed language, that uses copy-on-write and reference counting.

所有的php變數型態都是定義在一個zval的struct，並且使用copy-on-write(寫入時複製)與reference counting(來判斷變數是否還有被使用)。

Null-Terminated String

初始化 ZVAL

簡化

ZVAL設定值

ZVAL_STRING

ZVAL_LONG

ZVAL_BOOL

[PHP] php 呼叫 C library一些方法

最近工作轉換跑道寫php，然後還要用php呼叫同事寫的c library，找了一些相關的筆記：

學習資源

1. 寫php extension

• http://php.net/manual/en/internals2.ze1.zendapi.php
• http://www.phpinternalsbook.com/
• PHP Extensions Made Eldrich: Installing PHP
• PHP Extensions – How and Why?
• https://programm.froscon.de/2012/system/attachments/182/original/main.pdf

中文相關

• 手動編譯、安裝PHP Extension （Linux）
• 如何寫 PHP Extension
• PHP Extension & Makefile 製作
• 撰寫自己的 PHP extensions - 1 hello world
• [PHP] PHP 也有 Day #21 - c9s 主講：從 C 語言到 PHP Extension 學習筆記
• PHP 也有 Day #21 - 從 C 語言到 PHP Extension by 林佑安(c9s)
• 寫一個Hello World的PHP Extension

[Testing] jMeter 測試工具筆記 on MacOS

記錄一下簡單使用jMeter的筆記

安裝步驟

使用brew安裝jmeter

brew install jmeter

執行

open /usr/local/bin/jmeter

快速上手請參考此篇:

http://shaurong.blogspot.tw/2014/02/apache-jmeter-211.html

[PHP] ffmepg 相關筆記

最近工作需要用到一些audio的處理，記錄一下相關的ffmpeg討論資源。

php 使用exec 執行 ffmpeg指令
http://www.phpro.org/tutorials/Video-Conversion-With-FFMPEG.html

Binary data 處理
http://blog-en.openalfa.com/how-to-work-with-binary-data-in-php

Audio codec:
https://trac.ffmpeg.org/wiki/audio%20types

讀取WAV檔
http://www.mcpressonline.com/web-languages/easily-manage-wav-files-with-php.html

WAV file/read
https://gist.github.com/Xeoncross/3515883
https://github.com/boyhagemann/Wave

音频格式详解：WAV
http://www.aliog.com/39896.html

READ WAV
http://www.bloggingzeal.com/how-to-read-a-wav-file-with-php/

pack/unpack format
a - NUL-padded string
A - SPACE-padded string
h - Hex string, low nibble first
H - Hex string, high nibble first
c - signed char
C - unsigned char
s - signed short (always 16 bit, machine byte order)
S - unsigned short (always 16 bit, machine byte order)
n - unsigned short (always 16 bit, big endian byte order)
v - unsigned short (always 16 bit, little endian byte order)
i - signed integer (machine dependent size and byte order)
I - unsigned integer (machine dependent size and byte order)
l - signed long (always 32 bit, machine byte order)
L - unsigned long (always 32 bit, machine byte order)
N - unsigned long (always 32 bit, big endian byte order)
V - unsigned long (always 32 bit, little endian byte order)
f - float (machine dependent size and representation)
d - double (machine dependent size and representation)
x - NUL byte
X - Back up one byte
@ - NUL-fill to absolute position

a一个填充空的字节串
A一个填充空格的字节串
b一个位串，在每个字节里位的顺序都是升序
B一个位串，在每个字节里位的顺序都是降序
c一个有符号char（8位整数）值
C一个无符号char（8位整数）值；关于Unicode参阅U
d本机格式的双精度浮点数
f本机格式的单精度浮点数
h一个十六进制串，低四位在前
H一个十六进制串，高四位在前
i一个有符号整数值，本机格式
I一个无符号整数值，本机格式
l一个有符号长整形，总是32位
L一个无符号长整形，总是32位
n一个16位短整形，“网络”字节序（大头在前）
N一个32位短整形，“网络”字节序（大头在前）
p一个指向空结尾的字串的指针
P一个指向定长字串的指针
q一个有符号四倍（64位整数）值
Q一个无符号四倍（64位整数）值
s一个有符号短整数值，总是16位
S一个无符号短整数值，总是16位，字节序跟机器芯片有关
u一个无编码的字串
U一个Unicode字符数字
v一个“VAX”字节序（小头在前）的16位短整数
V一个“VAX”字节序（小头在前）的32位短整数
w一个BER压缩的整数
x一个空字节（向前忽略一个字节）
X备份一个字节
Z一个空结束的（和空填充的）字节串

[jQuery plugin/CSS] 處理Youtube影片置入背景RWD的方法 :D

最近製作的網站有需要將youtube影片放置某一個元素裡面當背景，
找了二個不錯的資料如下，有興趣的朋友可以試玩一下。

http://rochestb.github.io/jQuery.YoutubeBackground/
https://github.com/chriscoyier/Fluid-Width-Video
http://www.seanmccambridge.com/tubular/

[PHP] Composer 教學筆記

現在寫php一定要會用的套件管理工具composer

安裝

參考一下這篇
http://iambigd.blogspot.tw/2013/07/php-composer.html

快速安裝使用

1. 首先要在專案下建立composer.json，加入你要引用的套件(管理套件相依性)

{
    "require": {
        "monolog/monolog": "1.2.*"
    }
}

2. 然後執行composer install

3. 接著就會在專案下產生composer.lock檔案以及vendor目錄

composer.lock

在首次安裝套件完畢後，會產生這個檔案，裡面記錄了所安裝套件的資訊。這個檔案的真正作用是：如果目錄中有這個檔案，執行安裝時，就不會去搜尋更新的版本，而是依照這個檔案中記錄的版本來安裝。這個設計很重要，因為新版的套件很有可能與目前使用的版本不相容，如果不是使用同樣版本，很難保證系統的穩定。過去在使用pear來管理套件時，如果不注意，就有可能發生升級導致的慘劇。

vendor目錄(預設目錄)

主要含以下內容

• vender/autoload.php

只要引用這個檔案，就可以載入套件中所有對外公開的類別。

require 'vendor/autoload.php';

• vender/composer

自動載入的載入器與快取檔

• 各套件資料夾目錄

依造命名規則/

場景應用注意(From 大澤小木鐵phpconf簡報):

1. Git只需要加入composer.json 與composer.lock，方便其他成員使用
2. 請由專案負責人進行composer的第一次安裝與之後的更新
3. 不要將vendor資料夾送入Git，其他團隊成員應該只要透過composer install安裝
4. Library的composer.lock不要加入Git

參考

1. https://speakerdeck.com/jaceju/begining-composer
2. http://ithelp.ithome.com.tw/question/10136653

[EC2] 安裝 ffmpeg

記錄一下成功安裝ffmepg在EC2的步驟。

1. 首先建立ffmepg資料夾

$cd /usr/local/bin/

$sudo mkdir ffmpeg

$cd ffmpeg

2. weget下載stable 包

$sudo wget http://ffmpeg.gusari.org/static/64bit/ffmpeg.static.64bit.2014-07-16.tar.gz

3. 解開下載的tar檔

$sudo tar -xzf ffmpeg.static.64bit.2014-07-16.tar.gz

之後會解出ffmpeg與ffprobe二個資料夾

$ls -al

ffmpeg  ffmpeg.static.64bit.2014-07-16.tar.gz  ffprobe

4. 執行測試

$./ffmpeg -version

列出這一版的資訊

ffmpeg version N-63893-gc69defd

built on Jul 16 2014 05:38:01 with gcc 4.6 (Debian 4.6.3-1)

configuration: --prefix=/root/ffmpeg-static/64bit --extra-cflags='-I/root/ffmpeg-static/64bit/include -static' --extra-ldflags='-L/root/ffmpeg-static/64bit/lib -static' --extra-libs='-lxml2 -lexpat -lfreetype' --enable-static --disable-shared --disable-ffserver --disable-doc --enable-bzlib --enable-zlib --enable-postproc --enable-runtime-cpudetect --enable-libx264 --enable-gpl --enable-libtheora --enable-libvorbis --enable-libmp3lame --enable-gray --enable-libass --enable-libfreetype --enable-libopenjpeg --enable-libspeex --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-version3 --enable-libvpx

libavutil      52. 89.100 / 52. 89.100

libavcodec     55. 66.101 / 55. 66.101

libavformat    55. 43.100 / 55. 43.100

libavdevice    55. 13.101 / 55. 13.101

libavfilter     4.  8.100 /  4.  8.100

libswscale      2.  6.100 /  2.  6.100

libswresample   0. 19.100 /  0. 19.100

libpostproc    52.  3.100 / 52.  3.100

5. 如果要在每個路徑下都能使用請做一下symbol link

$sudo ln -s /usr/local/bin/ffmpeg/ffmpeg /usr/bin/ffmpeg

TIP: 軟連結請勿打錯路徑，否則在/usr/bin/ffmpeg 會顯示紅色!!

參考資源

官網stable build
http://ffmpeg.gusari.org/static/64bit/

本文參考
http://stackoverflow.com/questions/15057151/installing-ffmpeg-on-amazon-linux-cpp-gcc-libstdc-dependancies

[快快樂樂學WordPress] 記錄一些wordpress plugin需要用的資料

Google到的Wordpress plugin教學蒐集

//好像很老的玩家lol
http://blog.wpjam.com/article/write-plugin-by-yourself/

//官方
http://codex.wordpress.org/Writing_a_Plugin
http://codex.wordpress.org/Adding_Administration_Menus
http://codex.wordpress.org/Plugin_API

fullpage.js 一頁式的網站樣版工具

如果你需要一頁式的網站樣版，可以參考一下fullpage.js這個套件

http://alvarotrigo.com/fullPage/#firstPage

[CSS3] CSS transform/transition/animation 初學筆記

最近幫朋友弄了一個網站，需要使用很多CSS transition與animation的效果，
順道找了一些不錯的資訊學習，看完就可以馬上上手許多:D，很適合初學者們

短語法

可用屬性

參考如下：

https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html

超強transform解說：
https://desandro.github.io/3dtransforms/

[CSS] 讓youtube影片放入DIV後能夠填滿寬高的解法

如果你有需要使用youtube連結當背景播放影片的話，可以參考以下網址的解法，
試過是可行的:D 有需要的朋友可以看看。

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

[jQuery] scroll animation 外掛

快速上手的scroll animation外掛

https://github.com/mpalpha/animate-scroll

[Apache] Could not reliably determine the server's fully qualified domain name 錯誤訊息

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message

只要在
sudo vim /etc/apache2/apache2.conf

加入ServerName localhost

即可

[快快樂樂學Wordpress] wordpress來指定某個用戶登入以實作SSO(單點登入)

最近實作了一個wp的SSO機制，
主要用了get_user_by的方法來取得用戶的資訊後，
再透過wp_set_current_user與wp_set_auth_cookie設定用戶的session並執行wp_login的hook即可。

if($user){

   //do the single sing on
   wp_set_current_user( $user_id, $user->user_login );
      wp_set_auth_cookie( $user_id );
      
      //email
      // echo $user->user_login;

      do_action( 'wp_login', $user->user_login,$user );
  }
 

REF

http://carlofontanos.com/auto-login-to-wordpress-from-another-website/

[快快樂樂學Wordpress] 新增plugin教學

//註冊文章類型->也會產生一個admin的側欄，多一個類型就會多一個側欄
register_post_type

//新增外掛至admin的側欄
add_menu_page

REF
https://developer.wordpress.org/reference/functions/add_menu_page/
https://codex.wordpress.org/Function_Reference/register_post_type

[Wordpress] 自訂的php頁面呼叫wp function

require_once(dirname(dirname(__FILE__)).'/wp-load.php');

Markdown-Cheatsheet 參考表

現在流行使用Markdown來寫文件了了，
有興趣的朋友可以看一下下面這個github repo。
看一下就可以快速入門了。

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

update:

這裡有更多語法
http://pages.tzengyuxio.me/pandoc/

[WordPress] Woocomerce login hook筆記

記錄一下woocommerce hook的筆記

//一般wp_login的hook

function so_26675676_your_function($user_login, $user) {
 // your code
}
add_action('wp_login', 'so_26675676_your_function', 10, 2);

//woocommerce login hook，你可以自訂_wp_http_referer參數

add_filter( 'woocommerce_login_redirect', 'krex_redirect'); add_filter( 'woocommerce_registration_redirect', 'krex_redirect'); function krex_redirect( $redirect_to ) { if ( ! empty( $_REQUEST['_wp_http_referer'] ) ){ $ref = wp_unslash( $_REQUEST['_wp_http_referer'] ); } return $ref; }

//shortcode

[woo_social_login redirect_url="轉頁的網址"]

/*----------------------------------------------------
------------------------*/
// redirects for login / logout
/*----------------------------------------------------------------------------*/
add_filter('woocommerce_login_redirect', 'login_redirect');

function login_redirect($redirect_to) {

 $location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

add_action('wp_logout','logout_redirect');

function logout_redirect(){

$location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

• https://www.skyverge.com/blog/advanced-woocommerce-social-login/
• https://github.com/woothemes/woocommerce/commit/014e31952828377bf7a1ebf4e812a43d0bcefa67#commitcomment-3351995

[Wordpress Plugin] 多國語言插件

好用但要付錢的WPML多國語言插件 :D

有提供一些變數的常數

Constant	Description	Example
ICL_LANGUAGE_CODE	Code for the current language	fr
ICL_LANGUAGE_NAME	Name of current language, in the current language	Français
ICL_LANGUAGE_NAME_EN	Name of the current language name in English	French

ICL_LANGUAGE_CODE

Code for the current language

fr

ICL_LANGUAGE_NAME

Name of current language, in the current language

Français

ICL_LANGUAGE_NAME_EN

Name of the current language name in English

French

REF
https://wpml.org/
https://wpml.org/documentation/support/wpml-coding-api/

[CSS] 使用Media Query來處理不同裝置所需的樣式筆記

記錄一下相關media query的筆記。

• media query可用來依據裝置特性套用樣式。
• min-width (而不是 min-device-width) 以確保獲得最通用的體驗。
• 針對元素使用相對大小，避免版面走樣。

實作方法

使用link標籤

使用import語法

查詢語法

一般RWD最常使用以下屬性

屬性	結果
min-width	任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width	任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height	任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height	任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait	任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape	任何寬度大於高度的瀏覽器都會套用規則

[CSS] 重設 絕對定位的值

今天在試media query重新定位某個icon時，發現一直無法清掉left，

查了一下google大神，可以在覆寫的css中改加上 left:auto; ，瀏覽器即會使用預設的值。

[Html5]多國語系 i18n 字串符設定

新版的lang設定值已進化成以下的列表了，有需求要朋友可以參考一下。

Lang對應清單

zh-Hans 簡體中文

zh-Hans-CN 大陸地區使用的簡體中文

zh-Hans-HK 香港地區使用的簡體中文

zh-Hans-MO 澳門使用的簡體中文

zh-Hans-SG 新加坡使用的簡體中文

zh-Hans-TW 臺灣使用的簡體中文

zh-Hant 繁體中文

zh-Hant-CN 大陸地區使用的繁體中文

zh-Hant-HK 香港地區使用的繁體中文

zh-Hant-MO 澳門使用的繁體中文

zh-Hant-SG 新加坡使用的繁體中文

zh-Hant-TW 臺灣使用的繁體中文

其他舊式用法，PS：不符合RFC 4646規範

zh-hakka 客家話

zh-cmn 普通話

[快快樂樂學Wordpress] 自訂樣版: 基礎架構 (1)

記錄一下新增wordpress樣版的筆記

樣版基本需求檔案

請在theme folder之下新增下面三個檔案

index.php

style.css

function.php

之後後台就會出現你的樣版了

DEMO

因為index.php與function.php什麼都沒寫，因此網站會呈現一片空白 Orz

完成的佈景主題所需要的檔案

 style.css

 header.php

 footer.php

 index.php

 single.php

 page.php

 sidebar.php

 comments.php

 archives.php

 search.php

 searchform.php

 404.php

 functions.php

[Html5] 在網頁播放midi音樂檔

因為工作需求需要在網頁上播放midi，

查了一下使用html5 audio的播放器是無法播放的，

使用舊式的object tag chrome會跳出禁用的警告，

最後使用https://github.com/chenx/MidiPlayer 這個方法是最簡單處理的，

只需要下載一個js檔就可以簡單使用了!!

Features

Can specify these in constructor parameter list: midi, target, loop, maxLoop, end_callback.

• - midi: MIDI file path. 
• - target: Target html element that this MIDI player is attached to. 
• - loop: Optinoal. Whether loop the play. Value is true/false, default is false. 
• - maxLoop: Optional. max number of loops to play when loop is true. Negative or 0 means infinite. Default is 1. 
• - end_callback: Optional. Callback function when MIDI ends. 
• e.g., use this to reset target button value from "stop" back to "play".
• Can specify a debug div, to display debug message: setDebugDiv(debug_div_id).
• Start/stop MIDI by: start(), stop().
• If a MIDI started play, call start() again will stop and then restart from beginning.

範例

//初始化
 // * @param midi    MIDI file path.
                    // * @param target  Target html element that this MIDI player is attached to.
                    // * @param loop    Optinoal. Whether loop the play. Value is true/false, default is false.
                    // * @param maxLoop Optional. max number of loops to play when loop is true.
                    // *                Negative or 0 means infinite. Default is 1.
                    // * @param end_callback Optional. Callback function when MIDI ends.
                    midiPlayer = new MidiPlayer(url, MIDI_ELEM_ID, true, 1, function() {
                        console.log('midi done');
                    });

//播放
 midiPlayer.play();
//停止
 midiPlayer.stop();

參考連結

https://github.com/mudcube/MIDI.js => 功能最強大的midi庫
https://developer.mozilla.org/zh-TW/docs/Web_Audio_API
http://stackoverflow.com/questions/5789734/does-the-html5-audio-tag-encompass-mid-midi-unofficially
http://homeofcox-cs.blogspot.tw/2015/04/play-midi-in-browser-by-javascript-only.html
https://github.com/chenx/MidiPlayer

[Bootstrap 3] 變更modal overlay的背景色方法

本文記錄一下如何修改bootstrap modal overlay的背景色

http://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal

To change the color via:

CSS

Put these styles in your stylesheet after the bootstrap styles:

.modal-backdrop {
   background-color: red;
}

Less

Changes the bootstrap-variables to:

@modal-backdrop-bg:           red;

Source

Sass

Changes the bootstrap-variables to:

$modal-backdrop-bg:           red;




[Bootstrap 3] 自訂5欄的girdsystem

本文講解如何擴充bootstrap 3，支援5欄的gird system

http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/

[AngularJS-3rd] Angular 1.4.8 使用angular dialogs service module

最近把anrgular升級到1.4.8，記錄一下要處理的流程。

相依模組

 angular-sanitize (此模組在1.4.8被獨立了，要記得include)
 angular-ui-bootstrap Version: 1.1.0 - 2016-01-18

載入模組

ngSanitize

ui.bootstrap

dialogs.main

Dialog的控制器

要注意一下因為ui-bootstrap升級後，所以原本的$modalInstance要改用$uibModalInstance

[TaipeiOpenData] Taipei OMG(Open, Mobility, Green) 綠色交通應用開發大賽: LazyPark 懶人停

今年看了Taipei市政府舉辦了Taipei OMG(Open, Mobility, Green) 綠色交通應用開發大賽，希望參賽者透過現在的Open Data API(停車場、公車等API)來打造綠色交通應用。

由於去年買了新車，時常有找停車位的需求，因此就找到同事Eric一起來參賽，
另外為了填補簡報太工程師風格的問題，也找了公司市場行銷同事Franny來幫忙!!
順利的進入決賽隊伍，如果有看到此篇文章的格友們，快去投票官網https://taipeiomg.bhuntr.com/vote  投我們一票吧!!!

由於太多組的題目太類似的了，請支持LazyPark懶人停才對喔!!!

懶人停APP 介紹

這個APP就發想就是考量正在路上急用的用路人，因此我們只想簡化APP的操作方式，絕對不是下班沒時間開發lol。最後決定的版本就是透過省時與省錢二種查詢方式，加Web定位的方式，來提供用戶前五筆的停車場資訊。



另外考量WebAPP定位不夠準確(有誤差)以及考量有些用路人可能會前查詢目的地附近是否有相關停車資訊，因此你可以點選手動輸入目的地連結，即可手動輸入你的位址。

想試用的話，點選此網址即可開啟APP http://taipeiomg.cloudapp.net/app/#/home

有使用建議也可以貼到 粉絲團喔: https://www.facebook.com/lazypark4you/

[iOS Swift] 設定textbox變password

如果使用textbox讓用戶作為密碼輸入欄位，
只要將Secure Text Entry打開即可 :D
如下圖：

[GoogleMap] 如何監聽zoom變更的控制

如何監聽zoom變更的控制

var 
 map = new google.maps.Map($mapElement[0], mapOptions);
                console.log($mapElement[0]);
                
                google.maps.event.addListener(map, 'zoom_changed', function () {
                    var zoomLevel = map.getZoom();
                    logger.debug('zoom_changed to level: ' + zoomLevel);
}

[GIT] 重設Git專案

簡單重設Git專案的指令步驟

$>rm -rf .git 

$>git init

[iOS Swift] 如何新增專案內的資料夾

當專案愈來愈大的時候，
就需要好好定義一下專案目錄的結構，
記錄一下Xcode如何在專案中新增資料夾。

1. 專案目錄下按右鍵
2. 選擇New Group即可

[iOS Swift] 發送網路請求錯誤: App Transport Security has blocked a cleartext

在使用https://github.com/Alamofire/Alamofire來進行網路資源的request，

執行後發生以下的錯誤：

App Transport Security has blocked a cleartext 

解決方法只要info.plist檔案加入App Transport Security Settings的key，

並在此key下面再新增Allow Arbitrary Loads的key且屬性請設為YES即可

參考:

http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http

[iOS Swift] 替新的ViewControll場景加入控制器

記錄一下如何新增一個swift的控制器給新增的場景

1.  新增一個cocoa class

[iOS Swift] 如何重新命名ViewControll

記錄一下如何使用Xcode去重新命名你的ViewController，


1. 重新命名你的ViewController.swift檔名與裡面的類別名稱

ex: 改名為Page1VC.swift

[iOS] 模擬器尺吋的調整

由於不小心按了快速鍵導致模擬器變太小，所以記錄一下這篇...
請按選單列的Window->Scale->尺寸選擇

[freebooard] freeboard自定外掛踩雷

在測試自定義freeboard外掛的時候，發現設定屬性填空字串或空陣列，

初始化整個儀表版是會錯誤的。有用這個套件的朋友要注意一下。

[AngularJS] i18n 使用筆記

記錄一下angular translate的使用快速筆記。

環境設定

請引用angular-translate.min.js
使用模組 pascalprecht.translate

語言檔

透過 $translateProvider新增多國語系檔對應的內容，你可以另存以下的js至zh_TW.js檔

angular.module('myApp.controllers').config(function ($translateProvider) {
 $translateProvider
 .useSanitizeValueStrategy('escaped')
 .translations('zh_TW', {
  TRANSLATION_ID: 'Hello world !!',
  TRANSLATION_ID_2: 'Hello world !! {{value}}',
  TRANSLATION_ID_3: 'Hello world !! {{value1}},{{value2}}',
 });
});

$translate service處理多語系

  $translate('').then(function(translation) {
                    //translation為取得的鍵值

                });

Filter處理多語系

{{ 'TRANSLATION_ID' | translate }}

動態取代多國語言參數

使用filter

{{ 'TRANSLATION_ID_2' | translate:'{"value": 'Ken' }' }}

使用filter與多個參數

{
'TRANSLATION_ID_3': 'Hello world !! {{value1}},{{value2}}'
}

如果要多參數時，請在新增一個json變數至scope，如 $scope.translationData = {value1: 'Ken',value2: 'Ken2'}

{{ 'TRANSLATION_ID_3' | translate: translationData }}

使用directive表示式 在元素內透過translate與translate-values二個directive進行資料繫結

translate="TRANSLATION_ID_3" translate-values="{ value1: translationData.value1,value2: translationData.value2 }

事件

可以取得當語言變更的事件

$rootScope.$on('$translateChangeSuccess', function () {

// Language has changed
 });

啟動app設定語言方法

myApp.config(['$translateProvider','$windowProvider',
    function($translateProvider,$windowProvider) {
    var defaultLanguage = 'zh_TW';//你定義的語系檔名稱

    $translateProvider.use(defaultLanguage);
}])

REF

http://angular-translate.github.io/docs/#/guide/00_installation

[CI] 客制化404控制器來處理查詢結果不存在的解法

因為想客制化404的頁面來處理當用戶查詢條件結果不存在時的對應頁面，

但又不想覆想原本的show_404();系統內建的方法。

因此新增了一個新的Error_404的控制器，裡面放了index()與object_not_found()二個方法。分別針對網址亂key in 的404處理與針對查詢結果失敗的404處理。

因此在其他查詢結果的控制器如果遇到查詢失敗時，直接呼叫Error_404控制器中的object_not_found方法，因此我們需要了解如何透過CI在控制器中如何呼叫另一個控制器的方法。

參考的解法如下

yes you can

load like this inside your controller 

$this->load->library('../controllers/whathever');

and call the following method:

$this->whathever->functioname();

[Apache] apache無法啟動: make_sock: could not bind to address 0.0.0.0:80 no listening sockets available

發現VM的apache無法啟動，噴了一些
make_sock: could not bind to address 0.0.0.0:80 no listening sockets available的錯誤，找到這篇wiki https://wiki.apache.org/httpd/CouldNotBindToAddress

可能是有其他process程式佔住port或不是root的權限(Unix based systems disallow non-root users to bind processes to port numbers below 1024. Get root!)

不過最後下了apachectrl start就開啟了....

[CI] 不使用其他library在樣版裡面再讀另一個樣版

簡單的在樣版裡面又load另一個樣版的範例如下：

你要載入的目的地樣版，注意這裡的$content請輸入你的樣版路徑

<div id="content"><?php $this->load->view($content) ?></div>

在控制器裡面新增一個content變數，裡面寫你樣版的路徑

$view_data = array();
$view_data['content'] = '另一個view的路徑';
$this->load->view('主view的路徑', $view_data);

http://stackoverflow.com/questions/15096828/load-a-view-inside-another-view

[php] htaccess: Options not allowed here 異常

今天在架CI的舊專案時，發現以下error。

[Fri Dec 04 15:51:36.019560 2015] [core:alert] [pid 19393] [client 10.211.55.2:58540] /var/www/<專案名稱>/.htaccess: Options not allowed here

解決方法是把原本htaccess下面的Options設定先註解掉就好了，

不知為何先前要寫這一行XD

#Options +FollowSymLinks

        

RewriteEngine On

RewriteCond %{REQUEST_URI} ^(system|application).*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

[Javascript] Slideout.js製作手機滑動的側欄選單

想要有mobile web app的側欄選單，可以參考Slideout.js。

此元件有跟angular的eeh-navigation module整合，

先記錄一下。有使用再來寫使用說明。

[Handlerbar.js] 如何透過handlebar.js取得資料集內的資料

如果使用handlebar.js想要取得綁定的索引值的話，其內建的helpe就有提供@index與@key，供我們取得索引。

陣列資料

{{#each array}}

{{@index}}: {{this}}

{{/each}}

物件資料

{{#each object}}

{{@key}}: {{this}}

{{/each}}

基本上你可以取得索引值後，可以將這個值render在元素的屬性上，

例如data-index="{{#index}}"，之後用jquery綁定元素可以簡單取得資料集裡面的目標資料了。

[Bower] ubuntu run bower 發生錯誤

在新裝的ubuntu裝完npm又裝bower後，發現bower無法使用

bigd@ubuntu:~$ bower
/usr/bin/env: node: No such file or directory


可以安裝 nodejs-legacy就可以解決

sudo apt-get install nodejs-legacy