投稿

7月, 2013の投稿を表示しています

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呼び出し部分はそのまま...のつもりだったのですが、ちょっとリンクを工夫しています。
外部のライブラリは、可能な限…

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

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

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





わたしも以前はペンタブ+マウスでした。ディスプレイは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にすることができませんでした。最終的にシステム設定の「…

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.f…

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

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



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」に登録されたディレクトリの下にあるファイルは、コマ…

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)のインストール デフォルトでインストールされていないことに気づきました。
アプリケーション・センターからのインストール方法…

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

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


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-releas…