建立簡單的ES6+React+webpack 3開發環境

在大約1年前，我分享過一篇關於"利用webpack+babel建立簡單的ES6(ES2015)+React開發環境"的文章。

由於最近出了webpack 3，以及包括node，REACT在內的各樣更新。那篇文章恐怕已經過時了。此外，最近開始準備利用REACT開發新的項目，所以，我順便在這裡分享一下建立一個簡單的ES6+React+webpack 3開發環境。


Github地址為:
https://github.com/crongjie/simple_react_webpack3_environment



詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.11.1 LTS
npm v3.10.10
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_react_webpack3_environment/

3. 輸入以下指令建立 package.json

npm init

在裡面隨便輸入一些內容, 如下:

[自製程式] FisheyeToPanorama

最近因為在玩魚眼鏡頭的關係，由於找不到好的程序去給我把魚眼（Fisheye）的圖像轉換為全景(Panorama)圖像，所以，自己去參考了一下網上的文章，並且用C#寫了一個簡單的工具去給我轉換圖像。

源代碼在我的Github裡面：
https://github.com/crongjie/FisheyeToPanorama


另外，還提供了exe的下載（需要.net framework):
https://github.com/crongjie/FisheyeToPanorama/raw/master/FisheyeToPanorama.zip

公式が病気 「煌樹まみかお別れの会」

 

由於最近在看新番Re:CREATORS（レクリエイターズ）的關係，而且剛好看見Re:CREATORS的·公式在搞這個奇怪的Event 「煌樹まみかお別れの会」。所以，在6月10日時我去了秋葉原參加這個充滿病気的Event（笑）。

ファンタシースター感謝祭2017

2017年6月10日的時候，去了千葉幕張メッセ的「ファンタシースター感謝祭2017」。
PSO2的Event，我是今年第一次去的呢。過往好像辦了好幾次了。總算是見識到 「ファンタシースター感謝祭2017」是怎樣子的呢。

另外，今年是五週年的紀念......PSO2這遊戲我是在開服時，就玩到現在的，不知不覺，已經玩了5年呢（雖然嘛，和剛開始比較，近年玩的頻率已經算是少很多了）。
但是，雖然過了五年， 幕張メッセ的「ファンタシースター感謝祭2017」倒是蠻多人去參加的呢。

[Raspberry Pi] 在Raspbian上安裝GitLab CE

由於個人開發用了svn好一段時間；另外，因為近期的工作上,都在用git....而且慢慢開始習慣了用git進行版本控制。所以，個人考慮在自家的服務器上裝上git的服務器，來給自己的新項目進行版本控制。
所以，我考慮在自家的Rabpberry Pi上，裝上GitLab。



這篇文章主要的參考內容為:
https://about.gitlab.com/downloads/#raspberrypi2


安裝方法如下：

Step #1：
首先執行以下指令， 更新Rabpberry Pi。

apt-get update
apt-get upgrade

Step #2：
然後，安裝需要的東西。

sudo apt-get install curl openssh-server ca-certificates postfix apt-transport-https
curl https://packages.gitlab.com/gpg.key | sudo apt-key add -

Step #3：
輸入以下指令，開始安裝GitLab:

sudo curl -sS https://packages.gitlab.com/install/repositories/gitlab/raspberry-pi2/script.deb.sh | sudo bash
sudo apt-get install gitlab-ce

安裝需要下載300多MB的內容，而且還額外需要多860MB， 對空間的需求也頗大。

安裝完畢後，會出現以上畫面。

Step #4：
然後，需要編輯檔案 /etc/gitlab/gitlab.rb

預設的話, external_url 的內容為 'http://raspberrypi'

由於HTTP服務器方面,我的Raspberry Pi已用上其他web server方面的服務，所以我在 /etc/gitlab/gitlab.rb 輸入以下內容，把我的GitLab Server設置到 Port 8081, 例子如下:

external_url 'http://IP地址:8081'
unicorn['listen'] = '127.0.0.1'
unicorn['port'] = 10087
nginx['listen_port'] = 8081

Step #5：
編輯 完畢後,輸入以下指令,重設並啟動GitLab。

sudo gitlab-ctl reconfigure

Step #6：
然後，利用 http://你的IP地址：8081  就會進入以下畫面設定管理員密碼：

Step #7：
在輸入完密碼以後，就可以利用以下賬號登入GitLab，或者另外去做一個新帳號。
ID: root
密碼： （剛才輸入的密碼）

後話：

雖然GitLab安裝容易，但可以，在Raspberry Pi裡反應太慢，而且還會因為反應慢，出現Error 502畫面。
所以，個人感覺很一般。也許需要把GitLab裝到別的服務器內，或者是因為我的Raspberry Pi已經運行了很多服務，不適合再用GitLab

建立和發布開源的npm模組

由於最近打算建立一些開源的項目來分享及交流一下，所以在這篇blog文裡，我做一做筆記，分享一下我是如何建立npm的模組，並且利用github分享出來。


參考文章：
npm官方的文件 - https://docs.npmjs.com/getting-started/publishing-npm-packages


這篇文章的Github:  https://github.com/crongjie/npm-rjn-helloworld




1. 首先，需要到以下網址，建立一個npm的賬號：
https://www.npmjs.com/signup


如果，沒有github賬號的話，也請到github裡面開一個帳號。
網址： https://github.com/join?source=header-home


2. 然後，到github給你的開源項目，建立一個新的項目：

這篇文章則建立一個名為"npm-rjn-helloworld"的開源項目作例子。

例子:
Github Repository名:  npm-rjn-helloworld
NPM 項目名: rjn-helloworld

[日誌]PSO2アークスカフェ

由於早陣子在PSO2的官網上，看見有PSO2アークスカフェ （http://pso2.jp/players/campaign/pso2cafe_thebest/）加上自己已經玩了這遊戲很多年以及想吃吃放題， 所以去了スイーツパラダイス新宿東口店的PSO2アークスカフェ。

由於近期PSO2的緊急裡面，個人最喜歡的，還是深遠なる闇的緊急。而且EP3關於深遠なる闇的故事也很不錯，所以我點了 深遠なる闇パフェ（不過，比起想像中小呢）。

[艦これ 2016 秋Event] E5 「渚を越えて」 攻略

ギミック解除（出擊點）

編成例：

第一隊：

[艦これ 2016 秋Event] E4 「シャングリラ捜索追撃 艦隊前進配備」 攻略

輸送作戰:

編成例：

[艦これ 2016 秋Event] E3 「発令！艦隊作戦第三法」 攻略

編成例：

第一艦隊:

第二艦隊:

[艦これ 2016 秋Event] E2 「本土防空戦」 攻略

編成例：

[艦これ 2016 秋Event] E1 「海上輸送作戦」 攻略

編成例：

[艦これ2016秋Event] 「発令！「艦隊作戦第三法」」 戰前準備/情報整理

暫時所得的情報是： 
1. Event時期大約2個星期。
2. 本次Event會分4回鎖艦， E2,3可以共通出擊; E1~E4出擊過的艦,不能在最終決戰(E5)出擊。


需求艦 / 編成例： 

任務	攻略關卡	艦隊種類	編成限制	保留艦	編成例(暫定)
E1	海上輸送作戦	通常艦隊	輸送部隊		高速戰艦 + 輕巡X2 + 驅逐 X 3
E2	本土防空戦	通常艦隊	迎撃部隊	野分,嵐,神通,木曾,愛宕,高雄,妙高,羽黒,祥鳳,飛龍,蒼龍	重巡X2+驅逐X2+空母X2
E3	発令！艦隊作戦第三法	連合艦隊			第一隊: 輕空母+高速戰艦+重巡X2+空母X2 第二隊: 輕巡+驅逐X2+重巡+雷巡X2
E4	シャングリラ捜索追撃 艦隊前進配備	通常艦隊	増派部隊		輸送作戰: 輕巡+驅逐X3+航巡X2 正式作戰: 航巡+高速戰艦X2+空母X2+輕空母
E5	渚を越えて	連合艦隊	決戦部隊	長門,酒匂,Prinz Eugen

URLs memo (經常更新)

這篇文章記錄我經常會用到的URLs.

雖然,我常用的URLs 會用Bookmark/Favorites 功能加到我的瀏覽器裡面. 但是在外面使用瀏覽器時, 則沒有我收藏了的URLs, 會導致我要另外去google.
所以,我在這篇blog 文裡面,記錄一下我經常會用到的URLs:

開發相關:

lodash API:  https://lodash.com/docs/
ExtJS 3.4.0 API: http://docs.sencha.com/extjs/3.4.0/
AngularJS AＰI: https://docs.angularjs.org/api
Scala Cheatsheet: http://docs.scala-lang.org/cheatsheets/
React Doc: https://facebook.github.io/react/docs/react-api.html
React Native Doc: http://facebook.github.io/react-native/docs/getting-started.html

日常/工具:

翻譯: https://translate.google.com/

漢字轉換為ひらがな/ふりがな: http://www.webtoolss.com/hiragana.html

日本的乗換案内:  http://transit.yahoo.co.jp/

RJ Memo(English Blog): http://rj-memo.weebly.com/

樂天旅遊(預約酒店/巴士等用) http://travel.rakuten.co.jp/


日本高速巴士預約:

https://www.kousokubus.net
http://www.kosokubus.com/
http://travel.willer.co.jp
https://secure.j-bus.co.jp

 機票購買:

http://www.hkexpress.com/
http://www.flypeach.com/
http://www.jetstar.com/

利用webpack+babel建立簡單的ES6(ES2015)+React開發環境

關於ES6(ES2015) - ECMAScript 6, 是一種用於front-end(前端)開發,新的JavaScript語法標準.由於是一種新的語法標準的關係,並不是全部瀏覽器都支持,所以需要用babel等transpiler工具,編譯到傳統的Javasript語法.

而React(React.js)方面,可以使用JSX語法開發,這個也不是傳統的Javascript語法,也需要運用到transpiler把JSX語法轉換為傳統的Javasript語法.

所以, 這篇文章主要是分享一下我如何運用webpack+babel, 建立一個簡單的ES6 + React的開發環境.

Github地址為: https://github.com/crongjie/simple_es6_react_environment


詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.6.0
npm v3.10.3
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_es6_react_environment/

3. 輸入以下指令建立 package.json

npm init

在裡面隨便輸入一些內容, 如下:

[Raspberry Pi] 在Raspbian上安裝svn(subversion)服務器

這篇文章主要是分享一下我如何安裝svn服務器，及進行一些配置等。

我安裝svn的配置為：

-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
-------------------------------

安裝步驟如下：

1. 如果未安裝apache2的話，請先執行這個指令:

sudo apt-get install apache2

2. 執行以下指令安裝svn服務器

sudo apt-get install subversion libapache2-svn

[Raspberry Pi]把Redmine 2.4.2遷移及更新到Redmine 3.3.0

由於我需要把自家Ubuntu Server上的Redmine 2.4.2 遷移到 Raspbian上的Redmine 3.3.0，所以在這篇文章裡面，我會分享一下我的做法。

舊有的Redmine 環境和配置：
-------------------------------
OS: Ubuntu 14.04
Redmine版本： 3.3.0
-------------------------------

新的Redmine配置：
-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
Redmine版本： 3.3.0
-------------------------------

關於安裝Redmine 3.3.0， 可以參考這篇文章。


步驟如下：

1. 首先用以下指令，備份原有舊版本的Redmine database：

mysqldump -u root -p redmine > redmine_backup.sql

2. 備份redmine/files 文件夾：

tar cvzf redmine_files_bak.tar.gz /var/lib/redmine/default/files

這個視乎安裝redmine的位置來決定，可能會是 /opt/redmine/files 或者 /usr/share/redmine/files


3. 把備份了的 redmine_backup.sql 和 redmine_files_bak.tar.gz 複製到目標的機器（我的情況是Raspberry Pi)。

4. 執行以下指令，恢復備份的database到新的Redmine

mysql -u root -p redmine < redmine_backup.sql

5.  恢復備份的files文件到新的Redmine

tar -xvf redmine_files_bak.tar.gz
mv var/lib/redmine/default/files/ /opt/redmine/

6. 執行以下指令更新database：

cd /opt/redmine/
rake db:migrate RAILS_ENV=production 

7. 執行以下指令清除cache 和 session，並且重啟apache2

rake tmp:cache:clear
rake tmp:sessions:clear
service apache2 restart

完成以上步驟後，就成功把Redmine 2.4.2 更新到 3.3.0了。

[Raspberry Pi] 在Raspbian上安裝Apache+MySQL+Redmine 3.3.0

這篇文章主要是參考自 Redmine 官網上的 HowTo Install Redmine on Debian 8 with Apache2-Passenger

我安裝Redmine的配置為：

-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
Redmine版本： 3.3.0
-------------------------------

安裝步驟如下：

1. 先執行以下指令更新套件

sudo apt-get update && sudo apt-get upgrade

[Raspberry Pi] 利用root賬號ssh登入Raspbian

在前一篇文章裡面，我大概介紹了如何安裝Raspbian，以及修改pi 和 root的密碼。

由於個人需要用root賬號，給Raspbian進行各種安裝和設定。而且我也比較懶，不想經常輸入 sudo 指令。所以，我需要以root的身份，ssh登入Raspbian。
（當然，按安全性考慮的話，不建議允許root賬號ssh登入的。我只是在初期設定時，為了方便才這樣做）

但是，如果什麼都不設定的話，就會看見這個畫面：

login as: root
root@192.168.XXX.XXX's password:
Access denied

P.S.
由於我是在windows SSH登入Raspbian的，所以我使用的是PuTTY 。 PuTTY可到以下網址下載：
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html



解決方法如下：

1. 先用別的賬號（例如 賬號pi) ssh登入Raspbian

2. 使用以下指令修改ssh server的設定：

sudo nano /etc/ssh/sshd_config

3. 找到 PermitRootLogin without-password 這一行，並且修改為以下內容：

PermitRootLogin yes

4. 按Ctrl + X 退出，並且選擇 Yes 儲存變更。

5. 用以下的指令重啟ssh server

sudo service ssh restart

6. 完成後，就可以成功用root賬號ssh登入Raspbian了

[Raspberry Pi] 安裝Raspbian Jessie Lite

由於將要移居到海外，不能帶太多行李的關係，個人把早前把玩了好一陣子的“玩具”拿了出來，打算弄成給個人用的Linux Server。
所以，由這篇文章開始，我去記錄和分享一下我安裝和設定Raspberry Pi 2的各項內容吧。

關於我購入Raspberry Pi 2的文章，可以看這裡。

先分享一下我的配置吧。

-------------------------------
型號： Raspberry Pi 2 Model B
SD卡： Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
-------------------------------

我今回選擇的, 是 Raspbian Jessie Lite.選擇Raspbian主要是因為這是Raspberry Pi官方支持的OS。選擇 Lite 版，是因為我不需要用到Desktop（桌面）的功能，所以我安裝了Lite版。



以下為我安裝 Raspbian Jessie Lite 的方法。


1. 在以下網站下載 Raspbian Jessie Lite 鏡像：
https://www.raspberrypi.org/downloads/raspbian/

我下載的版本，是Version May 2016, Kernel 4.4


2. 下載及安裝 Win32 Disk Imager (用於我使用的是windows,所以我用的是 Win32 Disk Imager)

 （詳細也可以參考這頁： https://www.raspberrypi.org/documentation/installation/installing-images/README.md ）


3. 在電腦插入microSD後， 以"Run as Administrator" 開啟 Win32 Disk Imager

4. 選擇先前下載好的鏡像，我使用的是由2016-05-27-raspbian-jessie-lite.zip 解壓出來的 2016-05-27-raspbian-jessie-lite.img 文件。

5. 按 "Write"把鏡像寫入到microSD卡。

6. 把鏡像寫入到microSD卡以後，就順利地進入了Rasbian了。

7. 第一次登入時，需要使用以下密碼登入：

用戶名: pi
密碼: raspberry


8. 在登入以後，建議使用以下指令去修改密碼：

sudo passwd pi

9. 如果需要用到root的話，也可以用以下指令，修改root的密碼：

sudo passwd root