Posted at

ofxCef を使用した app を作る

More than 3 years have passed since last update.

ofxCef のビルド手順 の続きです。


環境


projectGenerator でプロジェクトを作成

いつもと同じように projectGenerator を使ってプロジェクトを生成します。

Addons で ofxCef にチェックを入れるのを忘れずに。


サーチパスの修正

僕の環境だとデフォルトのヘッダサーチパスが下記の様におかしなことになります。。

スクリーンショット 2015-08-23 0.59.57.png

まずはこれを以下のように修正します。


  • $(OF_CORE_HEADERS)

  • ../../../addons/ofxCef-master/libs

  • ../../../addons/ofxCef-master/libs/CEF

  • ../../../addons/ofxCef-master/libs/CEF/osx32

  • ../../../addons/ofxCef-master/libs/CEF/osx32/include

  • ../../../addons/ofxCef-master/libs/CEF/osx32/include/base

  • ../../../addons/ofxCef-master/libs/CEF/osx32/include/base/internal

  • ../../../addons/ofxCef-master/libs/CEF/osx32/include/capi

  • ../../../addons/ofxCef-master/libs/CEF/osx32/include/internal

  • ../../../addons/ofxCef-master/libs/CEF/osx32/include/wrapper

  • ../../../addons/ofxCef-master/libs/CEF/osx32/lib

  • ../../../addons/ofxCef-master/src


ファイルタイプの変更

次に ofxCef の中で Objective-C のコードを使用しているファイルについて、そのファイルタイプを "Objective-C++ Source" に変更します。具体的には以下のファイルです。


  • ofxCEF.cpp

  • ofxCEFRenderHandler.cpp

スクリーンショット 2015-08-23 1.17.23.png


process_helper_mac.cpp を削除

main関数が2つあるぞ!と怒られるので Build Phases > Compile Sources から process_helper_mac.cpp を削除します。


ライブラリを追加

General > Linked Frameworks and Libraries から以下を追加します。


  • Chromium Embedded Framework.framework

  • libcef_dll_wrapper.a

Chromium Embedded Framework.framework は $OF_PATH/addons/ofxCef-master/libs/CEF/osx32/lib に、libcef_dll_wrapper.a は前回ビルドしたものをそれぞれ使用します。


Run Script を追加

Build Phases > + > New Run Script Phase で以下のスクリプトを追加します。

exec cp -Rf "../../../addons/ofxCEF-master/libs/CEF/osx32/lib/Chromium Embedded Framework.framework" "${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app/Contents/Frameworks/"

exit 1

exec install_name_tool -change "@executable_path/Chromium Embedded Framework" "@executable_path/../Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework" "${BUILT_PRODUCTS_DIR}/${EXECUTABLE_PATH}"

exit 1

cp -Rf "../../../addons/ofxCef-master/example_ofxCEF/bin/cefHelper.app" "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/"

mv "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/cefHelper.app/Contents/MacOS/cefHelper" "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/cefHelper.app/Contents/MacOS/$PRODUCT_NAME Helper"
rm -rf "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/$PRODUCT_NAME Helper.app"
mv "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/cefHelper.app" "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/$PRODUCT_NAME Helper.app"
exec install_name_tool -change "@executable_path/Chromium Embedded Framework" "@executable_path/../../../../Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework" "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Frameworks/$PRODUCT_NAME Helper.app/Contents/MacOS/$PRODUCT_NAME Helper"

exec "../../../addons/ofxCef-master/example_ofxCEF/make_more_helpers.sh" Frameworks $PRODUCT_NAME

最後のスクリプトのみ Input Files に $(BUILT_PRODUCTS_DIR)/$(EXECUTABLE_PATH)を追加してください。


ソースの修正

だいぶ疲れてきましたがもう少しです!

ofApp.h / .cpp を以下のように修正します。


ofApp.h

#pragma once


#include "ofMain.h"
#include "ofxCEF.h"

class GLFWwindow;

class ofApp : public ofBaseApp{

public:
void setup();
void update();
void draw();
void exit();

// Chromium の JS からメッセージを受け取るためのハンドラ
void gotMessageFromJS(ofxCEFMessageArgs& msg);
// Chromium からイベント受け取るためのハンドラ
void eventFromCEF(ofxCEFEventArgs& e);

// CEF
ofxCEF *cef;
};



ofApp.cpp

#include "ofApp.h"

#include "ofAppGLFWWindow.h"

// スクロールイベントを受け取るためのハンドラ
void mouseScroll(GLFWwindow* window, double x, double y){
((ofApp *)ofGetAppPtr())->cef->mouseWheel(x*10, y*10);
}

void ofApp::setup(){
#if defined(TARGET_OSX)
// スクロールイベントのコールバックを登録
glfwSetScrollCallback( ((ofAppGLFWWindow *) ofGetWindowPtr())->getGLFWWindow(), mouseScroll);
#endif

cef->setup();

ofAddListener(cef->messageFromJS, this, &ofApp::gotMessageFromJS);
ofAddListener(cef->eventFromCEF, this, &ofApp::eventFromCEF);

ofSetFrameRate(60);
ofSetVerticalSync(true);

cef->load("http://google.com");
}

void ofApp::update(){
cef->update();
}

void ofApp::draw(){
ofBackground(0);
cef->draw();
}

void ofApp::exit() {
cef->exit();
delete cef;
cef = NULL;
}

void ofApp::gotMessageFromJS(ofxCEFMessageArgs& msg){

}

void ofApp::eventFromCEF(ofxCEFEventArgs& e){

}


さらに main.cpp を以下のように修正します。


main.cpp

#include "ofMain.h"

#include "ofApp.h"
#include "ofAppGLFWWindow.h"

int main( ){

// エントリーポイントでまず CEF を初期化
int argc = 0;
char** argv = NULL;
ofxCEF * cef = initofxCEF(argc, argv);

ofAppGLFWWindow window;
ofSetupOpenGL(&window, 1400, 850, OF_WINDOW);

// 初期化した CEF を ofApp に渡す
ofApp * p = new ofApp();
p->cef = cef;
ofRunApp( p );
}


それではビルドしてみましょう。見慣れた Google のトップが表示されれば成功です!

スクリーンショット 2015-08-23 2.29.03.png


まとめ

このようにまだまだ罠が多いですが、oF で Chromium の恩恵を受けられるのは大きいし、Web 系フロントエンドの人に UI を書いてもらってグラフィックスだけ oF で、という協働のしかたも考えられたりして夢が広がります。

今回は書きませんでしたが JS を使ったコミュニケーションも可能なので、今後も色々探っていきたいと思います。