ogu-tec - Part 18

蘭の鉢置き台作成

Posted on 2016年11月12日 by putimaro / 0件のコメント

かみさんの要望で部屋に置く蘭の鉢置き台を作成した。大分寒くなってきたんで庭から部屋に移動するため。
材料は濡れ縁に放置してあった欅の端の板にやはり欅の２年前に製材してもらった端の太い板。
放置してあった板はかなり反っていて、シラタが腐食。しかも表面が汚くなっている。
家具とは言えないものだからかまわないのでざっくり作ってみた。

材料の汚い板。しかし表面をしっかり洗って、腐食部分を取り除き、半分にして鉋をかける。師匠の紹介で購入した鉋、さすがによく切れます。

こんなにきれいに。これが材木のいいところ。削れば美しくなります。大型機械でやれば反りも取れんでしょうが、ここはそこまでやらなくても。

脚になる部分の材を切る。結構太いので大変かと思いきや、この替え刃鋸がよく切れる。新しい替え刃で切った。切り口もきれい。

本当はこれも鉋がけすべきだけど、洗っただけにした。オイルでも塗ればこんな感じになるだろうが、まいいか。（ぬれている状態です）

あとはこの脚二つに板を載せるだけで完成

日当たりの良い２階に設置。（これが一つ一つが結構重いので運ぶのが大変）

蘭の鉢はかみさんが運んで載せました。

さて、花を咲かせるか。

木工

木製スプーンの作成過程

Posted on 2016年11月1日 by putimaro / 0件のコメント

蓼科から何年か前に持ち帰った栗の木を庭に放置してあったのを見つけて、これでスプーンを作ってみようと思った。以前にもやったことはあるが、今回はちょと丁寧にやってみようと。

そこでそのプロセスを報告する。

まず鉈で整形する。これがなかなか便利。
ノコギリを使うより簡単に割れるし、皮など不要部分も削ぎ落とせる。

次に一応の墨付けをして

ノコギリで切れ目を入れ

やはり鉈を使って整形する。

スプーンの肝心な部分は平鑿で平にしてから大体の形を墨付けし

まずは丸鑿で彫っていく。栗材は堅いイメージだけど、意外とスムーズに彫れる。しかし決して慌ててはいけない。

今度はいわばスプーン作成専用の彫刻刀？で彫る。これが実は秘密兵器。アメリカ製らしいが、「flexcut」といってオフコーポレーションで買ったものだ。とてもうまく彫れる。

ここまできたらノコギリをつかってさらに整形する。

そしてあとはひたすら小刀で削っていく。スプーンを作るのにこの小刀での削りが一番時間がかかるが、これが楽しいのだ。（ようするによっぽどの暇人じゃないとこんな作り方はできない。というよりこれを楽しみにできない人はこんなことはしませんよね。）

ここまで削れば上出来でしょうか。

ここでいよいよ電動工具登場！と言っても単にドリルを固定して、その先に紙ヤスリを付けたビットを付けたもの。これもなかなか便利。これを使って彫りあとを綺麗にしていく。これもちょっとづつです。

こんな感じ。

でも内側はこれではうまく綺麗になりません。

あとはひたすら紙ヤスリの世界です。２５０番ぐらいから始めて１０００番ぐらいまでやりましょう。

最後は実際に使えるように木型め塗料を塗ることになるかと。完成はもうちょっと。

iPadで撮った写真のWeb上での扱い

Posted on 2016年11月1日 by putimaro / 0件のコメント

日頃写真をもっぱらiPadで撮っている。
木工をやっている最中も途中過程をブログに載せるためにiPadを傍らに置いている。
ところがこの写真をいざブログに載せるにあたっていろいろ面倒がある。
facebookなどのSNSに載せるのはそのまま簡単にできるのだが、自前のWordpressのブログに編集した上で載せるにはそれなりの手続きが必要だ。
それをまとめてみた。

まず、iPadで撮った写真（スクエア）は次のようなものだ。

サイズ：1936×1986 72dpi 1.54MB
ファイル名：ファイル 2016-04-12 14 26 29.jpeg
位置情報他：あり

これだけでも自前のブログに載せるにはさまざまな問題があることがわかる。

サイズが大きすぎる。
ファイルの拡張子がjpgではない。
ファイル名が日付になっている。
余計な情報がいろいろ入っている。

などだ。

以前にブログに載せる適当な画像ファイルのサイズについて書いたことがある。
それによればせいぜい横幅が600ピクセルあればいいと言う結論だった。
そこでこの画像ファイルを変更することなる。一枚なら画像処理ソフトを使うのもいいが複数枚になると面倒だ。そこで以下の方法を取っている。

１．一括リネームする。
２．一括サイズ変更をする。

１は「RenameKn.exe」を使う。
２は「リサイズ超簡単！Pro」を使う。
いずれもフリーソフトだ。ベクターからダウンロードできる。
（実は拡張子がjpgなら１は必要ない。２でもリネームができるからだ。）

１．

フォルダを選択して
この場合以下の設定

連番チェック
基本ファイル名入力
連番桁数４
開始番号１

拡張子変換チェック
jpg入力

赤⇒クリック

画面は変換後

２．

フォルダを選択して、全てのファイルを指定
この場合の設定

横サイズ優先で
480を入力
JPG保存品質で
100を選択
Exif情報の継承のチェックをはずす
あとはそのまま

特に「Exif情報の継承のチェックをはずす」は重要
ここで余計な情報が削除される。

変換開始をクリック

変換後の画像は同じフォルダ内にResizeフォルダ画でその中におさまる。

できた画像は

サイズ：480×480 96dpi 185KB
ファイル名：spoon0001.jpg　～　spoon0004.jpg（連番）
位置情報等：なし

かなり小さくなりました。実際の画像はこれを使ったブログ記事「木製スプーンの作成」で見てください。

ネット上の画像ツールを使って横長なバナー画像を作成

Posted on 2016年9月28日 by putimaro / 0件のコメント

ブログやホームページを作っている人にとって画像処理は避けて通れない関門です。
photoshopなどを使いこなせる人はそれほど多くはないはずです。
また、こうした本格ツールは価格等敷居が高ですね。フリーのいいツールもありますが、これまた習熟するのが大変です。
そこで、webアプリケーションを使って横長なバナー画像を作成するノウハウを紹介したい。
まずhttps://pixlr.com/editor/にアクセスする。以下の画面（かつて紹介したことのあるwebアプリケーション）

一番上の＋の「新しい画像を作成」をクリック

現れた「新しい画像」窓で
名前
幅高さ
を入力
透明にチェックを入れる。
プリセットはそのまま
チェックを入れる時反応が悪い場合があるので注意

OKボタンを押す。

これで透明な新しい画像ができました。
ここにレイヤーで画像を載せて位置を調整します。この画像は透明な画像よりやや大きめの画像でなければなりません。もし使いたい画像が小さい場合は拡大が必要です。これについては後でやりましょう。

メニューバーの「レイヤー」をクリックして、
プルダウンから「画像をレイヤーとして開く」を選択します。

ローカルから画像を選択します。

そうすると画像の上の部分が張り付きます。
これを移動させます。
移動ツールは左側の二列に並んでいるアイコンの右側の一番上の矢印と移動マークのアイコンです。

これをクリックして、画像の中に入れて移動させると画像のレイヤーが動きます。適当なところで止めます。図のように。

「ファイル」から保存を選択します。以下の窓が開いたらOKします。
ローカルフォルダが出ますので、フォルダを選択して保存します。

以下ができた画像です。

今度は作ろうとする画像より小さな画像を使う場合をやってみます。ただし、画像を拡大するのであまり小さな画像だと品質が劣化します。それを承知の上でやってみます。基本的には同じ操作をすれば良いのですが、貼り付ける画像をあらかじめ大きくしておくだけです。その方法だけ示します。
以下の画像を使ってみます。

四角の代表的な画像です。912✖️684の大きさです。横を1140にしたいので、1200ぐらいに拡大します。これもこのツールを使ってみます。

「ファイル」から「画像を開く」を選択します。初期画面でしたら、二段目の「コンピューターから画像を選ぶ」を選択します。上は開いたところです。

そして、メニューから「画像」「画像サイズ」を選んで、幅を1200にします。その際、縦横比を固定にチェックがかかっていることを確認してください。

そしてこれを一旦保存します。名前を変えます。「ファイル」「保存」です。

その上で前にやった作業をします。できた画像はこのようになります。

以上

古典文学

漱石大全読了

Posted on 2016年8月29日 by putimaro / 0件のコメント

最近読書はもっぱらkindleでやっている。字の大きさを変えることができるし、明るく軽いので実に重宝だ。
今日、そのkindleで夏目漱石大全を読了した。
漱石は嘗ての国文学徒の習いとして学生時代主要な小説類は読了していたし、卒業後も時に応じて幾つかの作品は再読してきた。
そして今回漱石生誕100年とかで世間でとりあげたこともあってもう一度読む気になった。
しかもAmazonがKindle版で122作品を「漱石大全」として出版して、手軽ということもあって取り組んだわけである。
取り組んだとはちとオーバーだけれど、ほとんど昼寝や就寝まえに寝転がって読んだに過ぎないが実に半年を要してしまった。
Kindleによれば平均的に読了まで107時間を要するらしい。一日1時間としても3ヶ月以上は要する計算になる。ということは一日30分しか読んでなかったことになる。
こんな計算はいかにもIT読書ならではである。しかも漱石は著作権が切れているので、青空文庫を基にしたこのKindle版は200円という価格である。実に安い暇つぶしである。

さて、そんなことはさておき、今回漱石を読み直して思ったのは嘗て漱石作品で一番だと思っていた「こころ」が意外につまらなく感じたこと、また「明暗」が嘗てはそれほどとは思っていなかったのに、これまた意外に面白く読めたことだ。
さらには漱石は小説より談話や講演が実に面白いということ。批評家として優れているということ。などなど改めて感じたことだ。
これは読む方の年齢と言うのが関係していると思う。ここら辺りをしっかり考えるとなにかまとまったことが言えるかもしれない。

もう一つ。執筆年不詳ということでこのKindle版で最後の方に載っていた「自転車日記」というのが実に秀一だった。これはロンドンで自転車に乗る練習をした時のことを書いたものだが、この文章こそ漱石の真骨頂のような気がした。
成島柳北にも通ずる達意の文章だ。読んでみてちょ。

収録作品を以下五十音順に示す。（Kindleでは年代順に載っている。）

イズムの功過
一夜
永日小品
岡本一平著並画『探訪画趣』序
思い出す事など
カーライル博物館
薤露行
学者と名誉
硝子戸の中
元日
木下杢太郎著『唐草表紙』序
教育と文芸
京に着ける夕
虚子君へ
草枕
虞美人草
ケーベル先生
ケーベル先生の告別
現代日本の開化
行人
坑夫
『心』広告文
『心』自序
『心』予告
こころ
琴のそら音
コンラッドの描きたる自然について
作物の批評
三山居士
『三四郎』予告
三四郎
子規の画
子規の畫（旧仮名）
「自然を寫す文章」
自転車日記
写生文
趣味の遺伝
初秋の一日
処女作追懐談
人生
鈴木三重吉宛書簡―明治三十九年
西洋にはない
戦争からきた行き違い
創作家の態度
『それから』予告
それから
それから（旧仮名）
高浜虚子著『鶏頭』序
田山花袋君に答う
『土』に就て
艇長の遺書と中佐の詩
手紙
『傳説の時代』序
点頭録
『東洋美術図譜』
道楽と職業
「土」に就て
長塚節氏の小説「土」
中味と形式
二百十日
入社の辞
猫の広告文
野分
『煤煙』の序
博士問題とマードック先生と余
博士問題の成行
長谷川君と余
彼岸過迄
「額の男」を讀む
文芸委員は何をするか
文芸と道徳
文芸とヒロイツク
文芸の哲学的基礎
文芸は男子一生の事業とするに足らざる乎
文士の生活
文壇の趨勢
文鳥
変な音
變な音（旧仮名）
僕の昔
坊っちゃん
マードック先生の『日本歴史』
正岡子規
幻影の盾
満韓ところどころ
道草
無題
明暗
明治座の所感を虚子君に問れて
模倣と独立
門
夢十夜
余と万年筆
予の描かんと欲する作品
落第
倫敦消息
倫敦塔
私の経過した学生時代
私の個人主義
吾輩は猫である
『吾輩は猫である』上篇自序
『吾輩は猫である』中篇自序
『吾輩は猫である』下篇自序
吾輩ハ猫デアル　旧仮名（序文・第一のみ）

古典文学

俳諧は捻くれ者が好む

Posted on 2016年6月27日 by putimaro / 0件のコメント

芸香という人の句に

どくだみの花も咲くらん明月院

というのがある。当人はいたって名句だと自讃しているが、これは相当捻くれ者の句だ。明月院といえば鎌倉の紫陽花で有名な寺。そこにこともあろうに「どくだみ」の花を想像する。紫陽花を詠めばいいものをと誰もが思う。しかし、先生皆が注目する紫陽花には触れずにきっと「どくだみ」の花だって咲いているはずだと想像する。なるほど、ここに俳諧がある。紫陽花を詠まずに「どくだみ」を詠むことによってかえって紫陽花が咲き誇っている様を想像させようという魂胆だろう。そういえばこの先生が私淑してやまない芭蕉にもこんな句がある。

霧時雨富士を見ぬ日ぞ面白き

確か箱根の見晴らしのいいところに句碑もある。霧時雨で富士が眺望できない。もう訪れることはないかもしれない。普通だったら残念がるところだ。しかしそれがかえって面白いとする。見えないからこそ想像する。そこが面白いのだろう。しかし捻くれ者の言には違いない。

そういえば死後100年とかでこのところよく取り上げられる、かの夏目漱石も自ら捻くれ者と称した。漱石とは「石で口を漱ぐ（すすぐ）」という意味だ。

確かに捻くれ者に優れた者がいる。しかし、捻くれ者がすべて優れているわけでもない。ねえ芸香先生。どくだみも紫陽花ももう盛りを過ぎているけど、先日旅先で紫陽花園なるところに立ち寄って思い出した。

web上の画像のサイズなど追記

Posted on 2016年6月24日 by putimaro / 0件のコメント

実は前の記事をUPしてiPadで見てみたら、一部の画像が回転して表示されていました。これはきちんと撮影していなかったのと、加工した際もとの画像情報が引き継がれてしまったためです。
早速修正しましたが、ここで大事な点を忘れていました。

WEB上に画像を掲載する場合は画像に付属している情報を削除するという点です。やり方は検索すれば出てきますので省略しますが、こうするとバイト数も減るはずですし、今回のような問題も起きません。

web上の画像のサイズなど

Posted on 2016年6月24日 by putimaro / 0件のコメント

以下の４枚の写真をよく見てください。違いがわかりますか？

ディスプレーの上下がありますので、順序を逆にして表示します。

これは小生がiPadで撮った庭の写真ですから写真としてはまずいものですが、どの写真も同じように見えませんか？

いずれもこのページでは中サイズ、すなわち300×300で表示させています。しかし、すべてサイズや解像度が違う写真です。オリジナルの画像を画像処理ソフトでリザイズしています。画像をクリックすると元の画像が表示されますからわかるはずです。
では、なぜこんなことをしたかというと、今サポートしているサイトで多くの画像を扱っていて提供された画像がサイズも解像度もばらばらで、その画像を統一する必要があったからです。どの程度がいいか考えたわけです。
もう少し具体的に説明すると上の画像はそれぞれ以下のサイズと解像度を持っています。

1936×1936　72dpi 811kb
640×640　72dpi 131kb
320×320 72dpi 40.3kb
1939×1936　320dpi 811kb

こう見ると、実はweb上の画像に基本的に解像度は関係がないということがわかります。なぜなら解像度は印刷と印刷サイズに関係があるが、もともとたかだか300ピクセルぐらいの幅でしか表示しないわけだからだ。
従ってバイト数の少ない3番目の画像で充分だということになる。ただ、ここで問題なのはいわゆるスマホ等の解像度だ。iPhoneなどが採用しているRetinaディスプレーだ。このディスプレーはデバイスが持っている解像度と実際の（cssのというか）解像度が違うため、簡単に言うと2倍のサイズの画像が必要だということらしい。（このブログをRetinaディスプレーで見て比べてください）このあたりはよくわからないしややこしいので以下を見ていただければと思います。
Rriver：いまさら聞けないRetina対応のための「ピクセル」の話
結論。画像は2番目の「640×640　72dpi 142kb」で行くことにします。

xmlを使ったウェブページのサンプル

Posted on 2016年6月21日 by putimaro / 2件のコメント

前回書いたxmlを使ったページについてここでサンプルを示す。
まずはhtml

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/xmljq.js"></script>
<title></title>
</head>
<body>
    <div id="wrap">
        <aside>
        <h2>部活動記事一覧</h2>
        <ul class="itiran">
        </ul>
        </aside>
        <article>    
        </article>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<aside>

<h2>部活動記事一覧</h2>

</ul>

</aside>

</article>

</div>

</body>

</html>

いたってシンプル。asideの一覧すなわちulのところに見出しを出力して、そこにオンクリックでarticlのところに表示するというもの。
ここはデータが何もなくていい。
そして、スクリプト。以下

function xmlpreLoad(){
    $(".itiran").html("");    
    $.ajax({
        url:'xml/data.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:parse_xml
    });
}
function parse_xml(xml,status){
    if(status!='success')return;
    $(xml).find('row').each(disp);
}
function disp(){

    //各要素を変数に格納
    var $no = $(this).find('no').text();
    var $title = $(this).find('title').text()

    //HTMLを生成
    $('<li onclick="xmlLoad('+$no+')">'+$title+'</li>'
        ).appendTo('.itiran');
}

$(function(){
    xmlpreLoad();
});

function xmlLoad(index){
    $("article").html("");
    $.ajax({
        url:'xml/data.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:function parse_xml(xml,status){
    if(status!='success')return;
    var data = $(xml).find('row');
    
    var no = index-1;

    var $date = data.find('date').eq(no).text();
    var $title = data.find('title').eq(no).text();
    var $img = data.find('img').eq(no).text();
    var $text = data.find('text').eq(no).text()
        
    //HTMLを生成
    
    $('<h1>'+$title+'</h1>'+
        '<p class="date">'+$date+'</p>'+
        '<img src="'+$img+'"&　gt;'+
        '<p>'+$text+'</p>'
        ).appendTo('article');
}
    });
}

function xmlpreLoad(){

$(".itiran").html("");

$.ajax({

url:'xml/data.xml',

type:'get',

dataType:'xml',

timeout:1000,

success:parse_xml

});

}

function parse_xml(xml,status){

if(status!='success')return;

$(xml).find('row').each(disp);

}

function disp(){

//各要素を変数に格納

var $no = $(this).find('no').text();

var $title = $(this).find('title').text()

//HTMLを生成

$('<li onclick="xmlLoad('+$no+')">'+$title+'</li>'

).appendTo('.itiran');

}

$(function(){

xmlpreLoad();

});

function xmlLoad(index){

$("article").html("");

$.ajax({

url:'xml/data.xml',

type:'get',

dataType:'xml',

timeout:1000,

success:function parse_xml(xml,status){

if(status!='success')return;

var data = $(xml).find('row');

var no = index-1;

var $date = data.find('date').eq(no).text();

var $title = data.find('title').eq(no).text();

var $img = data.find('img').eq(no).text();

var $text = data.find('text').eq(no).text()

//HTMLを生成

$('<h1>'+$title+'</h1>'+

'<p class="date">'+$date+'</p>'+

'<img src="'+$img+'"&　gt;'+

'<p>'+$text+'</p>'

).appendTo('article');

}

});

}

まず、function xmlpreLoad()で見出しに必要な要素をつかまえて、htmlを繰り返し生成する。これでasideの見出しができる。
次は見出しがonclickされた時に実行されるスクリプトfunction xmlLoad(index)だ。
実はここがよくわかっていない小生が苦労したところ。
indexを引数にして、ここから１を引いた数を変数noに代入して、それを変数の順番としてeqで取り出す。
そうするとクリックされたデータを取得できる。これでhtmlを生成するというわけだ。

xmlのデータは例のエクセルからMr.DataConverterを使って作ったものだ。

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row>
    <no>1</no>
    <date>2016.07.23</date>
    <title>ペンギン部全国大会準優勝</title>
    <img>images/sample01.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
  <row>
    <no>2</no>
    <date>2016.06.23</date>
    <title>グランドキャニオン部全国大会準優勝</title>
    <img>images/sample02.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
  <row>
    <no>3</no>
    <date>2016.05.23</date>
    <title>コアラ部全国大会準優勝</title>
    <img>images/sample03.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
  <row>
    <no>4</no>
    <date>2016.04.23</date>
    <title>クラゲ部全国大会準優勝</title>
    <img>images/sample04.jpg</img>
    <text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>
  </row>
</rows>

<?xml version="1.0" encoding="UTF-8"?>

<rows>

<row>

<title>ペンギン部全国大会準優勝</title>

<img>images/sample01.jpg</img>

<text>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</text>

</row>

<row>

<title>グランドキャニオン部全国大会準優勝</title>

<img>images/sample02.jpg</img>

</row>

<row>

<title>コアラ部全国大会準優勝</title>

<img>images/sample03.jpg</img>

</row>

<row>

<title>クラゲ部全国大会準優勝</title>

<img>images/sample04.jpg</img>

</row>

</rows>

こうするとユーザーがなれたエクセルでデータをつくれば、ウェブページに表示できる。これは便利でしょ。
もちろんいろいろな応用が効きますね。たとえば商品一覧を作るだとか。
あとはhtmlとデザインのcss次第です。

サンプルは以下。表示されている文字列をクリックしてみてください。

http://ogu-tec.net/test/webtestxml04/

Mr.DataConverterは便利

Posted on 2016年6月21日 by putimaro / 0件のコメント

xmlを使ってhtmlを自動化するのは便利だけでなく、ユーザーがデータ入力したものをいわばそのまま使うことができる。しかもxmlファイルはエクセルと相性がいい、はずだった？

ところが、mac版だけなのか、2016のエクセルでxmlファイルが上手く読めないし、書き出せない。方法はあるのかもしれないが、わからない。そこで色々調べてみた。

出会ったのがこのMr.DataConverterだ。これはウエッブサイト上のツールで、エクセルのデータをコピペすると、いろいろなデータソースに変換してくれる。

以下がエクセルのファイル。これのデータ部分をコピーする。

そして、Mr.DataConverterにデータの方を選択して貼り付けると、以下のように変換してくれる。

これをコピーして、エディタに貼り付けて、xmlとして保存してやればいい。
これなら、データを普通のスキルがあれば作れるし、たとえば大量のデータをウェブ上に表示するとき便利だ。
このサイトは以下
https://shancarter.github.io/mr-data-converter/
xmlを使ったサイトのサンプルは次の投稿で。