Archive for 2013

在 Ubuntu 下透過 RVM 安裝 Ruby on Rails

做個筆記,每次要裝都跑去別人那邊看(掩面)

Ruby on Rails 是一個好用的網路應用程式開發框架,透過 Ruby 程式語言的直覺性,讓網路應用程式的開發相對於傳統的程式語言,如 php 、Java ...等, 能夠有較好的開發效率,使用 MVC 架構 為概念,讓開發者在開發網路應用程式上更能專注在邏輯的撰寫上, 不會有太過複雜的界面與邏輯的交織。

廢話一大堆,下面我們開始說明怎麼在 Ubuntu 上透過 RVM 安裝 Ruby on Rails 吧。

第一步驟 - 使用 RVM 安裝 Ruby


先將我們的軟體來源列表更新,確保我們待會下載的程式都是最新版的,也把可以更新的程式都先更新一下吧。

sudo apt-get update
sudo apt-get upgrade

更新完成以後,我們就能開始安裝 RVM ( Ruby Version Manager ),這個程式可以很方便的讓我們在不同的 Ruby 版本間作切換, 以下我們只會安裝最新的版本,如果想要安裝其他的版本,可以參考這個文章
我們會需要用到 curl 這個工具來幫助我們安裝 RVM ,所以還沒安裝過curl 的朋友請先安裝curl

sudo apt-get install curl

安裝 RVM,請輸入:
\curl -L https://get.rvm.io | bash -s stable

當安裝完成以後,載入 RVM。或許你需要將目前所處於的 shell 關閉,並重開一個新的 shell。
source ~/.rvm/scripts/rvm

RVM 還有一些需要的依賴程式需要安裝,輸入下面這個指令可以自動安裝 RVM 所需的相關程式
rvm requirements

你或許需要在安裝這些相依程式的時候需要輸入密碼。
在某些偶然的情況下,有可能 zlib 會回報 miss。RVM 的官方網站提供了此問題的解法 ,如果出現類似的問題的話,請詳閱。

第二步驟 - 安裝 Ruby


已經安裝好 RVM 的話,那麼安裝 Ruby 就變得很簡單了。
rvm install ruby

我們已經安裝好最新版的 Ruby 了,但是因為我們是透過一個管理不同版本的程式來使用 Ruby 的, 我們需要告訴系統我們現在想要使用哪一個版本的 Ruby 當作預設值。
rvm use ruby --default

第三步驟 - 安裝 RubyGems


這個步驟是為了確保我們有正確安裝 Ruby on Rails 所需的所有 Gems ,如此一來 Rails 才能正確執行。我們可以透過 RVM 來繼續安裝 RubyGems 。
rvm rubygems current

第四步驟 - 安裝 Rails


當上面步驟都完成以後,現在我們可以安裝 Rails 了。
gem install rails

Rails 的安裝會需要一段時間,當完成以後,你的電腦上就有完整的 Ruby on Rails 摟。

參考資料

2013年11月8日 星期五
Posted by Unknown

【Ubuntu / Linux】 使用 Chrome 時 Flash 字體出錯問體解決

嘛,這篇文章很久以前就想寫了,但是想說或許會有更好的解法,所以就一直放著,但是看到現在好像 Google 官方沒有給答案, 那麼就只好把原本的解法寫出來給大家參考吧。
http://ppt.cc/TMrj

相信在用 Linux 的朋友們一定會感到困惑,為什麼明明用 Firefox 的時候 Flash 所顯示的 UTF-8 字體就很正常,但是在 chrome 下卻會 有問題,而在 chromium 下卻奇蹟似的又沒有問題,這到底是有什麼玄機呢?其實跟有沒有這個字型沒什麼關係,相信各位使用中文 Linux 的大家,電腦裏面應該都已經裝了文泉譯...之類的中文字型,而程式在使用這些字型的相關設定一般都存放在系統的 /etc/fonts/config.d,一般是不會去這邊設定的,網路上真有人跑去設定這個orz,不要設定的比較好,萬一出事了,麻煩可就大了。

嘛,解決方式其實很簡單,在 chrome 的網址列輸入 chrome://plugins

可以進入插入元件的設定頁面,頁面開啟以後,將右上角的[+] 詳細資訊開啟

找到 Flash Player 的部份,我們可以找到有兩個不同的 Flash Player,分別的路徑為:/opt/google/chrome/PepperFlash/libpepflashplayer.so /usr/lib/flashplugin-installer/libflashplayer.so,其中,PepperFlash 為 chrome 內建的 Flash Player 和我們自己所安裝的 Flash Player 有所不同,這個 Flash Player 在指定字型的時候路徑方面出了點問題,而且透過 Google 搜尋,我們可以發現,這個 Flash Player 對字型的處理比原生的 Flash Player 還要來的差了一點,在字體寬度、介面處理上,渲染的有些偏差,所以透過停用這個插件,我們就可以使用我們所安裝的原生 Flash Player 了。
結果:
2013年10月6日 星期日
Posted by Unknown

【Ubuntu 13.04】使用 cron 進行批次作業

許多人在使用電腦的時候都會有這樣的想法:這台我花了這麼多錢買來的電腦,能不能讓它在一天 24 小時都全力的工作,將 資源的利用度提高到最高 ,這樣花的錢才值得。所以很多人開始觀察使用者如何使用電腦,嘗試著去從使用者的角度來改善資源利用率, 喔,我們發現,在白天上班時間,電腦會被大多數人所使用,資源的利用度很不錯,電腦很繁忙,但是當下班以後,因為公司的人都回家了, 雖然電腦還是持續在運作,但是實際上他並沒有進行產出,若是我們能讓他做些什麼東西,就可以改善、提高資源的利用度,增加產出, 在以前使用 windows 平台的經驗,許多人可能會使用 bat 批次檔來進行處理,然後寫個小程式讓這個批次檔能在準確的時間運作,而在轉到 Linux 平台以後,有些人也會惜慣性的使用類似的方法使用 shell script 加上一個定時執行的小程式來進行批次作業的處理。 事實上,Unix-like 平台提供了一個更方便的方法,讓我們來管理批次作業,那就是cron

因為小弟我是使用 Ubuntu 作為常用的系統,本篇會以 Ubuntu 的角度來討論如何使用 cron 這個服務。 cron 的使用其實很簡單,只要遵守以下的規則,就能將自己的程式批次處理了。 cron 的設定檔一般放在/etc 資料夾下,檔名為 crontab,因為是系統相關設定,所以我們需要使用系統管理員身份執行。
相關格式:

        
# ——分鍾 (0 - 59)
# | ——小時 (0 - 23)
# | | ——日 (1 - 31)
# | | | ——月 (1 - 12)
# | | | | ——星期 (0 - 7)(星期日=0或7)
# | | | | |
# * * * * * 被執行的命令
上面是在 crontab 裏面所使用到的時間格式,需要注意的是,使用*表示任何可能的值,如果在小時的區域裡填入,則代表每個小時執行一次。
特別小心:時間間格需要比程式執行的時間還要長,以免發生資料衝突的問題。

以下為 Ubuntu 預設的 crontab 設定,會進行一些更新方面的確認,以及系統的問題回報。
你可以自由的加入自己的程式,只要依照格式撰寫,並注意時間的部份,就可以了,最後在編輯好這個檔案以後,請重開 cron 服務。
/etc/init.d 輸入sudo service cron restart 將服務重開,即可更新你剛剛 編輯的 crontab 檔案了。

2013年9月6日 星期五
Posted by Unknown
Tag : ,

啟動 Gnome Shell 3.8 應用程式分類

最近因為對UbuntuUnity 感到有點厭倦了,太多的 bug 、需要大量的資源...種種的問題導致了我產生了想要轉其他的桌面環境的念頭,因為以前的使用習慣的關係,所以目前暫時 轉移到 Gnome 桌面環境,Gnome 相對於 unity 更為輕巧,動畫方面也很優雅,不像是 Unity 有些動畫給人的感覺有點多餘,整體上給我的感覺是很正向的, 有關於 Gnome Shell 的 preview 我會在不久的未來寫一篇新的文章,還請大家多多捧場。


用了 Gnome 以後,各項方面感受相對於 Unity 都很有蠻正向的回饋,但是一直以來,有個問題困擾著我,那就是在 Gnome Shell 3.8 的簡介裏面,他們新增 資料夾的功能,讓使用者可以把應用程式做分類,但是真的很悲劇,我怎麼試都試不出來 Orz
或許是因為可以自訂資料夾的原因,Gnome 3.8 也預設把應用程式分類關閉,所以在這樣前提下,使用上要找應用程式都要透過搜尋來找,說真的, 也不是不方便啦,就是有點麻煩就是了。

下面將說明怎麼將預設關閉的應用程式分類開啟 終於要進入正題了


Step1:在搜尋框輸入 「dconf」,啟動 dconf editor 來編輯一些相關的設定


Step2:在 dconf 中沿著 org > gnome > shell 的順序可以得到如下的畫面

Step3:在右手邊的地方,我們需要修改的欄位是 app-folder-categories,而預設的內容是:['Utilities', 'Sundry'] ,我們將其修改為 ['Utilities', 'Games', 'Sundry', 'Office', 'Network', 'Internet', 'Graphics', 'Multimedia', 'System', 'Development', 'Accessories', 'System Settings', 'Other'],如此一來,幾乎所有的程式都會被分類到這裏面了,以下是分類過後的 Gnome Shell 樣子, 產生許多的資料夾,讓我恍然大悟的了解到,原來介紹上所提到的資料夾是這麼一回事。


以下為 Gnome 3.8 的宣傳影片
2013年8月27日 星期二
Posted by Unknown

網頁程式學習 -- CSS選擇器

上一次我們談到了如何簡單的生成一個網頁文件,但是我們卻只能單調的對這個文件進行打字,以往我們在編輯文件的時候, 常常有許多的格式設定需要我們去煩惱,這些格式的設定在網頁上即是使用 CSS 來進行設定,為了對某個我們已經生成的物件進行設定, 我們需要先了解到如何對物件進行選擇,即是學習 CSS 選擇器。


在學習選擇器之前先聊聊幾個基本概念,如果有學過物件導向程式設計的朋友們應該對於「class」和「id」並不陌生, 「class」和「id」的概念在 CSS 的應用上是非常常見的,若是我們想要對於一群物件進行設定,而這些物件卻是不連續的出現在我們整份文件中, 那麼我們可以對這些我們欲設定的物件使用相同的「class」名稱,我們只要對這個「class」進行設定即可;相對於「class」的多個物件共用屬性, 「id」就是個別的一種屬性設定,我們在使用「id」的時候只能在同一份文件中出現一次,如果出現多次會造成混淆的現象。

舉例來說明 class 和 id 的關係就像是在每個人身上貼上標籤,台灣有 200 多萬個台北人,但是台北人中卻只有一個人的身份證字號跟你一樣,那個人就是你自己。

【註】class 以小數點「.」為開頭; id 以 Hash Tag 「#」為開頭


以下就要來一個一個的講解有關於 CSS 選擇器的內容了,上面廢話有點多orz


根據 w3c 的 css selector syntex,我們可以知道 CSS 選擇器大約有 10 種

Universal Selector 通用選擇器

使用 * 作為篩檢對象,代表此網頁下所有的物件都遵守 *{} 裡的規則。

Type Selector 屬性選擇器

使用 Html Tag 作為篩檢對象的方法,稱作為屬性選擇器,屬性選擇器會把這份 HTML 文件中所有被選擇到的那種標籤都加上所設定的規則。
          h4{
            font-size:20px;
           }
div{ background-color:black; }

Descendant Selector後代選擇器

當兩個選擇器並排呈現的時候,瀏覽器會從外面往裏面選擇,可以當作是被限制範圍的其他選擇器,相同的只要符合選擇器所篩選的內容都會被套用這些規則。
例如:

住在台北市的人 男生

這兩個篩選條件下的交集,會有很多的結果,這些結果都會套用我們所下的規則。
          div a{
            color:yellow;
          }
          nav li{
            color:red;
          }
       

Child Selector 子選擇器

子選擇器的意味和後代選擇器很類似,但是後代選擇器是對每個後代都作用,但是子選擇器只對緊緊跟在前一個選擇器後面那個作用,若是中間有其他的物件在中間, 那麼就不會套用選擇器的屬性,所以範圍更小了。
例如:

坐在我附近的人 > 男生

在這個條件下,坐在我附近的人中可能有很多個男生,但是坐在我旁邊的男生可能只有兩個人,那麼 這個選擇器的條件就是選擇到這兩個男生,並對他們進行屬性上的設定。
           div > a{
              color:yellow;
           }
        

Adjacent sibling selectors 相鄰選擇器

相鄰選擇器,應該是目前很少用到的一種選擇器,因為尚有部份瀏覽器不支援,我們都知道 HTML 的具有巢狀結構,而前面所提到的後代選擇器和子代選擇器, 都是針對巢狀結構的內層作用,而相鄰選擇器,則是針對同一層的其他元素進行作用,其中使用 + 來進行連接。
            h1+h1{
             color:red;
            }
            /*同層的的第二個 h1 會顯示紅色*/
            h1+h1+h1{
             color:blue;
            }
            /*同層的第三個 h1 會顯示藍色*/
          

Attribute selectors 屬性選擇器

屬性選擇器,是針對標籤裡頭的屬性做更進一步的修改。這個比較難解釋,直接看 code。
            h1[class]{
                color:red;
            }
           /*所有含有 class 屬性的 h1 都會受到影響*/
            h1[class=title]{
               color:red;
            }
           /*所有 class 屬性為 title 這個 class 者都會受到影響*/
           h1[class~=title]{
               color:red;
           }
           /*所有 class 屬性有 title 者都會受到影響*/
           h1[class|=title]{
               color:red;
           }
           /*class 的第一個為 title 者會受到影響*/
         

Class Selector

顧名思義,針對某個 class 進行定義屬性的方式,以 . 為開頭進行定義。
            .box{
               background-color:black;
            }
         

ID Selector

和 Class 選擇器類似,但是指針對某個特定的 ID 進行定義,使用 # 為開頭進行定義。
            #key{
              color:white;
            }
         

Pseudo-classes 偽類

這個東西嘛,其實就是常見的 :hover :active :visited :link 除了常見的這些之外,還有其他三個 :first-child :focus :lang
          p:first-child{
            color:red
          }
         /*first-child 是第一個使用 p 這個標籤者會被設定屬性*/
         p:lang(fr){
           color:red;
         }
        /*符合屬性為 lang(fr) 的標籤才會被套用這個屬性*/
       

Pseudo-elements 偽元素

偽元素的使用和偽類的使用方法類似,皆是使用冒號接上元素名稱。目前偽元素有兩個 :first-letter :first-line
          p:first-line{
            color:red;
          }
          /*第1行 p 會成為紅色*/

          p:first-letter{
            color:red;
          }
          /*只有第一個字母會變成紅色*/
       


以上就是 CSS 選擇器的教學,如果有任何問題的話,歡迎提出問題一起討論。
2013年8月21日 星期三
Posted by Unknown

網頁程式學習 - HTML 基本上手

HTML被發明出來的時候,主要是為了傳輸文件,而為了表現這些文件,所以在早期發明出來的HTML 標籤有許多類似個功能,像是標題、內文、圖片、連結、表格、列表...都可以透過 HTML 標籤輕易的完成一份文件,以下我會先透過這些部份來創討論各種不同標籤的使用時機。

在創建一份文件的時候,我們要先了解到,HTML 他到底是怎麼去組成的,一份 HTML 文件可以分成兩個部份:
  1. 頭(head)
  2. 身體(body)

讓我們從「頭」開始討論吧,在瀏覽器開始載入一份文件之前,我們可以在文件的內容之前先宣告一些這份文件的初始資料,例如:
2013年2月4日 星期一
Posted by Unknown

【教學】從 C 語言的角度入門 PHP


==================================================================

# 前言:

> 話說,我已經有一大段時間沒有碰 PHP 了,印象中是從大一的網際網路概論之後就沒有認真的

> 讀過與寫過 PHP所以趁此機會把 PHP 重新學習與掌握一下,也藉此分享一下心得,

> 希望各位也能從我的心得中學習到一些東西,如果有什麼不對的地方歡迎指正

> 記得大一的時候,剛看到 PHP 好像看到什麼毒蛇猛獸的感覺,喔天阿!這東西好困難、好可怕,
> 對於沒寫過程式的人來說,這樣的動態語言,真的是有點太過於抽象了,現在經過了一年多了時間,
> 回過頭來看 PHP 卻有種豁然開朗的感覺,要說簡單嗎? 其實也不然,要說難嗎?其實也不然,
> 掌握了一些關鍵的要點以後,學習 PHP 變得輕鬆許多。

==================================================================

2013年1月27日 星期日
Posted by Unknown

[閒聊] WebConf 2013 心得


      這次的活動,和以往的資訊類研討會有很大的不同,不只是因為有很多女性觀眾的參與,讓活動比較不會那們沉悶之外,主辦單位請到了前輩的現身說法透過前輩的語言和文字,給予我們這些新進的後輩一些如何在這競爭激烈的環境下生存的方法,讓我們了解到在這樣高速變動的環境,我們如何與這個環境做出最適切的應應措施,是要順著潮流走呢?還是放開腳步走自己的路,這都讓我從中有許多的啟發。

      與以往的 Keynote 就要請到很厲害的國際知名講者不同,兩天的 Keynote 都是從分享出發,第1天的前輩的經驗分享,第二天的 alvin噗浪錯過的機會及再起的可能分享了創業上的經驗與波折,網路也是這十多年來創業的最短路徑之一,讓許多人在創業之初都會選擇從網路開始,有新的點子、好的點子,就會想辦法讓自己有機會打創出一片天,但是就像是其他的創業一樣,他所要承受的風險也是巨大的,失敗的例子比比皆是,就像是一個大戰場上,大家都看到了前方就是敵人的軍隊,打完這場就可以得到豐厚的獎勵,但卻沒看到地上那滿地的屍體,最後到達終點的往往不是那些表現最好的人,是那些看到地上的屍體,吸取他們的經驗所成功的那些人。
     在 WebConf 這樣的場合,因為大家都還是年輕人,創業對於在場的每個人都有很多的觸動與啟發,已經創過業的人,不論成功或失敗,都是一種學習,學習如何在這樣不景氣的環境下生存;而想要創業的我們,則是另外一種學習,學習將來在創業的時候,我們有哪些是我們不足的,或哪些是我們需要去注意的,都是寶貴的無價之寶。

      而這次的 WebConf 除了這些感性的部份之外,理性方面的實戰主題也非常的有內含,AllenOwn 大大的資訊安全到阿土伯大大的 xulrunner 【註】 本機端跨平台應用程式撰寫,都像是給我們這些資訊菜鳥開了一扇扇的窗,讓我們不只侷限在學校所學、書本所教的那些僵硬知識之中,從一個資訊菜鳥的角度來看,這次的活動對於我來說,真的學習到非常多、非常充實的知識和觀念,因為有許多不同的議程主題,我們可以根據自己的能力來挑選自己適合的方向來研究和學習,這些議程給了我一種在學習上的啟發,新的方向,這也是我喜歡參加各種不同的社群的原因,透過想法的刺激和撞擊,更好的想法和產品都有可能在討論中產生,無形中不只是我們這些新手在進步,那些強者大神們也可能因為我們不經意的一句話而有所啟發,進而創造出對於可以改變這個世界的程式。

這就是社群的最根本目的吧,我想。



最後推廣一下我共同創建的:WebConf 懶人包
此懶人包為不定期更新,請大家多多關注

】:
     xulrunner 是一套由 Mozilla 公司所推出的工具,可以讓工程師透過 xulrunner ,就可以輕易的撰寫本機應用程式,多輕易呢?可以使用寫網頁的方式來撰寫程式,讓寫本機程式變得更簡單,xulrunner 包含著 firefox 3 的 Gecko 引擎,但是介面上去掉了網址列及工具列,所以對於開發者來說寫插件就是寫程式,可以大大的縮短寫程式的時間和所需的精力。

2013年1月14日 星期一
Posted by Unknown
Tag :

如何幫 ubuntu 的 LibreOffice 升級

起因是這樣的,我的 Ubuntu 12.04 從安裝到現在,LibreOffice 從安裝好後都沒有更新過了,本來想說這樣就已經很夠用了,但是,剛剛在 Google plus 上看到某大大的發言表示:
LibreOffice 改朝換代,又加入了新的功能




喔喔!這讓我才熊熊的發現,原來我的 LibreOffice 並沒有隨著每次的軟體更新而更新,搜尋了一下資料發現,原來 Ubuntu 並沒有把 LibreOffice 的 PPA 加入到其更新表中,那麼事情就簡單啦:

  1. 找到 LibreOffice 的 PPA
  2. 加入 PPA 至更新列表
  3. 更新軟體列表
  4. 重新更新軟體
更新前,先確認我們的軟體版本 ( 12.04 預設的版本是 3.5.4.2 )


打開終端機,插入 LibreOffice 的 PPA:

  sudo add-apt-repository ppa:libreoffice/ppa

插入完成以後,重新更新軟體列表:

    sudo apt-get update

這時候更新管理員就會出現有新的更新,執行更新即可


這可能需要花上一點時間。


 當當,更新完成,看起來 PPA 並沒有像官網那麼即時的進行更新,目前版本還是 3.6.0.2

雖然還不是最新的版本,但是總算是擺脫掉 LibreOffice 不會更新的問題了 ( wave )
2013年1月11日 星期五
Posted by Unknown

- Copyright © 迪蘭帝的聊天室 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -