fancyboxを導入しようとしてみました。(jQueryプラグインの使い方)

注意:fancyboxは実際に動きましたので、そちらの参考にしてくださっても結構です。とはいえ、今記事のメインはどちらかというと、「Litebox系プラグインのfancybox」ではなく、「よくわからないプラグインを使うために、サンプルソースから必要部分を切り出す方法」 です。

なお、fancyboxのバージョンは 2.1.5 。2013年07月29日時点の最新版です。


追記:「fancyBoxで装飾したフォームからPOSTを送信する」方法とサンプルコードを公開しました。

イントロダクション

デザイナ氏の要望により、コメント欄は、画像ボタンをクリックするとページ上に上書きする形で登場させることになりました。

そのような機能を持つJavaScriptライブラリを探した結果、 fancyboxに行き着きました。(この時点でLightboxをしっかり調べなかったことが悔やまれます...)
早速これを使おうとしたのですが、Webの情報通りの方法では、使うことができませんでした。やはりWeb関連技術は変化が激しいようです。

とはいえ、そこはそれ。

fancyboxには(ローカルで!)動作するサンプルが添付されています。今回は、サンプルを解体しつつ、fancyboxの組み込み方を調べていきます。

最終的なソースは末尾に添付しますので、流れは流れとして雰囲気をお楽しみください。

HTML文の切り出し


コメント入力欄をボタンクリックでポップアップさせるのが目標です。そこで、サンプルからそれらしきものを探します。
 まず、適当にリンク名でアタリをつけつつ、
 「Open single item, custom options」リンクが該当するようです。
iframeによって
Ctrl+Uか、htmlファイルをテキストエディタで開いて、該当部分を探します。
必要最小限だけを切り出したいところですが、デモおよびfancybox本体がcssをどのように使っているかわからないので、 「Open manually」以下の項目を切り出します。


HEAD内のjavascriptは、今回必要な部分はごく一部でしょうが、最初なのでこの部分もそのままコピーします。JavaScript呼び出し部分はそのまま...のつもりだったのですが、ちょっとリンクを工夫しています。
外部のライブラリは、可能な限り mods/ディレクトリに格納するつもりなので、fancyboxもこの下にしまい込みます。ディレクトリ構造をバージョンに依存させたくないので、fancybox というリンクを作成して、fancybox本体が入っている fancyapps-fancyBox-18d1712 ディレクトリと繋げます。


ヘッダとフッタはそれぞれ、リンクとJavaScript呼び出し部分と一緒にコピーしておきましたので、これでHTML文章としての体裁は整います。


fancybox呼び出し部分の切り取り

動作するようになったら、さらに要素を切り取っていきます。

まず気になるのが、 ヘッダでのfancyboxの呼び出しと条件分岐です。
どう考えても、使わないidやタグが多いので、整理していきます。

id属性 "#fancybox-manual-b"と、デフォルト設定かもしれない $('.fancybox').fancybox(); 以外の属性に対するコードを削除します。

動作確認してから、 $('.fancybox').fancybox(); も削除して、また動作確認します。

問題なく動くようなので、id名を変えてみようと思います。
ついでにid要素ではなく、class要素に変更します。これは最終的に、ひとつのページに複数のfancyboxリンクを作るのが目的であるため、その下準備です。

HEADにある関数内で、idを指定している部分をclassに書き換えます。

             $(".fancybox_iframe").click(function() {
本当は、あまり汎用的な名前をつけないほうが良い気もしますが。(fancybox内部の指定と重複しそうで怖い。)



なお、この段階でヘッダ内のcss定義(外部ファイルの fancybox.css ではなく、内部に定義されていたほう)を削除しています。


結果


最終的にこんな感じになりました。
あまり要素を切り取りすぎても、あとで必要になって追加することになりそうだったので、これで私的用途に叶う最小版ということにします。
(現状で、呼び出し小ページ本体には興味がないのでデモのまま。)



ディレクトリ構造は以下のようになりました。

fancyapps-fancyBox-18d1712 (fancybox本体。配布されている状態のまま)
    lib
    source
    ...                (その他)
iframe.php   (上書き表示される子ページ)
index.php    (メインページ・親ページ)
mods         (外部ライブラリをまとめて入れておくためのディレクトリ)

    fancybox ( ../fancyapps-fancyBox-18d1712 へのリンク)    


呼び出し子ウィンドウでphpの実行、GET渡しと、複数のfancybox

本来の目的はコメント投稿欄です。なので本来は、これまで手を入れてこなかった、子ウィンドウのiframe.phpには手を入れていくところだったのですが。
上書き表示されるformの作成、Lightboxでできるそうです
調査不足が残念な感じではありますが、子ウィンドウ側でJavaScriptを試行しているうちに新しい知識が付きましたし、jQueryのプラグインを使う感覚も知ることができました。(プラス思考)

というわけで次回、「『BLOG 防備録』様を見ながらLightboxでform」に続く?


その他雑記


「Lightbox系プラグイン」というのは、ページ内でコンテンツの上に上書きの形でかぶせる機能を指すのでしょうか。
(この動作はよく、「画像をポップアップさせる」と紹介されています。私は"ポップアップ"といえば、Windowsのダイアログのような、別ウィンドウが立ち上がってくる状態を想像してしまいますが。)


ところで、Lightboxを見ただけでも、jQueryの類似プラグインが乱立しているようですが、1年後にメンテナンスされているのはこのうち何割なんでしょうかね?

Ubuntu13.04でデュアルディスプレイとデュアルペンタブレット環境を作った雑記

ペンタブレット2枚刺しは男のロマン。

プログラマやデジ絵師ならば、デュアルディスプレイを使っている方が多いと思います。
特に絵師の場合、デュアルディスプレイでペンタブ+マウスで操作、片側のディスプレイをお絵描き作業用としてペンタブの操作エリアを割り当てる、といった構成になっているのではないかと。
しかし、マウスとタブレットペンを持ち替えるのは思いのほか面倒です。
そこで提唱しますのがずばり、デュアルディスプレイ環境における『デュアルペンタブレット構成』です。




PCデスク環境(2013年7月)

わたしも以前はペンタブ+マウスでした。ディスプレイは1枚でしたが、ペンタブ操作に慣れなかった当時は困ったらマウスに持ち替えていました。
持ち替えが面倒だったため、右手にペン、左手にマウスで操作をしていました。今ではすっかり左手マウスに慣れました。
現在はペンタブでの操作に慣れたため、マシンにマウスを繋いでいません。


プログラマを志してから、すでに6年強。技術はともかく、PC周辺環境は、最初期の理想にやっと追いつきました。感慨深いものがあります。
閑話休題。


環境
PCは、Ubuntu13.04 デスクトップ(PCのハードウェア仕様は別のブログ記事をご覧ください。)
ディスプレイは、両方とも三菱製フルHD(1920x1080)
 Diamondcrysta RDT272WX(IPSパネル)、 Diamondcrysta RDT271WLM(TNパネル)、
 これをDVIとD-sub15でそれぞれ接続しています。
ペンタブレットは、二台とも intuos4 です。(片方はwirelessですがUSB接続して運用)

結果的に、今回はUbuntuのシステム設定が優秀で、設定ファイルやコマンドを駆使して試行錯誤する必要はありませんでした。
ブログ記事にする甲斐はありませんが、 楽であることは良いことです。


デュアルディスプレイ

とりあえずディスプレイ情報を取得しようと、xrandrを引数なしで実行たところ、思いがけず2台目のディスプレイが急に映り始めてびっくりしました。
ディスプレイ配置の左右が逆だったので困りましたが。
(xrandrには、デュスプレイを無効化するoffオプションがあります。画面サイズなどを設定すればnoになるのかと思ったのですが、コマンドでonにすることができませんでした。最終的にシステム設定の「ウィンドウ」項目でディスプレイを有効にしました。あるいは再起動すれば良かったのでしょうか。)

システム設定の「ウィンドウ」項目
システム設定の「ウィンドウ」項目

2台のディスプレイが有効になった状態

ログイン時に画面表示が乱れる


デュアルペンタブレット

(注意:ペンタブレットを2枚にしても、魂が中学二年生に還元されるだけで、絵がうまくなったりの効果は期待できません。)

Wacomタブレットを設定するためにxsetwacomコマンドを使用するつもりだったのですが、Ubuntuのシステム設定ツールが思ったより優秀だったので、(というか普通に使うことができたので)そちらに使うことに。
なお、xsetwacomコマンドについては、Kawaji's Weblog様にて詳しく解説されています。(検索でも一番最初に出て来るページです。)古くなってきたせいか、今はそのまま使えない部分もありますが。


Ubuntuのシステム設定にある「ワコムタブレット」を開くと、下のような設定画面が出てきます。
「ワコムタブレット」設定画面
しっかり2枚目のタブレット Intuos4 Wireless (WL)が認識されています。
「画面にマッピング」を選べば設定画面が出てきます。
「画面にマッピング」項目
チェックを入れて、そのペンタブレットを割り当てる画面を選択します。
チェックボックスを入れたとき、操作できなくなる場合がありうるので注意しましょう。(割り当てられたディスプレイに設定画面がない場合に。)



GIMPでデュアルペンタブレットを利用するための設定

GIMPは、システムとは別に設定する必要があります。
2台目のペンタブレットは、「入力デバイスの設定」で認識させないとペンや範囲選択に使うことができません。
ペンタブレットを有効化するには、モードを「不可」から「ディスプレイ」に変えます。(好みで「ウィンドウ」でも良いです。)
GIMPのペンタブレット設定

今後について

夢のデュアルペンタブレット環境を実現することができました。
これから、使い勝手を検証していきたいと思います。
この環境に慣れるのがいつになるかはわかりませんが、ゆっくりやっていきます。

fancyboxデモページを切り出したもの(付属物)


以下のソースは、fancyboxのデモページを、わたしの用途に合うように切り出したものです。
こちらの記事の付属物です。

元のファイルはfancybox.net様が配布しているfancyboxに添付されている、デモページのhtmlファイルです。
本体および正しいデモファイル、詳しく正確な情報については、そちらへ。

<!DOCTYPE html>
<html>
<head>
    <title>cut to fancyBox Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
    <script type="text/javascript" src="mods/fancybox/lib/jquery-1.10.1.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="mods/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="mods/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="mods/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="mods/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="mods/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="mods/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="mods/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="mods/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox_iframe").click(function() {
                $.fancybox.open({
                    href : 'iframe.php',
                    type : 'iframe',
                    padding : 5
                });
            });
        });
    </script>

</head>

<body>

    <a class="fancybox_iframe" href="javascript:;">
        Open single item, custom options
    </a>
</body>
</html>

Windows版Gtk+による、ウィンドウアプリケーション開発環境の作り方

Gtk+ライブラリを使うと、ボタンとテキスト、簡単な図形などを表示するプログラムならば簡単に書くことができます。
実験やモックアップに、ちょっとしたウィンドウアプリケーションを作るのに便利です。
なんといってもありがたいのは、標準的なWin32アプリケーションではウィンドウを出すだけで120行のコードが必要であるのに対して、Gtkは20行で済むところです。

gtk作成した、何もしないウィンドウアプリケーション
Gtkで作成した、何もしないウィンドウアプリケーション


Gtkはクロスプラットフォームであることと、Win32APIより新しいためシンプルかつわかりやすいのが利点ですが、Windows環境でコンパイルするための情報が少ないという欠点を持っています。

そこで今回は、わたしなりに試行錯誤して確立した、Windows環境でのGtkアプリケーション開発環境についてまとめています。


追記:構築済み環境をgithubにて公開しています。

ファイルの取得

MinGWのインストール

今回はコンパイラにMinGW(gcc)を使用します。MinGWは、コマンドプロンプトから使うコンパイラです。
公式ページで「Download」という単語をたどっていけば、そのうちSourceforgeのダウンロードページへ出ます。ページの上のほうあたりに、最新版インストーラへのリンクがあります。
ちなみにこの記事を書いた時の最新版は「 Looking for the latest version? Download mingw-get-inst-20120426.exe (662.7 kB)」でした。
インストーラを起動すれば、あとは簡単です。ただし、インストール中はインターネットに接続している必要があります。

MinGWを環境変数に設定

通常、MinGWをインストールしたら、環境変数を設定して使いやすくしておくのが通例です。
Windowsボタンを押して「コンピュータ」(または「マイコンピュータ」)を右クリックし、「プロパティ(R)」から「システムの詳細設定」で、下にある「環境変数(N)」をクリック。

システム環境変数から「Path」を探して追記します。
既に書いてある内容は絶対に消さないで、 末尾に、
;C:\MinGW\bin\;
を書き足します。
(何をしているかというと、MinGWのインストール先を環境変数に登録しています。環境変数「Path」に登録されたディレクトリの下にあるファイルは、コマンドプロンプトでパスを省略して呼び出すことができるようになります。つまり、"gcc"の3文字だけでコンパイラが呼べるようになります。)


確認のために、コマンドプロンプトを開いて、gccと打ってエンターキーで実行してみましょう。
gcc: fatal error: no input filesなどと出力されたら成功です。今回は、コンパイルに必要なファイルが存在しないためgccがエラーを返しますが、つまりはgccを呼ぶことに成功しています。

Gtk+ for Windows ライブラリのダウンロード

公式配布ページはGoogle検索でもすぐ出てくるのですが、全文英語かつダウンロード可能なファイルが多く、どれを落とせばよいのか、一見して悩みます。
結論としては、本家のGTK公式サイトが、コンパイル済みですぐ使える全部入りのライブラリをzipで配布しているので、それを選びます。「all-in-one bundle 」というリンクの先にあります。
入手したzipの使い方については下で説明します。といっても、解凍して配置するだけで、ライブラリフォルダ自体には手を加えることはありません。


プロジェクトディレクトリとファイルの配置、コンパイル

開発環境を構築するにあたって、環境の作り方にいろいろな選択肢があるのですが、とりあえず一つに絞って解説します。
『環境変数のパス指定はプロジェクト内に完結・プロジェクト内にGtkライブラリファイルを内包・パス指定はすべて相対パス。』
これはプロジェクトの外に影響を与えることがなく、フォルダを移動してもコンパイル可能な形態です。(MinGW除く)

プロジェクトディレクトリの作成

空のディレクトリを作成して、ファイルを配置するだけです。

まず、空のディレクトリですが、C:ドライブの直下に作るのがオススメです。とはいえ、ホームディレクトリやデスクトップに作っても基本的には問題ありません。(というかそうなるように設定していきます。)
ディレクトリの名前も適当に付けます。hellogtkでいいです。

前段階でダウンロードしておいた、Gtk for Windowsのzipファイルを解凍します。
解答するとたぶんそのまま「gtk+-bundle_2.24.10-20120208_win32.zip」 という名前のディレクトリになると思いますので、これを「gtk」にリネームしておきます。(そのほうが楽だからです。)
このgtkフォルダを、hellogtkフォルダの下に入れます。
これだけで配置終了です。

これから、
開発用コマンドプロンプトを呼び出すためのバッチファイル「!cons.bat」
コンパイルテスト用に、Gtkウィンドウアプリケーションのソースファイル「hello_gtk.c」
を作成して配置します。

開発環境バッチファイル「!cons.bat」

コンパイルはコマンドプロンプトで行います。
また、Gtkアプリケーションをコンパイルするためには、環境変数を設定する必要があります。
MinGWのときのように、環境編集Pathを設定してもよいのですが、今回はバッチファイルを作成し、環境変数を設定済みのコマンドプロンプトを呼び出すこととします。

コマンドプロンプトを呼び出すバッチファイルを書く

メモ帳を開いて、以下の一行を記入します。
cmd.exe
以上です。 !cons.txtという名前で保存しておいてください。
(なお、この名前に理由はありません。何でもいいです。)

テキストファイルをバッチファイルに変える

といっても、ファイルの拡張子を変えるだけの簡単なお仕事なのですが。
ですが、実はここが一番の難所です。
というのも、Windows環境は、デフォルトで拡張子を変えられないからです。

というわけで、Windowsの設定を変えます。
適当なフォルダを開いて、Altキーを押すと、タスクバーが出ますので、その中の「ツール(T)」 から「フォルダーオプション(O)」を呼び出します。
「表示」タブの詳細設定から、「登録されている拡張子は表示しない」のチェックボックスを外して無効にします。
 上の「フォルダーに適用(L)」ボタンを押して、全フォルダに適応します。

この状態で、先ほど作った !cons.txt ファイルを見ると、たぶん、「!cons.txt」か 「!cons.txt.txt」あたりのファイル名になっており、拡張子.txtがしっかり表示されているはずです。

ファイルを右クリックして出てくる「名前の変更(M)」から拡張子を変更します。
バッチファイルにするには、ファイル名の末尾が".bat"になっている必要があります。
ファイル名を、
!cons.bat
に変えてください。

では !cons.bat ファイルをダブルクリックして実行してください。
コマンドプロンプトが立ち上がれば、ここまでは上手く行っています。

Gtkアプリをコンパイルできる環境変数を設定する

PATHを指定する必要があります。
SETコマンドを使えば、システムの環境変数を上書きする形で、そのコマンドプロンプトだけで有効な環境変数を設定することができます。
set PATH=gtk\bin\;%PATH%
コマンドライン上でそのまま入力して使えます。つまり、バッチファイルに書いて使えるということです。
なお、バッチファイルを編集するには、右クリックから「編集」を選択します。

書き足すと、バッチファイルの中身はこんな状態になっていると思います。(コメントを追記しておきました。 )

!cons.bat

    #gtkライブラリにパスを通す
    set PATH=gtk\bin\;%PATH%

    #コマンドプロンプトを呼び出す
    cmd.exe



バッチファイルをダブルクリックすればコマンドプロンプトが起動します。そのコマンドプロンプト上で、
gtk-demo
と打って実行し、gtkのウィンドウアプリケーションが起動すれば、バッチファイル作成は成功です。

gtk-demoを実行(コマンドラインから)
gtk-demoを実行(コマンドラインから)

Gtkのウィンドウアプリケーション「hellogtk.c」


以下の内容のテキストファイルを作成します。

hellogtk.c

#include <gtk/gtk.h>

int main (int argc, char **argv){
    
    /* 国際化(日本語対応のため) */
    gtk_set_locale();
    /* GTK+ の初期化 */
    gtk_init(&argc, &argv);
    
    /* メインウィンドウの作成 */
    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_widget_set_size_request (window, 300, 200);
    
    /* 「ウィンドウを閉じる」コールバック */
    g_signal_connect(window, "delete-event", G_CALLBACK(gtk_main_quit), NULL);
    
    /* ウィジェットの表示 */
    gtk_widget_show_all(window);
    /* コールバックの受付開始 */
    gtk_main();
return 0;
}




ファイル名をhello_gtk.cに変えておいてください。
ファイルのリネーム方法は、 !cons.bat の時と同じように。

コンパイルの実行

コンパイルにはgccとpkg-configを使います。
そして、このふたつを結びつけるために、FORコマンドも使用します。

Gtkアプリケーションをコンパイルする際には、コンパイラに対してGtkを利用するためのオプションを指定しなければなりません。
幸いなことに、Gtkライブラリにはpkg-configというツールが付属しており、適切なパスとオプションをgcc用に出力してくれます。

実際の作業は以下の通り。

まず、pkg-configの出力するコンパイルオプションを、環境変数に格納します。(折り返していますが、実際は一行のコマンドです。 )
FOR /F "usebackq tokens=*" %A IN (`pkg-config --cfla gs --libs gtk+-2.0`) DO @SET GTKOPTS=%A

値が格納されていることを確認します。
echo %GTKOPTS%

実際にコンパイルを行います。echoの時と同じく、環境変数が展開されて、gccにpkg-configのオプションを渡すことができます。
gcc hellogtk.c %GTKOPTS%

a.exeというファイルができていたら成功です。
コマンドラインから呼び出してみましょう。
a.exe
上手く行っていれば、画像のような何もしないウィンドウが現れるはずです。
起動したa.exe (hellogtk.c)
起動したa.exe (hellogtk.c)

Gtkアプリケーションのコンパイルまでに必要な、最低限の設定と手順は以上です。
以下は、このあとのGtkアプリケーション開発で、必要になりそうな事項について書いておきます。


「makefile」の記述と使用

コマンドを手打ちしてコンパイルするのも良いですが、本来はmakefileを作るべきだと思います。
規模が大きくなったり、もう少し本格的なGtkアプリケーションの作成に移ると、makefileが必要になってきます。

makefileにはコマンド置換機能があるので、オプション指定などもコマンドラインより簡単に書けます。

ただし、makefileはタブが意味を持つ構文です。行の先頭が空文字であるところは、実際にはタブを挿入する必要がありますので注意してください。また、makefileのファイル名は makefile であり、必ず拡張子が付いていないことを確認してください。

makefileの内容は、下記の通りです。


makefile

obj=hellogtk
PKG_CONFIG=pkg-config

all: $(obj).exe

$(obj).exe: $(obj).c makefile
  gcc $(FLAGS) -o $(obj).exe $(obj).c \

    $(shell $(PKG_CONFIG) --libs --cflags gtk+-2.0)


run: $(obj).exe
  ./$(obj).exe
 

clean:
  rm $(obj).exe



また、バッチファイルにも手を加える必要があります。
バッチファイル !cons.bat にも、cmd.exeの前に4行を追記して以下のようにします。

!cons.bat

#gtkライブラリにパスを通す
set PATH=gtk\bin\;%PATH%

#makeを使いやすくする
doskey make = mingw32-make $*
#make cleanを使えるようにする
doskey rm = del $*


#コマンドプロンプトを呼び出す
cmd.exe



なぜこの記述を追加する必要があるかというと、MinGWに付属しているmakeは、ファイル名がmingw32-make.exeであり、そのままではmakeと打って使うことができないからです。
doskeyコマンドはコマンドプロンプト上で打った内容を実行前に置き換えてくれるので、makeと打てばmingw32-make.exeが起動するようになります。

というわけで、以上の通り、makefileを作って!cons.batに追記をすればOKです。
コンパイルと実行が、以下の一行を打つだけで終わります。
make run
と打つだけです。
上手く行けば、gtkアプリケーションが起動します。


その他雑記

自分でコンパイルしたGTKアプリケーションで、日本語が文字化けする場合、ソースコードの文字コードををUTF-8に変更すると解決する可能性があります。


本記事のGTKプログラムおよび開発環境(?)は、UbuntuなどのLinux環境でも問題なく動くはずです。
GTKはマルチプラットフォームですし、本記事のmakefileなどはクロスプラットフォームを意識して書いてあるためです。
(むしろLinux向けソースを!cons.batでWindows対応させた、と言えるくらい。)
Linuxで動かす場合の差異としては、
・GTKライブラリをパッケージマネージャから導入すること
・シェル起動バッチはLinuxでは使えないので、
 自分でターミナルを起動してチェンジディレクトリ(cd)すること
くらいです。


MinGWもプロジェクトに入れてしまえば、他のマシンに移動してもコンパイル可能です。
ただし、MinGWはファイル数が多いため、 総ファイルサイズに反してコピーに時間がかかります。
(それでもVisual Studioをインストールするよりは早いです。)
 その場合、!cons.batでGtkと一緒に環境変数PATHの設定をしてしまったほうが良いです。


Gtkは最新バージョンのGtk-3.0が登場していますが、配布されているWindows版ライブラリはGtk-2.0です。2.0と3.0には、互換性のない部分もあるそうです。


古いライブラリを独自に配布しているページなどもありますが、公式サイトの最新版を使いましょう。


echo %GTKOPTS%で表示されるコンパイルオプションは、わたしの環境では以下のようになります。自分で調べて手打ちしようとすると、気が遠くなります。
-mms-bitfields -ID:/work_programing/hellogtk/gtk/include/gtk-2.0 -ID:/work_progr
aming/hellogtk/gtk/lib/gtk-2.0/include -ID:/work_programing/hellogtk/gtk/include
/atk-1.0 -ID:/work_programing/hellogtk/gtk/include/cairo -ID:/work_programing/he
llogtk/gtk/include/gdk-pixbuf-2.0 -ID:/work_programing/hellogtk/gtk/include/pang
o-1.0 -ID:/work_programing/hellogtk/gtk/include/glib-2.0 -ID:/work_programing/he
llogtk/gtk/lib/glib-2.0/include -ID:/work_programing/hellogtk/gtk/include -ID:/w
ork_programing/hellogtk/gtk/include/freetype2 -ID:/work_programing/hellogtk/gtk/
include/libpng14  -LD:/work_programing/hellogtk/gtk/lib -lgtk-win32-2.0 -lgdk-wi
n32-2.0 -latk-1.0 -lgio-2.0 -lpangowin32-1.0 -lgdi32 -lpangocairo-1.0 -lgdk_pixb
uf-2.0 -lpango-1.0 -lcairo -lgobject-2.0 -lgmodule-2.0 -lgthread-2.0 -lglib-2.0
-lintl

(注意:読むとわかるのですが、このままコピペして使うことはできません。パスがDドライブを指していたりしますので。)


 本当にどうでもいいことですが、「!cons.bat」は、初めてこのバッチファイルを見た「30日でできるOS自作入門」から来ていて、ファイル名も、そのまま使っているだけです。


Gtkをやっていたのはもうけっこう前のことで、思い出しながら書いたのですが、意外と覚えているものですね。

Ubuntu 13.04再インストール時の雑記

以前書いた記事「Ubuntu13.04 インストール時の雑記 」の追記に相当する記事でもあります。
ハードウェア構成などはそちらをご覧ください。


Ubuntuの強制的な再起動を繰り返すうちに、Unityのタブバー(ウィンドウ上部)が表示されなくなってしまいました。そこで再インストールすることに。

そもそも、Wineで一部アプリケーションを起動するとX Window Systemが落ちる問題があり、WineHQの記述からプロプライエタリドライバを導入して解決したのですが、その頃から、たまにサスペンドから復帰できなくなって強制電源断していました。


思わぬ副産物として、Ubuntu13.04環境でAlt+Tabによるウィンドウ切り替えが遅かった問題は、なぜか再インストール後には発生しませんでした。(ちなみに前回はccsmで設定をいろいろ変えて解決しました。)

なお、Wineで画面表示(X Window System)が落ちる問題は未検証です。再度発生したとしても、プロプライエタリドライバを導入すれば解決することはわかっているのですが、そうするとまたサスペンドから復帰できなくなりそうで怖いです。


また、今回の再インストールで、

EFI環境でUbuntu13.04をクリーンインストールして無事起動させる、たったひとつの冴えたやり方

について再確認しました。
どれが有効でどれが不要なのかはわかりませんが、わたしは以下の手順でUbuntuをインストールしています。

・インストールメディアは「USBスタートアップディスクの作成」で作ったUbuntu13.04デスクトップ版
・インストールメディアは事前にパーティションテーブル作成により初期化(GPTパーティションテーブル)
・USBメモリはEFI起動
インストール時のパーティション設定はUbuntuインストーラの「自動」でおまかせ
・インストールしたUbuntuをEFI起動

個人的には、下線を引いた「パーティション設定は自動」(手動で作ろうとしない)がキモである気がしています。(検証していないので、気のせいかもしれません。)



以下はその他の項目です。書き忘れ含む。

compiz設定マネージャ(ccsm)のインストール

デフォルトでインストールされていないことに気づきました。
アプリケーション・センターからのインストール方法がよく紹介されていますが、コマンドラインでは以下のコマンドでインストールできます。
sudo apt-get install compizconfig-settings-manager

デスクトップにファイルが表示される問題

コマンド( LANG=C xdg-user-dirs-gtk-update )によって、ディレクトリ名を英語に変更すると発生します。Ubuntuフォーラムのトピック「デスクトップにホームの内容が表示される」に解決法が書かれています。
 ~/.config/user-dirs.dirs ファイル内の
 XDG_DESKTOP_DIR="$HOME/" 

XDG_DESKTOP_DIR="$HOME/Desktop"
などと適当に変更します。(再起動か再ログインが必要)

ワークスペースの有効化

以前のUbuntuでは、Ctrl+Alt+矢印キーでワークスペース(仮想デスクトップ)を切り替えることができましたが、Ubuntu13.04では無効になっています。
(ちなみに、「マルチデスクトップ」と思い込んで検索するとマルチディスプレイに関する記事がヒットします。)
設定の項目「外観」から、挙動タブで「ワークスペースを有効にする」にチェック。
システム設定の「外観」アイコン

システム設定の「外観」
システム設定の「外観」

Squidのインストールと設定

Squidインストール後、前のシステムから設定ファイルを移植しました。
システム設定からプロキシ設定を変更し、localhostとsquidの指定ポートを指定します。
(Squidのポート番号はデフォルトで3128番ですが、念のため変更すべきかと思います。)

Ubuntu13.04からはプログラム名がsquid3になっています。
これまでのsquidコマンドが、すべてsquid3になります。

設定ファイルのディレクトリも変わっています。
/etc/squid3/squid.conf

以下のコマンドを使えば、設定ファイルの文法エラーをチェックすることができます。sudo squid3 -k parse
squid3になってから、いろいろな

再起動は
sudo services squid3 restart
ここも名前がsquid3に変わっています。

squidは一時期けっこう調べたので、いつか別記事を書きたいです。
追記:Squidの設定方法の記事を書きました


Apache/mdadm/lvm2のインストールと設定

Apacheは設定ファイルを移植。
mdadm、lvm2は、設定ファイルの書き換えや論理ディスクの有効化をしなくても今回は勝手に認識しました。とても優秀です。
(マウントポイントは固定したかったので、/etc/fatabで指定しましたが。)
(RAIDメンバのHDDを繋いだままUbuntuをインストールしたせいかもしれません。危険なので、もう絶対しません。)


USBサウンドデバイスが使用できない

再インストールで解決すれば良いなと思っていたのですが、残念ながら解決しませんでした。
USBサウンドデバイスを刺してもノイズが入るばかりで音が聞こえません。
手元にある2種類のデバイスで試したのですが、どちらも使えませんでした。
試したのは、
「Sound Blaster Play! SB-PLAY(MODEL NO SB1140)」と、
「PL-US35AP(PCi社製)」という、秋葉原で買った安価なサウンドデバイスです。
Ubuntu12.04では同じSoundBlasterが使えていたので、たぶんカーネルかドライバのバージョンによる問題だと思われます。
オンボードサウンドは使えますし、今のところ困っていないので、そのままにしています。



Fedora19をVirtualboxゲストで試してみました

RedHat系のLinuxに慣れようということで、Fedora19を仮想環境にインストールしてみました。
最近はずっとDebian系のUbuntuしか触っていなかったので。

Virtualbox上のFedora19デスクトップ
Virtualbox上のFedora19デスクトップ

Virtualboxのバージョンは4.2.16。ExtensionPack導入済みです。
Virtualboxホスト環境などが知りたい場合は、このブログのUbuntuインストール記事などでご確認ください。


初回起動時にGnome3の起動スプラッシュと動作するヘルプが出てくるのが面白いです。

デフォルトでは5分で画面がロックされるのですが、最初、どうやったらロック解除できるのかわからず困惑しました。(クリックで画面を掴んで、上にドラッグすればよい)

RedHat系ではデフォルトでsudoが使えないので、管理者権限での作業は
su -
にてrootになってから行います。

Guest Addition

とりあえずGuestAdditionをインストールすれば、インストールのメッセージ内で足りないパッケージを教えてくれます。
(カーネルバージョンが時期によって違うため、一度エラーメッセージを見たほうが早いです。)
必要なパッケージをインストール。
yum install kernel-devel-3.9.9-302.fc19.x86_64 gcc make
余計なものも含まれていますが気にしない方向で。
もう一度GuestAdditionをインストールすれば、今度はすべてうまく行きます。

Fedora18ではGuestAdditionを導入してもウィンドウサイズが可変にならなかったのですが、Fedora19では解決しています。


共有フォルダ

グループはGuestAddition導入時に設定されますが、手動で用意するなら管理者権限で以下のコマンドを打ちます。
 groupadd vboxsf
自分のブログを参考に、共有フォルダへのアクセス権を追加。
再起動後、
ls /media
などとして、コマンドで共有ディレクトリのマウントを確認します。


flashの導入

公式wikiのflashページの手順をそのままなぞって、flashを導入します。
私が使っているFedoraはx64なのでそちらを選択。

 yum install http://linuxdownload.adobe.com/adobe-release/adobe-release-x86_64-1.0-1.noarch.rpm -y
 rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-adobe-linux
 yum install flash-plugin -y


現状での問題

なお、なぜかVirtualBox側からゲストのスクリーンショットを撮る機能で、スクリーンショットを撮ることができませんでした。

また、仮想マシンのFedoraで、仮想ディスプレイが白くなってデスクトップが表示されない問題が発生しました。Fedoraを通常起動しようとした際に、この問題が発生します。
解決策は不明ですが、Fedora起動時の対症療法として、GRUBデフォルトで起動するのではなく、ひとつ下のFedoraを選択します。こちらは問題なく起動できます。

Fedora19のGRUBセレクト画面
Fedora19のブートセレクト画面

chromiumのインストール方法は2つ以上の選択肢があるようなので、もう少し悩んで決めます。

Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換する

 Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換することができるが、上手く変換されない場合がある。   以前作った魔法陣イラスト素材をイラスト素材ストックサイトへ登録しようと思い立ち、改めて素材用にラスタライズ変換をかけようとした。   ラスタライズ変換...