HighslideJS は、Lightbox や Shadowbox と同様の画像やコンテンツをページの中央でギャラリー的に表示するライブラリです。Lightbox は画像用として、Shadowbox はオールマイティ、HighslideJS は、HTML が強いと思います。 ライセンスは、商用で使わなければフリーです。 ただ、実際問題 WEB 上で使うとなると、HighslideJS は少々敷居が高いので、簡単に HTML コードを作成するツールがこちらです。※ プレビューが可能です。 ※ クリップボード経由でコードをすぐ取得できます
|
|
2014年03月15日
HighslideJS 用貼り付けコード作成
【PHP】 <?=$value?> ではない変数埋め込み手法
一般のファイル( file_get_contents で読み込めるテキストファイル ) の中に、{$GLOBALS['text1']} というような形で埋め込んだ部分に、他のファイルの内容を埋め込む処理です。
PHP として単純に実装するならば、require や include すれば良いのですが、この方法だと、どのような外部テキストでも利用可能です。
PHPのコード
▼ parse.php
<?php
header( "Content-Type: text/html; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
// ****************************************************************
// テキストファイルを読み込んで、そこに埋め込まれた php 変数を
// 実際の値に置き換えます
// ****************************************************************
// 元となる表示部分
$view_text = file_get_contents( "parse.htm" );
// 埋め込むテキストを外部ファイルより取得し、
// どのようなスコープでも適用できるように、グローバル変数にセット
$GLOBALS['text1'] = del_comment( file_get_contents( "text1.txt" ) );
$GLOBALS['text2'] = del_comment( file_get_contents( "text2.txt" ) );
$GLOBALS['description'] = del_comment( file_get_contents( "description.txt" ) );
// 展開処理
$view_text = str_replace('"', '\\"', $view_text );
// 上の処理は、以下の処理内で $view_text 内に " が存在するとまずいからです。
eval("\$view_text = \"$view_text\";");
// 出力( この PHP の画面表示処理 )
print $view_text;
// ****************************************************************
// コメント削除関数
// ****************************************************************
function del_comment( $str ) {
// ------------------------------------------------------
// 独自コメント削除
// ------------------------------------------------------
$str = mb_ereg_replace( "([^\n/]*)//[^\n]*\n", "\\1\n", $str );
return $str;
}
?>
画面定義(PHPから読み込みます) ▼ parse.htm
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>記事構成のヒント</title>
<style type="text/css">
* {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
pre {
font-size: 18px;
width:400px;
padding: 50px;
border: 1px solid #cccccc;
white-space: pre;
white-space: pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
}
h1 {
width: 500px;
font-size: 12px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #9192A3;
height: 30px;
padding-left: 10px;
background: url(h1.png) repeat-x 0px 0px;
}
</style>
</head>
<body>
<h1>プロローグ</h1>
<pre>
{$GLOBALS['text1']}
</pre>
<h1>ファーストコンタクト</h1>
<pre>
{$GLOBALS['text2']}
</pre>
<h1>※ 説明</h1>
<pre>
{$GLOBALS['description']}
</pre>
</body>
</html>
実行ページ 画面定義 テキスト1 テキスト2 説明テキスト
2014年03月14日
VBScript : 手軽にタスクスケジューラ時間差実行
サービスで、Task Scheduler が実行されている事が前提です。自分は普段止めているので、スクリプトからサービスを開始する処理を付け加える必要がありますが、通常なら問題無いでしょう。 分単位で連続して起動するパラメータも設定可能ですが、それなら GUI で登録するほうが確実です。これは、1時間後とか5分後とかそういう目的に使用します。( 一回限りの実行 ) Windows7 でテストしていますが、対話を必要とするようなアプリケーションはセキュリティ理由と思われますが、かつて可能であった InteractWithDesktop フラグが動作しませんでした。しかし純粋なバッチ処理では動作を確認しています。
' 管理者として実行を強制する
Set obj = Wscript.CreateObject("Shell.Application")
if Wscript.Arguments.Count = 0 then
obj.ShellExecute "wscript.exe", WScript.ScriptFullName & " runas", "", "runas", 1
Wscript.Quit
end if
ServiceString = "winmgmts:{impersonationLevel=impersonate}!\\.\root\cimv2"
Set objWMIService = GetObject( ServiceString )
Set objScheduledJob = objWMIService.Get( "Win32_ScheduledJob" )
Set colEvents = objWMIService.ExecQuery _
("Select * from Win32_TimeZone" )
For Each obj In colEvents
Utc = obj.Bias
Exit For
Next
Set objDate = CreateObject("WbemScripting.SWbemDateTime")
' 一分後
dtTargetDate = Now() + Cdate("0:01:00")
objDate.SetVarDate dtTargetDate, False
objDate.UTC = Utc
'Wscript.Echo objDate
Dim ret,JobId
ret = objScheduledJob.Create( "cscript.exe C:\user\lightbox\vbs\wk001\test.vbs", _
objDate & "",,,,,JobId )
'Wscript.Echo ret
'Wscript.Echo JobId
'0 要求はが受け付けられました
'1 この要求はサポートされていません
'2 ユーザーは、必要なアクセス権限がありません
'8 Interactive process.
'9 The directory path to the service executable file cannot be found.
'21 無効なパラメータです
'22 アカウントにサービスにアクセスする権限がありません
▼ 動作を確認したスクリプト
Set WshShell = WScript.CreateObject("WScript.Shell")
WshShell.LogEvent 0, "ログ出力"
Set Fso = CreateObject( "Scripting.FileSystemObject" )
strCurPath = WScript.ScriptFullName
Set obj = Fso.GetFile( strCurPath )
Set obj = obj.ParentFolder
strCurPath = obj.Path
Set OutObj = Fso.OpenTextFile( strCurPath & "\バッチ.txt", 2, True )
OutObj.WriteLine "あいうえお"
OutObj.Close
実行後の確認は、コマンドプロンプトを管理者権限で実行して、at を実行すると登録された JOB が表示されます。何らかの理由で、実行に失敗するとタスク実行予定に残ったままになるので、 at JOB番号 /delete で削除します。
2014年03月09日
わりと知らない場合もある、古くからの(?) Windows操作
ショートカット作成 マウス右ボタンでドラッグ&ドロップ SendTo を開く エクスプローラのアドレスで sendto テンポラリフォルダを開く エクスプローラのアドレスで %temp% リスト内文字列ショートカット レジストリエディタのツリーや、エクスプローラのファイル一覧や、Excel の関数一覧等、縦のリストになっている UI では、英数字をタイプするとその文字列にジャンプします。 例: C:\Windows\System32 で、『not』 とタイプすると、notepad.exe が選択されます ソフトウェアキーボード ファイル名を指定して実行で OSK ※ その他 メモ帳( notepad )、ペイント( mspaint )、コマンドプロンプト( cmd ) コンピュータのプロパティ Windows ロゴ キー + Break タスクマネージャ CTRL + SHIFT + ESC ( Google Chrome で SHIFT + ESC は Chrome のタスクマネージャが開きます ) もう一つのコピーと貼り付け CTRL+INS と SHIFT+INS かな入力とローマ字入力の相互切り替え CTRL + SHIFT + カタカナ・ひらがな スタートメニュー CTRL + ESC
2014年03月06日
Windows 用の良く「使えそうな」いろいろな場所を開くスクリプトのダウンロード
抜粋
一覧があったのは、ロシア語のページなんですが、いったん Excel に落としていらない文字列省いてソートして、テーブルに貼り付けましたが、さすがに多すぎますし、あまり役に立たないのも多いので「絶対必要だろう」というのを抜粋しています 関連する記事 Windows7 の何かを開くコマンドライン 他にも、通常のフォルダやレジストリの深い場所を一撃で開くスクリプトを掲載 しているのは以下です。作業に役立てて下さい。 超めんどくさいフォルダを開く!
2014年03月04日
JavaScript(jQuery 自家製プラグイン) によるIFRAMEの動的実装
これ自体はたいした内容ではありませんが、用途や需要は結構あるのでは無いかと思っています。DOM で書くと簡単でも、あらためて jQuery で書くと新鮮だったりします。
<script>
if ( !window.jQuery ) {
if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
if ( window.addEventListener ) {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
}
else {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
}
}
document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({
iframe: function(url,w,h){
this.html("");
// IFRAME 作成
var obj = document.createElement("iframe");
obj.setAttribute("frameBorder", "1");
obj.setAttribute("scrolling", "no");
obj.style.position = "relative";
obj.style.width = w+"px";
obj.style.height = h+"px";
obj.src = url
this.append(obj);
}
});
$(function(){
$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});
</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframe("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'>
<div id="iframe_base"></div>
で、どうせなのでアニメーションを追加しました
<script>
if ( !window.jQuery ) {
if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
if ( window.addEventListener ) {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
}
else {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
}
}
document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({
iframe: function(url,w,h){
this.html("");
// IFRAME 作成
var obj = document.createElement("iframe");
obj.setAttribute("frameBorder", "1");
obj.setAttribute("scrolling", "no");
obj.style.position = "relative";
obj.style.width = w+"px";
obj.style.height = h+"px";
obj.src = url
this.append(obj);
},
iframeChange: function(url,w,h){
this.animate({ opacity: 0 }, 1500, "swing", function() {
$(this).iframe(url,w,h);
$(this).animate({ opacity: 1 },3000);
});
}
});
$(function(){
$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});
</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframeChange("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'> <input type="button" value="戻す" onclick='$("#iframe_base").iframeChange("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)'>
<div id="iframe_base"></div>
2014年03月02日
Google ドライブに Three.js の JSONLoder のサンプルを作成しました
▼ Google ドライブ環境の前提条件はこちらから Google ドライブに HTML を置いて WEBページが作れる詳細 / Drive Notepad / Neutron Drive( FTPが使えるファイラ ) 短縮サービスで URL 取得したので以下のようになっています http://gdriv.es/three/WebGL_JSONLoader.htm確認事項 ● 外部の JavaScript は、外部も https でないとエラーになります。 ● 日本語は UTF-8 ですが、Google のドライブビュアーでは化けます ● Three.js は r66 を使っています。どのバージョンからかは確認していませんが、表示エリアの背景色は、レンダラーで指定します( renderer.setClearColor( 0xffffff ); ) ● 古いコードがエラーになっていた、JSONLoder の load メソッド内の対応として function ( geometry, mt ) として、マテリアルを追加して内部で利用しました。このあたりは処理の違いで必ずしも必要あるかどうかは解りませんが、このサンプルではデータも相当古くて、上下反転して正しく表示させました。 最終調整は、Neutron Drive で行いましたが、とても便利でした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebGL : JSONLoader のサンプル ( Three.js r66 )</title>
<style>
* {
font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif
}
body {
margin: 0;
background-color: #c0c0c0;
}
.top {
background: url(http://winofsql.jp/image/top_1.png) repeat-x 0px 0px;
border: 0px solid red;
height: 22px;
margin-bottom:3px;
color:white;
padding: 2px 0 2px 5px;
}
#container_three {
margin-left:20px;
}
#container_three canvas {
border:solid 1px #000000;
border-radius: 10px;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
<script src="https://secure624.sakura.ne.jp/fire30.winofsql.jp/three.min66.js"></script>
</head>
<body>
<div class="top"></div>
<div id="container_three"></div>
<div style='padding:20px 0px 0px 50px;'><br />
素材 Credit : <a href="http://www.geocities.jp/lab_no2/index.html" target="_blank" style='color:navy;'>光陰像型</a><br />
<img src="https://lh4.googleusercontent.com/-l9OgYV58Um0/T1Tgp2I8wnI/AAAAAAAAE7I/ntYKTmra3Xw/s200/_img.png" style="border: solid 0px #000000;margin-top:3px;" /><br />
</div>
<script>
var container, stats;
var camera, scene, renderer;
var mesh;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById( 'container_three' );
scene = new THREE.Scene();
scene.position.y = 200;
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 0, 200, 650 ).normalize();
scene.add( directionalLight );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, -200, 650 );
scene.add( camera );
loader = new THREE.JSONLoader();
loader.load('kabotya2.js', function ( geometry, mt ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( mt ));
mesh.scale.x = 150;
mesh.scale.y = 150;
mesh.scale.z = 150;
scene.add( mesh );
}, '' );
renderer = new THREE.WebGLRenderer( );
renderer.setClearColor( 0xffffff ); // 背景色
renderer.setSize( 800, 700 );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05+15;
camera.position.y += ( - mouseY - camera.position.y + 400 ) * 0.05;
camera.lookAt( scene.position );
if ( mesh ) {
mesh.rotation.y -= 0.01;
}
renderer.render( scene, camera );
}
</script>
</html>
タスクマネージャについていろいろ
ホットキー CTRL + SHIFT + ESC アプリケーション名 taskmgr.exe 管理者権限で実行する Windows7 ではスタートメニューの『プログラムとファイルの検索』で taskmgr と入力して CTRL + SHIFT + ENTER として実行すると、以下のような使い方ができます。( Windows8 では最初からあります )Windows7 までの Tiny Footprint モード
( 周りの適当なところをダブルクリックします ) Windows XP でタスク マネージャのメニュー バーおよびタブが表示されない イメージパス名 『表示』=> 『列の選択』で表示させると、フルパスで所在が解ります。
指定した位置でレジストリエディタを開く為のスクリプトをダウンロードするコンテンツ
特徴 ※ コンテンツとして使えます。 ※ 一度実行したパスはクッキーで保存されます。 ※ IE でかつ内容を信頼するなら、「開く」で即実行できます。 ▼ 埋め込んだ状態
PHP としてダウンロードは以下のリンク先です。 信頼してレジストリエディタを開くページ ▼ IFRAME のコード
<iframe src="http://toolbox.winofsql.jp/regopen.php" frameborder="0" scrolling="no" width="600" height="120" ></iframe>
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
