と、言っても別に難しいわけではないが、

スマホや自宅PC、出先のPC、子供のPC、友達のPCなどからログインした後にログアウトし忘れることはありがち。

それに何処からかログインされているような気配を受けることも。

そんな時、複数デバイスからgoogleのログアウトを一度に行う方法はChrome Syncのページから『同期リセット』ボタンをクリックするだけ。

念のために覚書。

HTML5でブラウザ上で3Dを表示処理するAPI。
WebGLに関に関して若干の覚え書き。

この手の技術を利用する場合、単純にどこで何を入手するか、簡単な作業フローはどのようなものなのかが解らずに単純なところで立ち止まってしまう。
今回もWebGLとthree.js、Away3D TypeScript、Brender等利用環境に関する情報が直ぐに(10分程度で)手に入らなかったのでそのあたりのメモ。
先ずHTML5で3Dを扱うにはWebGLを利用するわけだが、直接利用するよりもより簡易に便利なフレームワークが幾つか用意されている。

Blender

今現在の最新はBlender 2.74 、ダウンロードはこちらの公式サイトでOK
ちなみにこのBlender、オープンソースのフリーウェアでありながら、Killer Mayaアプリとして有望視(私見)されている。
積極的なアップデートを重ね、その進化は早くつい最近までは直立猿人とみられていたが、近年のバージョンではホモ・サピエンスと何ら見分けがつかないレベルのアプリへと姿を変えた。
今後の進化が楽しみである。

three.js

ダウンロードはhttps://github.com/mrdoob/three.js
色々とファイルがアップされているが、動作に必要なスクリプトはhttps://github.com/mrdoob/three.js/tree/master/build にあるthree.min.jsだけでOK。
JSファイルなので、使用方法は、head内に<script src="/three.min.js"></script>でOK。

Blender 用JSONエクスポートプラグイン

githubに行ったついでにBlender用のJSONエクスポートプラグインを入手。
https://github.com/mrdoob/three.js/tree/master/utils/exporters のBlenderフォルダ内のthree.js/utils/exporters/blender/addons/ 以下の io_three フォルダをダウンロードしてC:\Program Files\Blender Foundation\Blender\2.74\scripts\addons にコピー。

それと、、three.js/examples/js/shaders/ 以下にはHorizontalBlurShader.js、VerticalBlurShader.js など様々なシェーダーがあり、three.js/examples/js/controls/にはOrbitControls.jsなどの超便利ライブラリがアップされている。

基本構成

以下はthree.min.js(Three.js本体)、OrbitControls.js(マウスでマウスでビューを回転、拡縮できるライブラリ)、my3D.js(ユーザー作成のスクリプト) を読み込み、ページがロードされると、my3D.js 内のmainを実行しているシンプルなHTML。
注意: 以下のスクリプトは説明のために簡略化しています。コピー&ペーストで作成しても動作しません。

<html>
    <head>
        <title>Three.js app</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% ; background-color:#000;}
	</style>
	<script src="/three.min.js"></script>
	<script src="/OrbitControls.js"></script>
	<script src="/my3D.js"></script>
    </head>
    <body>
	<script>
		window.addEventListener( 'DOMContentLoaded', main, false );
	</script>
    </body>
</html>


以下は my3D.jsスクリプト。
必要な処理はこちらに記述。
(もちろん、HTML内にJavascriptを直接記述してもOK)

以下のスクリプトではBlenderで作成したモデルをJSONファイルとして保存し、THREE.JSONLoader()で読み込んで表示しています。
Txtureもマッピングしていますが、マッピングするためにはBlenderでUVを作成しておく必要があります。

またJSONオブジェクト以外にTHREE.CylinderGeometry( 5, 5, 4, 36)でシリンダー形状のオブジェクトを作成し、こちらへもマッピングを行っています。

OrbitControls.jsは読み込むだけでビューのマウスによる操作が可能となる便利なライブラリです。
読み込み後の有効化は簡単で、var controls = new THREE.OrbitControls(camera); 、controls.update(); を記述するだけです。

var main = function () {
/************/
/* my3D  */	
/*************/
/*Init*/
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 1000);
var controls = new THREE.OrbitControls(camera);    

renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } )
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff, 0 );
document.body.appendChild(renderer.domElement);

//Texture for JSON Model
	var texture4  = new THREE.ImageUtils.loadTexture('panel.png');	
	texture4.wrapS = THREE.RepeatWrapping;
	texture4.wrapT = THREE.RepeatWrapping;
	texture4.repeat.set( 1, 1 );
// load JSON model
var loader = new THREE.JSONLoader();
loader.load( 'panel1.json', function ( geometry ) {
	model = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({
	map: texture4,
    	}) );
	model.position.z = 5;
	model.scale.set(40,36,38);
	scene.add( model );
} );


/*Light*/
/*Front Light*/
var light = new THREE.DirectionalLight(0xffffff,1.2);
light.position.set(0, 0, 5).normalize();
scene.add( light );

var light = new THREE.AmbientLight(0x111111);
scene.add( light );

/*Load Texture*/
var texture1  = new THREE.ImageUtils.loadTexture('reel.png');
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( 1, 1 );

/*Obj*/
/*reel*/
var geometry1 = new THREE.CylinderGeometry( 5, 5, 4, 36);
var material1 = new THREE.MeshPhongMaterial( {map: texture1});
var reel = new THREE.Mesh( geometry1, material1 );

camera.position.z = 30;	
scene.add( reel );
	reel.position.x = -4.1;
	reel.rotation.z = 1.57;

var render = function () {
	var deg1 = 0.5;
	requestAnimationFrame(render);
	reel.rotation.x += deg1*Math.PI*2/180 ;	

controls.update();   
renderer.render(scene, camera);
};
render();

}

 

 

Subversionのダイエットを目的としたバックアップ検証のためXAMPPにSubversionをインストールした。

http://hamamura.org/wiki/index.php?Subversion

http://www.gside.org/Gentoo/subversion/subversion.html

http://d.hatena.ne.jp/pasela/20090206/svn_backup

 

実際の目的たであるSubversionのバックアップ方法に関して。

問題点

仕事の関係で大量の映像データを15名程のグラフィック制作スタッフで共有している。
実際の映像データはAftereffectsのプロジェクト全体だったり、動画ファイル、画像ファイルといったデータである。

経験的にプロジェクト進行中のこれらの共有データは500GB以上になる。
ファイルのバージョン管理は非常に古典的な日付管理法であるが、もちろんこの方法は様々な問題が発生する。

Subversionの利用はシステム構築管理やドキュメント等のバージョン管理ですでに導入済みである。
グラフィックデザイナーもSubversionの使用方法にはなじみがあり、Subversionによるグラフィックリソースのバージョン管理導入に関しての敷居は高くない。

問題点としては以下の項目である。

  1. Subversionの履歴ファイルは巨大化の一方であり、TBオーバーのリポジトリになることは容易に想像できる。

 

任意リビジョンのdumpとload

# svnadmin create c:\xampp\svn\repos\test2
# svnadmin dump c:\xampp\svn\repos\test > test.dump * リビジョン 0 をダンプしました。 * リビジョン 1 をダンプしました。 * リビジョン 2 をダンプしました。 * リビジョン 3 をダンプしました。 * リビジョン 4 をダンプしました。 * リビジョン 5 をダンプしました。 * リビジョン 6 をダンプしました。 * リビジョン 7 をダンプしました。 # svnadmin dump c:\xampp\svn\repos\test > test.dump -r 7 * リビジョン 7 をダンプしました。 # svnadmin load c:\xampp\svn\repos\test2 < test.dump <<< オリジナルのリビジョン 7 に基づき、新しいトランザクションを開始しました * パスを追加しています : 01.txt ... 完了しました。 * パスを追加しています : test2.txt ... 完了しました。 * パスを追加しています : gogh3_0327.tif ... 完了しました。 ------- 新しいリビジョン 1 を (オリジナルのリビジョン 7 からロードして) コミットしました >>>

 

Autodesk製品の他のコンピュータへのライセンス移行方法覚書。

  1. 新しいPCにインストールする。
  2. 新しいPCのアクティベーション。
  3. 新しいPCで製品が起動するか確認。
  4. 古いPCから製品のアンインストール。

製品をインストール後、もしエラーが出なければ、製品の指示通りに進みアクティベーションコードが自動的に出てそのままご利用可能。

もしアクティベーションコードが出なければ、最新のリクエストコードをAutodeskへ送り、手動でアクティベーションコードを発行。

少し必要に迫られて画像検索サイトをピックアップしてみた。

ここで言う画像検索とは画像による画像検索のことである。 

何のためかって? もちろん類似画像を検索することによって著作権侵害を避ける為ですよ。
例えば、自分で考えたオリジナルキャラ。
もちろんマネした訳でも、インスパイアされたわけでも無いが、偶然似ているキャラが世界の果てにいてたなんてことは良くあること。
所詮人間の考えることなんで似たようなものばかりだ。
しかしそれがもし、ディズニーやサンリオのキャラだつたら面倒このうえない。

結果としてはやはりgoogleの画像検索の完成度が最も高そうだ。

Adobe&Googleによって開発されたフリーフォント「源ノ角(げんのかく)ゴシック」がリリースされた。

日本語フォントは漢字を含めると第一水準ですら2965文字もあり、たとえエネルギーの有り余ったフォントおたくデザイナーでもおいそれとは簡単にフリーのフォントをリリースできない。

以前は漢字も含めたフリーフォントは皆無であったが、最近ではIPAフォントをはじめその数は徐々に充実してきたことも事実だ。
しかしライセンスの煩雑さもあってこれと言った決定打にはお目にかかれなかった。

個人的にはライセンスの縛りを受けないデザイン性の高いフリーのフォントリリースは、その国の文化の自由な発展を左右するとさえ考えている。
オープンソース・アプリケーションへの同梱や参照、電子書籍データへの埋め込み、派生タイポグラフィ(フォント)の可能性、縛りのないタイポグラフィ。これら以外にも様々な可能性を秘めている。
もちろん1書体だけでそれらすべてが解決される訳ではないが、今回の「源ノ角ゴシック」のリリースは日本語タイポグラフィの歴史に新たなページを加えるものだ。

フォントに関する個人的感想としては、漢字部分は小塚ゴシックをベースとしているためか、それほど悪くないデザインであるが、縦書きをも意識しているためか少し古臭いイメージが漂う。メイリオほど現代的ではない感じだ。

 

 

まあ、可能性の話はさておき、早速「源ノ角ゴシック」をWEBフォント化してサーバーにアップしてみた。
2014年7月29日現在このサイトの標準文字の設定は「源ノ角ゴシック」SourceHanSansJP-Lightである。

 

WEBフォントへ変換

  • 武蔵システムさんのWOFFコンバータを使用して、OTFフォントをWOFFフォントに変換します。

サーバーへアップ

  • CSSフォルダの下位にfontフォルダを作成して、WOFFフォントをアップロードします。

CSS記述

  • 以下はCSS部分。bodyタグに対してSourceHanSansJP-Lightを適用している。
@charset "utf-8";
@font-face {  font-family: "myFontExtraLight";  src: url("font/SourceHanSansJP-ExtraLight.woff") format('woff');}
@font-face {  font-family: "myFontLight";  src: url("font/SourceHanSansJP-Light.woff") format('woff');}
@font-face {  font-family: "myFontNormal";  src: url("font/SourceHanSansJP-Normal.woff") format('woff'); }
@font-face {  font-family: "myFontRegular";  src: url("font/SourceHanSansJP-Regular.woff") format('woff');}
@font-face {  font-family: "myFontMedium";  src: url("font/SourceHanSansJP-Medium.woff") format('woff'); }
@font-face {  font-family: "myFontBold";  src: url("font/SourceHanSansJP-Bold.woff") format('woff');}
@font-face {  font-family: "myFontHeavy";  src: url("font/SourceHanSansJP-Heavy.woff") format('woff');}

.myFontExtraLight {  font-family: "myFontExtraLight";}
.myFontLight {  font-family: "myFontLight";}
.myFontNormal {  font-family: "myFontNormal";}
.myFontRegular {  font-family: "myFontRegular";}
.myFontMedium {  font-family: "myFontMedium";}
.myFontBold {  font-family: "myFontBold";}
.myFontHeavy {  font-family: "myFontHeavy";}

body {
	font: 13.5pt/1.5 "myFontLight";
	line-height:160%;
}

 

 

遅まきながらMODOの体験版をダウンロードして試してみた。

開発元はhttp://www.thefoundry.co.uk/products/modo/

Chromeではサイトへのログインが上手くいかなかったので、IEによるログイン&ダウンロードだ。

15日限定のトライアルということなので、今日中に基本操作を確認して、明日から試しに何か作ってみる予定だ。

 

インターフェイスの良いソフトというのは、見た瞬間に分かるものだ。

先ず最初に見られるのは基本画面のModel 画面。

Perspective Viewの上下がグラデーション表現されている。

これは依然から欲しかった単純な表現方法である。

何よりもメニューが一般的である。

多くの3Dソフトは変態的なインターフェイスでメニューの確認すらままならない。

メニューぐらい普通にしろよ!というのが個人的な持論なのだが、そのささやかな望みを実現してくれている。

Model Quadがある。これは3面図+Perspectiveの4画面分割画面である。非常に便利だ。

同様に、タブにはPaintゃTopoなどが並び、AnimateやRenderが並ぶ。

3ds MAXのように使いもしないタイムラインが何時も下部に鎮座して邪魔なことは無い。各作業に集中できる。

もちろんモデラーとしては、定評のあるLightWaveの流れを汲んでいるので、益々使いやすい。

価格は今のところはMAXのバージョンアップ代で2本近く購入できる。

かなり期待できる。(個人的にはモデラーとして。)

 

3Dでモデリングしていて思ったことだが、モデリングデータを3DプリンターやコンピューターNCに直接送って出力(立体造形)することが一般的になると、図面(出力)が必要無くなるんじゃないのかな。

個人的には、図面を見ながらイラストを描くこともあるので、思ってしまった。

版下が無くなったように。

 

google apps script でScriptを他のScriptから呼び出す方法。

要点は以下。

  • 関係ファイルの共有設定が必要(自分以外の利用者が居る場合)。
  • 外部関数(呼び出される側)設定
    • 公開ファイルをバージョン設定する。
  • 呼び出し側
    • メニュー > リソース > ライブラリ(Include) から

 

 メニュー Tools > Script editor

先ず、Scriptのエディタ画面に入る必要がある。
以降の作業はScript editorのメニューによる設定。

 

 メニュー File > Manage Versions 

利用されるScriptはバージョン設定する必要がある。

 

 

 

 

 

 メニュー Resources > Libraries

画像ばっかりで、、ちょっと記事としては不完全だけど、自分自身への覚書として。

 

jQuery を使ったマウスオーバーエフェクトのリンク集へのリンク!

40 Top Free jQuery Mouseover Effect Tutorials

ページ制作をしていると、よくアイコンの必要性に迫られる。
WEB上には様々なアイコン配布サイトがあるが、今日はその一つで規模も大きいfindicons.comのご紹介。
 image
キーワード検索や一覧表示から目的のアイコンを見つける!


image 
キーワード検索結果画面

検索した結果から更にバックグラウンド色、サイズ、色イメージなどで絞り込むことも可能だ。


image
変換画面

アップロードしたアイコンを変換して、そのままダウンロードできる。

APIも公開予定とのことなので(アイコン検索と作成のAPIって、、)、色々な利用サービスの出現が楽しみ?!

ページ制作をしていると、よくアイコンの必要性に迫られる。
WEB上には様々なアイコン配布サイトがあるが、今日はその一つで規模も大きいfindicons.comのご紹介。
 image
キーワード検索や一覧表示から目的のアイコンを見つける!


image 
キーワード検索結果画面

検索した結果から更にバックグラウンド色、サイズ、色イメージなどで絞り込むことも可能だ。


image
変換画面

アップロードしたアイコンを変換して、そのままダウンロードできる。

APIも公開予定とのことなので(アイコン検索と作成のAPIって、、)、色々な利用サービスの出現が楽しみ?!

ブログエディタとは

Joomla!ではTinyMCEが記事エディタとして初期設定されています。

TinyMCEは非常に高機能なエディタですが、フロントやバックから管理ログインして記事を編集する必要があります。

ブラウザ上で稼動するエディタですので、操作レスポンスなどにも限界があります。

最近では多くのブログで「ブログエディタ」と呼ばれるソフトをローカル(自分の)コンピュータで起動して、記事を編集し、サーバーに投稿するといった方法が良く見られます。

 

ブログエディタ利用によるメリット

  • ローカルコンピュータで記事を作成・編集できる。
  • “ワープロ的”な簡単編集
  • 編集画面が“広い”。
  • 思いついた時に記事を書け、“書き掛け”のまま保存できる。
  • 複数のCMSやブログ記事を一つのソフトで管理できる。

 

「Windows Live Writer」

「ブログエディタ」には様々なソフトがありますが、中でもMicrosoftが無償で配布している「Windows Live Writer」は機能的にもトップクラスであり、ワープロ感覚で記事編集可能な満足できる「ブログエディタ」と言えるでしょう。

ワードからの文章を直接コピー&ペーストしたり、手元の写真を貼り付けたりすることもでき、

インターネット上で配布されているプラグインをインストールすれば、本体に無い様々な機能を付加することも可能です。(2010年2月現在、プラグイン数168件)

もちろん直接HTMLを入力することもできますので、HTMLタグの知識が豊富であればより精細なレイアウトも可能です。

ダウンロードは、Microsoftのダウンロードサイトhttp://download.live.com/writerを利用してください。

 

「MOVABLETYPE XML-RPC 2.3.3」の入手

「Windows Live Writer」は標準で多くのブログサービスやシステムに対応しています。ブログシステムで利用するには問題はありませんが、Joomla!で利用するためにはJoomla!側へ「MOVABLETYPE XML-RPC」プラグインのインストールが必要です。

「MOVABLETYPE XML-RPC」はhttp://www.joomler.net/さんが制作・配布されている、MovableTypeのRPCプロトコルをJoomla!で利用可能にするプラグインです。

この「MOVABLETYPE XML-RPC」のインストールによって、「Windows Live Writer」はMovableTypeにアクセスする設定と同じ設定でJoomla!にアクセス可能となります。

※執筆現在の最新バージョンは MOVABLETYPE XML-RPC 2.3.3 です。

 

Joomla!の設定

ol li{margin-left:15px;}

  1. http://www.joomler.net/から「MOVABLETYPE XML-RPC」をダウンロードして、

    Joomla!の管理画面からインストールします。

    「拡張機能」>「プラグイン管理」>「XML-RPC - MovableType API」を“有効”にします。

    livewriter4 

  2. 必要な場合はプラグイン名をクリックして詳細設定を行ってください。

    「グローバル設定」>「システム」>「WEBサービスを有効にする」を“はい”にします。

     


    livewriter3

 

「Windows Live Writer」の設定

次に「Windows Live Writer」のアカウント設定を行います。 

  1. 一度も利用していな「Windows Live Writer」を起動するとアカウント設定画面が表示されますので、「他のブログサービスを利用する」を選択します。 
    livewriter5 
  2. 「ブログのwebアドレス(A):」にJoomla!のURLを入力します。例:http://www.myblog.com
    「ユーザー名(U):」管理画面へのログインユーザー名を入力します。
    「パスワード(P):」管理画面へのログインパスワードを入力します。
    livewriter6
  3. 「ブログアカウントの設定中」画面の次に「ブログ種類の選択」が表示されますので、「使用するブログの種類(T):」で「MovableType API」を選びます。
    「ブログのリモート投稿URL(U):」にhttp://Joomla!のURL/xmlrpc/ と入力します。
    ※最後の/(スラッシュ)を忘れずに。 
    livewriter9
  4. 「ブログアカウントの設定中」画面が表示された後、「仮の記事を作成」画面が出ますが、テンプレートの検出はできませんので、ここでは“いいえ”を選んでください。
    livewriter10

    「ブログが構成されました」画面で「ブログのニックネーム(N):」を確認して“完了”ボタンを押してください。
    livewriter11

     

Windows Live Writer編集画面

livewriter12  ここでは簡単に「Windows Live Writer」の画面を紹介します。

  1. 記事を直ちにブログ (Joomla!)に投稿します。
  2. 現在、投稿対象としているブログです。
  3. 下書き保存されている記事の一覧が表示されます。
  4. クリックすることによって編集画面に呼び出します。
  5. 最近投稿された記事の一覧が表示されます。
  6. クリックすることによってサーバーから記事をダウンロードし、編集画面に呼び出します。
  7. 設定されているブログシステムに接続して記事を編集画面に呼び出すことができます。
  8. ブログの投稿カテゴリを設定します。
  9. リンクを設定します。
  10. 画像を配置します。サムネール表示の大きさや影付き。枠付きなどを設定することができます。
  11. 表(テーブル)を挿入します。
  12. 追加したプラグインです。
  13. プラグイン追加のためのMicrosoftのサイトを表示します。
  14. 複数のブログが管理可能で、投稿対象のブログをメニューから選択できます。

※詳しい使用方法は、ソフトのメニュー > ヘルプ > 「Windows Live Writerのヘルプ」で閲覧可能です。
   ヘルプサイトURL:http://help.live.com/help.aspx?project=wl_writerv3&market=ja-JP