cocoapodsでGPUImageを使って楽ちんに高速フィルター開発のチュートリアル技術ネタ(Apple製品やアプリなど)Tweet2時間ぐらいで、iPhoneアプリ作るの楽しいかも!と思ってもらえるようなチュートリアルです。した画面遷移と、フィルターアプリを簡単に作ってみることで、iPhoneアプリ開発に興味を持ってもらい、今後の一歩になればと思います。cocoapodsを使うことで、便利なライブラリーを簡単に使うことができるようになり、より高速なアプリ開発ができるようになります。projectを選択しよう。Applicationを選びます自分のプリの情報を入れましょう。ドメインを持っている場合はそれの逆にしたものを入れるのが一般的。世界でユニークであれば何でも良い。作成したクラスの接頭語としてつく文字列。自分の好きなところに保存して、Createボタンをクリック。あとで、ターミナル操作に慣れてない人はあとでわかりやすくするために、デスクトップに保存しておいてください。Xcodeの左上の再生ボタン)で実行してみましょう!すると、ソースコードがコンパイルされて、iPhoneシュミレーターが起動されますStoryboardで画面遷移してみる次に、Storyboardを使って、画面遷移をしてみましょう。左のファイルメニューから、Main.storyboardを探して、クリックします。Segueとポップアップされてpushmodalcustomと選べるので、modalを選択。すると、画面の間に矢印が出現しました。これで、ボタンを押したら、矢印の先の画面へ遷移することができるようになりました。遷移先の画面をわかりやすく背景を黒色にしておきましょう。Viewのimageに設定しましょう。すると、画像が表示されます。実行すると、ボタンを押したあと、画面遷移したあとが黒い画面だったところに写真が表示されましたね。こんな感じで画面遷移などを作っていったりします。Storyboardを使うと簡単にモックを作れるので、これだけ使えるのも価値があると思います。cocoapodsをインストールするiOSアプリ開発には様々な便利なライブラリーがあります。今回は超高速フィルターを実現するためにGPUImageというライブラリーを使います。そのライブラリーを簡単に使うために、cocoapodsというシステムを使います。cocoapodsを使うのが今風なので、最初から覚えて使ってしまいましょう。ターミナル.appを開いてください。cocoapodsと入力して、Enterボタンを押してください。パスワードが求められるので、パソコンに設定しているパスワードを入力してください。これで、cocoapodsのインストールは完了です。~/Desktop/FilterAppSampleです。Podfileとすると、Podfileができます。それを画像の時と同じように、Xcodeにドロップして追加します。一度、Xcodeを閉じてください。installとします。すると、FilterAppSample.xcworkspaceが新しく生成されるので、これからはこれを使って作業をしますこれをダブルクリックするとXcodeが立ち上がります。一度、command+Rで実行して、先程まで動いていたものが動くことを確認しましょうフィルターをかけてみよう!いよいよ、フィルターを作っていきましょう!まずはセピアフィルターを試してみましょう。ClassのClasssのところをGPUImageViewにしましょう。次に、option+command+Enterとすると、次のような画面になります。この画面で、Storyboardとコードをつなげていきます。コードの登場です!右側が、FASViewController.hであることを右の画面の上のところで確認して下さいボタンでつなげた時と同じように、controlを押しながら、ドラッグすると、青い線が出ます。Nameのところに、imageViewといれて、Connectボタンを押します。すると、FASViewController.hは以下のようになります。することで、コードから、Storyboardの画面の要素にアクセスすることができ、さまざまな動作をコードで書くことができます。<GPUImage.h>を追加して以下のようにします。これはライブラリーを追加するおまじないです。*imageView;@endさて、次は、FASViewController.mを編集していきます。最初は以下のようになっていると思います。コントラストを設定する。次はUISliderをつかって、インタラクティブにコントラストを変えてみましょう。Storyboardで、Sliderを探して、ドロップしましょう。設定で、値を0から4までの値を移動できるようにします.ふたたび、コードとSliderをつなげるために、option+command+Enterを押しましょう。Controlをおしながら、Sliderから、FASViewController.hに青い線を引っ張ります。こんどは、ConnectionのところをActionに変えて、NameをchangedSliderValueとでもしましょう。TypeをUISliderにしておきましょう。connectボタンを押しますそして、FASViewController.mに戻ってみると以下の様なコードが生成されています。この中にコードを書くことで、Sliderの値が変わるたびに様々な動作をさせることができます。}試しに、スライダーの値をログに出してみましょう。sender.value);}さて、この値を元に、写真のコントラストを変えてみましょう。変更するフィルターと元写真をインスタンス変数にする必要があるので、以下のようにコードを変更します。コントラストを設定する。http://blog.kasajei.com/entry/2013/03/09/%E3%80%8C%E8%9C%B7%E5%B7%9D%E5%AE%9F%E8%8A%B1%E7%9B%A3%E4%BF%AE%E3%82%AB%E3%83%A1%E3%83%A9%E3%82%A2%E3%83%97%E3%83%AAcameran%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E6%95%99あとオススメの参考書です。cocoapodsでGPUImageを使って楽ちんに高速フィルター開発のチュートリアルTweetブログ「PEAKを生きる」の読者になりませんか?読者数が増えれば増えるほど、質の高い情報をお届けできるように頑張ります。ブログを読んで一緒に、能力を向上させませんか?Twitterでしか得られない情報も、つぶやいています!最新情報をお届けします!質問もお気軽にどうぞ。はてなブログPro趣味は能力・健康に関する情報収集と実践。科学によるエビデンスを重視する、実践も積極的に行う。本を年間300冊読む。