あるフォルダに「fig1.png, fig2.ping, …」が有るとして、現在は「open -F fig*.png」を実行すると、一つのpreview.appで開かれて、矢印キーで画像を閲覧できる様になて居ます。
本当は「Quick Look」で開くのが望ましいです。どの様にすれば善いか、お教え下さいませんか？
Mac mini, Mac OS X (10.7.5), Mac mini(mid 2011), iMac(late 2009)
かなり試行錯誤されましたね。感動しました。Quick Look のプラグインも結構良い感じですね。
下図は HTML を Safari で表示したものです。ヘッダにある「▲|▼」はテーブルをソートする Javascript Bookmarklet。ちなみに一番右のカラムをソートした状態です。
HTML はフォントの大きさが自由に調整できるのが好印象かなと。Javascript は HTML に組み込んでも良いのですが、私の場合はほとんど Bookmarklet で済ませてます。これが一番簡単です。(自分で書かなくても良いので)
[ご参考]
JAVASCRIPT::BOOKMARKLET
Hiro.Sさん、情報有り難うございます。
ご紹介事例は素晴らしいです。Bookmarkletというのは全然知らないのですが、調べて見ます。
> HTML はフォントの大きさが自由に調整できるのが好印象かなと。
ここら辺が「Quick Look」がデバック・ツールのためでしょうかねぇ、勿体ない事です。
Bookmarklet とは Safari や Firefox などでブックマークに登録して使う Javascript です。リンク先に「テーブルをソート」というのがあるので試してみてください。
なお、HTML は何の変哲もない table で、一行おきの背景色は CSS で簡単にできます。Safari でも Firefox でも大丈夫です。
// 一行おきに背景色をつける CSS - 奇数行の場合は even を odd に変更
tbody tr:nth-child(even) {
background: #cccccc;
}
# 最近のウェブブラウザの表現力は凄いですね。
自己コメントです。
色々と調べる内に、CSVやTSVを気楽にブラウザで見る事が出来るというのは素晴らしいなと気が付きました、今更ですが……。
そこで、javascriptとかjQueryとかで検索していると、「jquery.csv2table.js」と言うサイト；
• http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm
の事例に当たりました。これらの事例を組み合わせると、自分の希望に近くなりそうでした。ダウンロードしようとすると、新しいサイトに移ったとあるので、そちらを探しまわりましたが、jquery.csv2table.jsは見つかりませんでした。
もし、上記を入手する方法をご存知の方がいらしたら、お教え下さると幸いです。
こりゃ凄いもの見つけましたね！
jquery.csv2table.js は version:csv2table-0.02-b-4.3 : Source にあります。Source の部分を別名で保存。で、こんな感じになります。
もうこれで決まりじゃないでしょうか？
Hiro.Sさん、早速のご教示、有り難うございます。
> jquery.csv2table.js は version:csv2table-0.02-b-4.3 : Source にあります。
わぁ、これが本体だったのですか！！！ 本体は、バイナリだと思っていました。コピーしてエディタに落としたら、.jsの様な関数に替わりました、不思議ですが？ 一応、jquery.csv2table.jsとして保存しました。
これから、jQueryのご本尊を入手するのですが、versionは何にすれば宜しいのでしょうか。
> こりゃ凄いもの見つけましたね！
> もうこれで決まりじゃないでしょうか？
御意。これなら有料でも購入します！！！
これから、jQueryのご本尊を入手するのですが、versionは何にすれば宜しいのでしょうか。
compressed, production jQuery 1.9.1 でとりあえず大丈夫のようです。
Hiro.Sさん、
> compressed, production jQuery 1.9.1 でとりあえず大丈夫のようです。
はい、これで動きました。グラフも書けるなら、簡単なデータの表示にはexcel無しで行けそうです。
で、ここまで来ると、
# 「Quick Look」の必要性はFinderでアイコンを見て、ファイルの中身が判り易いというだけになったかな。
サンプルは全部動かしてみようと。
私もしばらくこれで遊んでみようと思います。こんなすばらしいものに巡り会えるなんて思ってもみませんでした。いや〜本当に感謝です。
「見易く、奇麗で、ソート可能」ですね、脱帽。
自分も昨日、サンプルを一つ動かして、満足して寝てしまいました。
一応、~/Site/myJSを用意して、ブラウザからlocalhostから「Index of /~u1」経由で開いていたのですが、Finderで直接「~/Site/myJS/Book12_cvs.html」をクリックしても開けるので驚きました。
このサンプルでは「Run」ボタンをクリックしないとテーブルが出ないのですが、このボタンなしに直接にテーブルを出してくれると善いのですが……。
もし宜しければ、変更方法をお教えいただけませんでしょうか。htmlは；
<html>
<head>
<script src="./js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./js/jquery.csv2table-0.02-b-4.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input
class = "btn1"
type = "button"
onclick = "$('#view42').csv2table('./data/Book12.csv',{
onload : function(id,op,data,ary){
$('tr:even','#'+id).css('background','#eee')
}
});" value="Run">
<div id="view42"></div>
</body>
</html>
です。javascriptにも疎いので、ご迷惑をおかけします。m(_._)m。
このような小型の表とかグラフをブラウズ専用で表示してくれる軽快なブラウザ、femto、なんて言うのを作って欲しいものです。
こんな感じでどうでしょう？パラメータは適宜書き換えてください。
・radio_list.txt を html と同じフォルダに置く
・列 \t 区切り
・行 \n 区切り
・偶数行に背景色 #eee
<body>
<div id="view0"></div>
<script>
$(function(){
$('#view0').csv2table('radio_list.txt',{
col_sep:'\t',
row_sep:'\n',
onload : function(id,op,data,ary){
$('tr:even','#'+id).css('background','#eee')
}
});
});
</script>
</body>
この Javascript の素晴らしい点は、一旦 HTML を拵えたらそれでお終い...ってとこですね。CotEditor で眺めるのはもうやめました。(笑)
Hiro.Sさん、早速の解法のご提示有り難うございます。
取り敢えずは、今回の方法を前提として全体を組み立てたいと思います。
> この Javascript の素晴らしい点は、一旦 HTML を拵えたらそれでお終い...ってとこですね。
そうですね、上記のテキストをテンプレートとして、スクリプトで表のhtmlを作れるようにすると、表なら気楽に表示できます。
やや気になるのは、余白が自動的に切り取れていない事ですが、フォントが自由にかえられるので、取り敢えず目をつぶろうかと……。
# 今の自分に取って「魔術」と言った感じですが、昔、挫折したJabaScriptの本に目を通し始めた所です。
やや気になるのは、余白が自動的に切り取れていない事ですが、フォントが自由にかえられるので、取り敢えず目をつぶろうかと……。
レイアウトの微調整は HTML に独自の CSS を書くのがおすすめ。この Javascript はソースがとても奇麗なので、これ以上弄らない方が良さそうです。
このように Javascript により動的に生成される HTML に対し、独自の CSS を...という場合、セレクタを探し当てるのが結構大変です。その手助けになるのが Firefox のアドオン「Firebug」。
Javascript のソースを読みつつ、Firebug で HTML を確認しながら CSS を作成すると効率良く作業ができます。ただ、このアドオンはかなり重いので、Firefox がメインブラウザなら普段は OFF にしておくと良いかもしれません。
Firebug
Shell Script、AppleScript、Javascript、CSS と、一度に全部じゃキツいでしょうから、レイアウトは「宿題」とするのも良いかもしれませんね。ゴールはほとんど見えているので頑張ってください。
Hiro.Sさん、コメント有り難うございます。
昨日は、スクリプトに食傷気味だったので、osxで動く各種ブラウザを試してみました。通常のインターネットでのブラウズと、今論議しているスクリプトで生成されるローカルなファイルのブラウズでは意外と、そのブラウザの個性が色濃く反映される様でした。今後、じっくり使い込みながら「ローカルなファイルのブラウザの最善アプリ」を決めようと思います。
# それにしても「複数ファイルについての『Quick Look』のUI」は秀逸ですね。
さて、本題ですが、
レイアウトの微調整は HTML に独自の CSS を書くのがおすすめ。この Javascript はソースがとても奇麗なので、これ以上弄らない方が良さそうです。
はい、そう致します。多くのブラウザでも破綻なく表示されていました。
このように Javascript により動的に生成される HTML に対し、独自の CSS を...という場合、セレクタを探し当てるのが結構大変です。その手助けになるのが Firefox のアドオン「Firebug」。
以前、一寸乗せて見たのですが、フォントが小さくて使えませんでした。老眼者の配慮もして欲しいところですが、数の論理には勝てませんからね。
Shell Script、AppleScript、Javascript、CSS と、一度に全部じゃキツいでしょうから、レイアウトは「宿題」とするのも良いかもしれませんね。ゴールはほとんど見えているので頑張ってください。
確かに長年の夢が現実に成り始めた感じですね。まさにHiro.Sさんのご指導の賜物かと思います。纏めに向けて踏ん張ってみます！
Hiro.Sさん、
漸く中間の纏めです。
今回は元ファイル「~/Music/radio_list.txt」から出発して、
表の元となるデータファイル「~/Sites/myJS/data/Radio_List.tsv」を生成して、
そのデータを表示するファイル「~/Sites/myJS/Radio_List.html 」を起動させる為の、
bashスクリプト「radioListView」を説明します。
「radioListView」では、
•元ファイル全体に連番(#)を振り、
•その中を単語でサーチする機能(-s "xy z")、
•結果の最新の行数に限定(-l 4 ← 4行にセット)して表示。
•パラメータ無しでは全部の表を表示。
実例として、単純に最新の4行限定の場合；
「"Eighth Note"」で検索して、その最新の4行限定の場合；
といった具合です。
そこで、bashスクリプト「radioListView」を以下に示します；
#!/bin/bash
#set -x
# files
org=${HOME}/Music/radio_list.txt
mid=${HOME}/Sites/myJS/data/radio_list.mid.tsv
mid2=${HOME}/Sites/myJS/data/radio_list.mid2.tsv
res=${HOME}/Sites/myJS/data/Radio_List.tsv
#2桁の数字; 00~99
nn="[0-9][0-9]"
# getopts: 入門UNIXシェル・プログラミング、p143~
#
# radioList_setup [-l lineNum] [sortingWords]
# lineNum: "line number" in tail command >=1, lineNum=0 → whole table.
# sortWords: use in grep command
lineNum=0
searchWords=""
while getopts l:s: OPT
do
case $OPT in
l) lineNum=$OPTARG;;
s) searchWords="$OPTARG";;
\?) echo "Usage: $0 [-l lineNum] [-s sortWords] parameters" 1>&2
exit 1;;
esac
done
#
# Headings of Table for List of Streaming Radios
#
echo -e " # \t date-time \t Music Stations \t music information" > $res
#
# add absolute Sequencial Number
#
# 「-HHMMSS\t」→「-HH:MM\t」
#
cat -n $org | sed -e "s/-\($nn\)\($nn\)\($nn\)${mytab}/-\1:\2${mytab}/" > $mid
#
# searchWords with grep
#
if [ "$searchWords" = "" ]
then
# no search
cp $mid $mid2
else
# search with "$searchWords"
cat $mid | grep "$searchWords" > $mid2
fi
#
# last-lines with tail
#
if [ $lineNum -eq 0 ]
then
# no tail
cat $mid2 >> $res
else
# do tail
cat $mid2 | tail -n $lineNum >> $res
fi
#
# show table in brouser
#
open ${HOME}/Sites/myJS/Radio_List.html
また、データを表示するファイル「~/Sites/myJS/Radio_List.html 」を以下に示します；
<html>
<head>
<script src="./js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./js/jquery.csv2table-0.02-b-4.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="view0"></div>
<script>
$(function(){
$('#view0').csv2table('./data/Radio_List.tsv',{
col_sep:'\t',
row_sep:'\n',
onload : function(id,op,data,ary){
$('tr:even','#'+id).css('background','#eee')
}
});
});
</script>
</body>
</html>
以前教えて戴いたのとほとんど同じですが、上記ファイルは「~/Sites/myJS/Radio_List.html 」にあります。
Terminalから複数の画像(png)を「Quick Look」で開くには？
