Author Archive

    はてなブックマーク - LLなプログラマが最近のC++周辺事情を軽く調査してみた!
    このエントリーをはてなブックマークに追加

    こんにちは。ご無沙汰しております、Fusic 河野です。
    約1年ぶりの投稿です。

    1年経ったという事は、、、
    そうです!ココにも書いておりますが、Future Sync の季節でございます。
    大好評頂いた去年の vol.2 よりも今年の vol.3 はさらにパワーアップしております。
    ぜひお時間ありましたら、お越しください!

    さて、本題です。

    C++ 界隈の話です。
    自分は、今でこそ業務では ruby とかをやっておりますが、その昔は windows プログラマでして
    VC++ で色々と開発しておりましたが、いやはや、大分時代に置いて行かれてるようです。
    新しい規格を盛り込んで C++11 となったのは、知りつつも中々触ることが無かったのですが、
    最近、下記の記事を見てたら「これは触っとかないとマズイぞ!」と感じました。

     [GNU/LinuxのC++11でプログラミングの常識がひっくりかえった]
     cpplover.blogspot.jp/2013/04/gnulinuxc11.html

     [Windows 8のC++でプログラミングの常識がひっくり返った]
     itpro.nikkeibp.co.jp/article/Watcher/20130331/467401/

    記事を読んでて、auto の部分で「これなんだったっけ?」から始まり、
    std::async() で「おやっと。。」。
    VC++ に至っては、非同期前提でのプログラミングになっている。。。

    日頃書いとかないと、やっぱり付いていけなくなるものですね。。
    なので、改めて C++11 界隈を色々と調べて見ました。

    まずは各 OS の対応状況をと言うことで下記の簡単なコードを動かしてみました。

    #include <iostream>
    #include <thread>
     
    using namespace std;
     
    static void func()
    {
      cout << "Hello C++11!" << endl;
    }
     
    int main()
    {
      thread t(func);
      t.join();
      return 0;
    }

    今回試したものは、

     ・Windows 8
      Visual Studio Express 2012 for Windows 8
      Version 11.0.50727.1 RTMREL
     ・Mac OS X Mountain Lion
      gcc version 4.2.1
      Apple LLVM version 4.2
     ・Ubuntu 12.10
      gcc version 4.7.2
     ・CentOS 6.4
      gcc version 4.4.7

    では早速。

    ■ windows 8

     なんなく普通にビルドして実行する事ができました。
     色々と調べてると Microsoft さん C++11 の実装には力入れているようで
     2012 で結構動いているんじゃないかとの印象でした。
     今から C++11 を勉強するとしたら、持って来いのコンパイラーではないでしょうか。

    ■ Mac OS X Mountain Lion

     Mac では gcc がお古い事もあり、gcc ではビルドできないのですが、
     変わりに Clang を使ってビルドします。
     LLVM.org で開発されているものの一つらしく、iPhone とかで Objective-C とか書いてたら、
     xcode の設定のところで見たことがあるかも。
     (この辺のお話はココの記事がわかり易かったです。)

    $ clang++ -o test1 -stdlib=libc++ test1.cpp

     最近、Clang が C++11 を完全にサポートしたっていうニュースを
     見たんで、ますます今後の Clang には目を話せないかもです。

    ■ Ubuntu 12.10
    ■ CentOS 6.4

     Ubuntu は、gcc は比較的新しいものを標準で積んでいますが
     CentOS はやはり古めですね。
     まー、この辺はしょーがないかと思います。

    $ g++ test1.cpp -o test1 -std=c++0x -lpthread

     で、両 Linux とも -lpthread のオプションを付けてビルドしないと
     実行時にエラーになります。
     Ubuntu は「実行権限がない」、CentOS は「セグメンテーションエラー」に
     なります。
     こんなん知っとかないとエラー取れないよ、、、と。

    終わりに

     今回はリハビリがてら各 OS の gcc のバージョン確認しつつ、ビルドしてみました。
     もっと C++11 の新機能を使ってプログラミングが出来るように
     今後もちょくちょくとウォッチしつつ、勉強をしていければと思います。
     何か参考になるサイトとか情報などありましたら、ぜひ教えて下さい!!

     あと、少ないですが今回調べていく中で見つけた参考になりそうなサイトを記載しておきます。

     [C++0xCompilerSupport]
     wiki.apache.org/stdcxx/C%2B%2B0xCompilerSupport

     [C++0x 改め C++11 はじめの一歩 ]
     sites.google.com/site/siv3dgameengine/article/cpp11_first_step

     [cppreference.com]
     en.cppreference.com/w/

     それでは!

      はてなブックマーク - オレオレ framework の作り方
      このエントリーをはてなブックマークに追加

      Fusic 河野です。

      GW 始まりましたね。みなさん、楽しんでますか?
      来る5月19日(土)に Future Sync vol.2 というイベントをします。
      これは、プログラマー・デザイナー・クリエイター・企画・マーケティング・学生など、
      様々な人たちが IT の未来を同期するために開催される、トークイベントです。
      詳細は、ココとかココにも書いてますので、ご興味を持たれた方が居られましたら
      ぜひご参加をお願い致します!
      (学生さんのみなさん、無料ですよ~)

      さて、本題。
      今回は iphone での framework の作り方についてです。
      iphone アプリをいくつか作成していると色々と独自のライブラリなどが
      溜まってくるかと思います。
      それらのオレオレライブラリを framework としてまとめ、今後の開発にも
      直ぐに活用できるようにしておけば、きっと楽になるのではないでしょうか。
      それでは早速いきましょー!!
      (今回は実際のコードではなく、画像が多いです。ご容赦を!)

      準備

       今回は kstenerud さんの iOS-Universal-Framework というツールを使用します。
       便利です。オススメです!
       リンク先の README を見てたら大体の事は分かると思います。

       git clone で落としてきてインストールの作業を行います。

      $ git clone git://github.com/kstenerud/iOS-Universal-Framework.git
      $ cd iOS-Universal-Framework/Real Framework
      $ ./install.sh

       因みにアンインストールする場合には、同ディレクトリにある uninstall.sh を叩きます。

      フレームワーク側の作成

       
       ”準備”を行った後、xcode を開くと新しく “Static iOS Framework”という
       テンプレートが追加されてますので、それを選んで新規にプロジェクトを作成します。

       
       今回は “HelloWorldFramework” という名前で作成しました。
       ARC などのオプションはお好みで設定してください。
       (サンプルでは ARC をオンにしてます)

       
       プロジェクト内に “HelloWorld” というクラスを作成します。

       それぞれのファイルには以下のコードを書いておきます。
       UIAlertView で “hello, world!” と表示する簡単なものです。

      HelloWorld.h

      #import <Foundation/Foundation.h>
       
      @interface HelloWorld : NSObject
       
      - (void)sayHelloWorld;
       
      @end

      HelloWorld.m

      #import "HelloWorld.h"
       
      #import <UIKit/UIKit.h>
       
      @implementation HelloWorld
       
      - (void)sayHelloWorld
      {
          UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"alert!"
                                                              message:@"hello, world!" 
                                                             delegate:nil 
                                                    cancelButtonTitle:@"OK" 
                                                    otherButtonTitles:nil];
          [alertView show];    
      }
       
      @end

       
       ビルドが成功すると “Product” のところに “HelloWorldFramework.framework” が
       作成されてます。
       そして、その “HelloWorldFramework.framework” を選択し、右クリックして、
       Finder で表示します。

       
       
       Finder で表示したところです。
       ここにある “HelloWorldFramework.framework” というディレクトリが
       今回使うフレームワークです。
       これをどこかわかりディレクトリにコピーしておきます。

       お疲れ様でした!
       これで、一旦はオレオレフレームワークの作成が終わりました。
       ツールのおかげでほんとに楽ですよね!!

      アプリケーション側での利用

       
       アプリにて、先程の “HelloWorldFramework.framework” を
       組み込んでいきます。
       適当に新規プロジェクトでアプリを作成します。
       ”UseFramework” としています。

       
       
       
       新規作成したアプリに作成したフレームワークを追加します。
       解りやすいところにコピーした “HelloWorldFramework.framework” を
       選択して追加します。

       
       アプリにボタンを追加して、関数を追加してボタンが押下されると
       関数が呼ばれるようにします。
       今回、say というメソッドを作成し呼び出すようにしました。

      #import "HelloWorldFramework/HelloWorld.h"
       
      ...(中略)
       
      - (IBAction)say:(id)sender
      {
          HelloWorld *hello = [[HelloWorld alloc] init];
          [hello sayHelloWorld];
      }

       注意点として、フレームワーク内のヘッダを呼び出す場合は、
       #import “HelloWorldFramework/HelloWorld.h” のように
       ”フレームワーク名/呼び出したいヘッダ”
       のように記載します。

       
       プロジェクトを実行し、ボタンを押下すると無事に
       ”hello, world!” が表示されました!!

      おわりに

       ツールのおかげでほんとに楽だったと思います。
       実際に自分で1から作ろうとするとユニバーサル化含め
       メンドクサイ事がいっぱいなのですが、ほんとに楽です。
       これで気軽にフレームワークが作成できますね!

       ぜひ、みなさんの開発ライフにご活用ください!

        はてなブックマーク - rails と jquery treeview でディレクトリツリーをらくらく実装する
        このエントリーをはてなブックマークに追加

        ども、Fusic 河野です。
        だいぶ久しぶりですね。

        今度の rubykaigi2011 に参加させて頂くこととなりました!
        会場で見かけたら、ぜひお気軽にお声をかけてくださいませ。

        [rubykaigi2011]
        rubykaigi.org/2011/

        それと、もう一つ告知です。
        来る7月28日(木)、福岡で活動している Androidの会福岡支部九州GTUG
        HTML5+α福岡iDevQ、そして、AppleKnight の4つのコミュニティが
        福岡県Ruby・コンテンツ産業振興センターに集結し、同時に勉強会、懇親会を行います。

        ご興味のある方は、ぜひともご参加ください!!
        参加登録は下記のリンク先より facebook にて参加表明をお願いいたします。

        [futuresync]
        futuresync.jp/

        さて、わたくし、前回の記事でも書きましたが、主に ruby on rails を
        やっており、ZENPRE の iPhone アプリを担当させていただいてます。

        今回とあるお客様の rails 案件にて、ツリービューを作る必要がありました。
        一から作ろうかと思っていたところ、jquery ui の treeview を見つけ、
        使ってみたので、簡単なサンプルとともにご紹介をします。

        いやー、それにしてもコレ凄く便利です!!

        まずは、バージョン確認です。

        $ ruby -v
        ruby 1.9.2p0 (2010-08-18 revision 29036) [i686-linux]
         
        $ rails -v
        Rails 3.0.9

        rails のプロジェクトを作成します。

        $ rails new treeview_test
        $ cd treeview_test/
        $ rm public/index.html

        prototype.js を削除ります。
        サヨナラ〜、お元気で〜♪

        $ vim Gemfile
         
        gem 'jquery-rails'
         
        $ rails g jquery:install

        ツリービューを表示するためのコントローラを作成します。

        $ rails g controller Treeviews index
        $ vim routes.rb
         
          root :to => "treeviews#index"

        そして、本日の主役のご登場!
        jquery treeview を下記よりダウンロードします。
        bassistance.de/jquery-plugins/jquery-plugin-treeview/

        js や css、jpg などを rails の各ディレクトリにコピーします。
        画像は、images に “treeview” というディレクトリを
        作成し、そこにコピーしています。
        そして、jquery.treeview.css に記載されている画像のパスを
        ちょっと変更します。

         images/xxxx → ../images/treeview/

        treeview を取り込みます。

        $ vim app/views/layouts/application.html.erb
         
        <!DOCTYPE html>
        <html>
        <head>
          <title>TreeviewTest</title>
          <%= stylesheet_link_tag :all %>
          <%= javascript_include_tag :defaults %>
          <%= javascript_include_tag 'jquery.treeview' %>
          <%= javascript_include_tag 'jquery.treeview.edit' %>
          <%= javascript_include_tag 'jquery.treeview.async' %>
          <%= csrf_meta_tag %>
        </head>
        <body>
         
        <%= yield %>
         
        </body>
        </html>

        ツリービューを表示するため view を書き換えます。

        $ vim app/views/treeviews/index.html.erb
         
        <script type="text/javascript">
        $(document).ready(function(){
          $("#example").treeview({});
        });
        </script>
         
        <ul id="example" class="filetree">
        	<li><span class="folder">Folder 1</span>
        		<ul>
        			<li><span class="file">Item 1.1</span></li>
        		</ul>
        	</li>
        	<li><span class="folder">Folder 2</span>
        		<ul>
        			<li><span class="folder">Subfolder 2.1</span>
        				<ul>
        					<li><span class="file">File 2.1.1</span></li>
        					<li><span class="file">File 2.1.2</span></li>
        				</ul>
        			</li>
        			<li><span class="file">File 2.2</span></li>
        		</ul>
        	</li>
        	<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
        		<ul>
        			<li><span class="file">File 3.1</span></li>
        		</ul>
        	</li>
        	<li><span class="file">File 4</span></li>
        </ul>

        完成です!!
        いやー、ほんとめちゃくちゃ簡単ですね!!
        まー、これだけだと寂しいのとせっかくの rails も意味がないので
        rails にディレクトリ一覧を返す関数を作成し、ajax 使って
        ディレクトリ階層を動的に表示できるように変更します。
        おー!rails っぽいですね!

        routes にパスを追加します。

        $ vim config/routes</code>
         
          match '/treeviews/get_dir_list' => 'treeviews#get_dir_list'

        さっきの view を書き換えます。

        $ vim app/views/treeviews/index.html.erb
         
        <script type="text/javascript">
        $(document).ready(function(){
          $("#example").treeview({});
          $("#example2").treeview({
        		url: "<%= treeviews_get_dir_list_path %>"
          });
        });
        </script>
         
        <h4>通常のツリービュー表示</h4>
         
        <ul id="example" class="filetree">
        	<li><span class="folder">Folder 1</span>
        		<ul>
        			<li><span class="file">Item 1.1</span></li>
        		</ul>
        	</li>
        	<li><span class="folder">Folder 2</span>
        		<ul>
        			<li><span class="folder">Subfolder 2.1</span>
        				<ul>
        					<li><span class="file">File 2.1.1</span></li>
        					<li><span class="file">File 2.1.2</span></li>
        				</ul>
        			</li>
        			<li><span class="file">File 2.2</span></li>
        		</ul>
        	</li>
        	<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
        		<ul>
        			<li><span class="file">File 3.1</span></li>
        		</ul>
        	</li>
        	<li><span class="file">File 4</span></li>
        </ul>
         
         
        <h4>sync させたツリービュー表示</h4>
        <ul id="example2" class="filetree"></ul>

        treeview の url に先ほど routes に追加したパスを記載します。

        controller もゴニョゴニョと追加します。

        $ vim app/controllers/treeviews_controller.rb
        class TreeviewsController < ApplicationController
         
          def index
          end
         
          def get_dir_list
            root_flg = (params["root"] == "source") ? true : false
            path = "./"
            path = params["root"] unless root_flg
            arry = []
            d = dir_list(path, arry)
            render :json => arry || [], :layout => false
          end
         
        protected
          def dir_list(path, arry=[], root_flg=false)
            Dir.glob("#{path}/*").map do |d|
              classes = "file"
              classes = "folder" if FileTest.directory?(d)
              hasChildren = (FileTest.directory?(d)) ? true : false
            	h = {"id" => d, "text" => File.basename(d), "path" => File.dirname(d), "expanded" => false, "classes" => classes, "hasChildren" => hasChildren, "children" => []}
              arry << h
            end
            arry
          end
         
        end

        dir_list() の関数でディレクトリ情報の hash を作成し、view 側に json で返します。
        返された json を treeview 側が解析してツリービューを表示します。
        返す hash の id のところがミソでして、ここにパスを記載していると
        treeview にてディレクトリを選択された場合、params["root"] に選択された
        ところのパスが渡されます。
        一番上のルートの場合には、params["root"] には、”source” という文字が渡ってきます。

        今回もいつもの如くソースは github にあげてます。
        また、サンプルをここに置いてますので実際の動作を確認できます。
        今回始めて dotcloud を使ってみました。
        これまためちゃくちゃ便利ですねー!
        dotcloud で rails を動かす方法とかは、また次回にでも、デモ。

        それでは、良い rails ライフを〜。

        [ソース]
        github.com/sora0513/TreeViewTest

        [デモ]
        8befe980.dotcloud.com/