2020年4月から小学校においてプログラミング教育が必修化になります。人間の進化とともに道具を使う生活が根付いています。その一つとして電子機器のツールが生活の隅々まで普及し利用されています。
発展した文化生活において物事の原理や仕組みなどを理解してさらに積み上げた生き方が求められています。まずは遊び心でプログラミングを楽しみましょう。
プログラミングコードの公開は4月以降になるでしょう。中央に少年・少女の成長記録を16態描画しています。音声は再生ボタンをクリックすることで出力されます。
図形・画像をSvgで表現すると画像サイズが小さくなるうえ、拡大・縮小しても画像が劣化しないという特長があります。加えて手書きでサインするかのように時間差表示が可能になり、動画表現として閲覧者にアピールできます。
画像を縁どって違和感なく表現するには複雑な図形や写真などは似合いません。単純なものを選びます。文字を縁取りしたり、左馬のようにフォントが無いものは扱い易いです。文字は白と黒の2色であり、多色画像はこれらをマスターした後の挑戦が望ましいでしょう。
PNG画像からSVG画像を作成するには、フリーソフトInkscapeを使います。Inkscapeを起動し、ファイル-インポートと指定して画像ファイルを読み込む-上の図のように長方形の窓枠に移動-無駄なクリックで選択がはずれたら選択ツールで再び選択する-パス-ビットマップのトレース-画面の右下ライブレビューに✔を入れる-プレビュー欄に画像が表示されるように明るさの境界のしきい値を変更する-OK-ファイル-名前を付けて保存-終了
保存したSVGファイルをテキストエディタで開き、<image xlink:href=”data:image/png;base64, ～ /> の直後にPathデータが生成されていることを確認します。生成されない場合はPNG画像が選択されているかを調べます。
次のステップで一筆書きのようなHTMLプログラミングコードを作成しますが、imageデータは不要です。削除しておくとSVGファイルサイズが激減します。
手書き風アニメーションにするにはLazyLinePainterを用います。LAZY LINE COMPOSERは指定したSVGファイルを手書き風アニメーションのHTMLコードに変換してくれます。上のリンクアドレスをクリックして「Click or Drop your SVG file here」に先に求めたSVGファイルをドロップします。
Animation optionsでdurationを5000（5秒）に設定してDownload Zipをクリックすると15秒ほどでlazy-line-painter.zipがダウンロードされます。Zipファイルを解凍するとindex.htmlとlazy-line-painter-1.9.6.min.jsが現れます。
この形式はすべてに共通です。サイトに公開するにはJSライブラリーをアップロードしindex.htmlの<!– Include lazylinepainter –>の次の行にライブラリーアップロードアドレスを設定します。
index.htmlというファイル名も常に同一なのでrenameして管理します。
サンプルは記事のロード完了で動き出しています。再度、手書き風アニメーションするには再ロードボタンをクリックします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Like_A_Sign</title>
<meta name="description" content="A modern JS library for SVG path animation">
<style> <!-- css -->
body, html {
position: absolute;
width:100%; height:100%;
top:0; left:0; margin:0; display:flex;
align-items:center;
justify-content:center;
}
#Ai550X600A {
width: 70vw;
height: 70vh;
position: relative;
overflow: visible;
}
</style>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2019/03/lazy-line-painter-1.9.6.min.js"></script> <!-- Include lazylinepainter -->
<script type="text/javascript">
(function(){
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
let el = document.querySelector('#Ai550X600A');
let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":1.5,"strokeOpacity":1,"strokeColor":"blueviolet","strokeCap":"square"});
myAnimation.paint();
setTimeout(function(){ //アニメーション終了時
document.getElementById("path847").style.fillOpacity = "1";
document.getElementById("credit").style.opacity = "1";
},10000); //ディレー
}
}
})();
</script>
</head>
<body>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" id="Ai550X600A" inkscape:version="0.92.4 (5da689c313, 2019-01-14)" sodipodi:docname="Ai550X600A.svg" data-llp-composed="true" class="lazy-line-painter">
<defs id="defs828"/>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-510" inkscape:cy="560" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"/>
<metadata id="metadata831">
<rdf:rdf>
<cc:work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:work>
</rdf:rdf>
</metadata>
<g inkscape:label="レイヤー 1" inkscape:groupmode="layer" id="layer1" transform="translate(-100, -97)">
<path style="fill:tomato" d="m 151.58382,215.5911 c -0.64016,-0.17199 -2.34213,-0.9327 -3.78216,-1.69047 -5.34373,-2.81194 -8.31907,-4.84474 -21.92653,-14.9806 -3.83677,-2.85791 -6.98878,-5.17625 -7.00447,-5.15187 -0.30157,0.46866 -9.33539,10.47468 -11.09951,12.29403 -2.72916,2.8146 -4.31624,4.03962 -6.60142,5.09544 -2.566503,1.18579 -4.454883,1.45926 -9.153828,1.32562 -4.063671,-0.11557 -5.955814,-0.41689 -7.054413,-1.1234 -0.809528,-0.52061 -0.553468,-0.81805 1.058333,-1.22937 2.940596,-0.75041 5.783565,-2.04926 8.420191,-3.84687 3.55931,-2.42668 13.600197,-11.40358 17.110007,-15.29694 l 1.48591,-1.64828 -3.10993,-2.29317 c -1.71046,-1.26124 -3.21292,-2.30244 -3.3388,-2.31378 -0.12588,-0.0113 -2.26901,1.89627 -4.7625,4.23912 -12.653652,11.88917 -22.006774,19.35387 -26.143147,20.86477 -1.731694,0.63254 -5.275929,0.76005 -8.038205,0.28921 -3.582184,-0.61061 -8.291692,-2.38336 -10.489841,-3.94858 l -0.660413,-0.47025 2.513156,-0.69167 c 4.348066,-1.19667 8.462685,-2.77397 14.54588,-5.57602 4.471751,-2.05979 12.420829,-7.33627 20.335613,-13.49849 2.266924,-1.76496 6.684157,-5.51799 6.684157,-5.67909 0,-0.16399 -5.18122,-3.551 -5.876437,-3.84148 -0.433669,-0.1812 -1.635682,-0.38991 -2.671136,-0.46379 l -1.882646,-0.13434 1.436575,-1.68918 1.436578,-1.68919 -1.93174,-0.25875 c -2.936064,-0.39329 -3.849133,-1.00913 -3.84154,-2.59102 0.0078,-1.62098 0.617154,-2.55006 3.884026,-5.92183 3.191713,-3.29419 3.51577,-3.80445 3.518477,-5.54021 8.47e-4,-0.54085 -0.154673,-0.90331 -0.544912,-1.27 -0.470408,-0.44203 -0.785766,-0.52194 -2.275417,-0.57656 -1.343372,-0.0493 -1.893303,0.0216 -2.464066,0.3175 -0.40411,0.2095 -1.676938,1.47629 -2.828508,2.81508 -4.585765,5.33131 -8.572504,9.66309 -9.448129,10.26583 -1.195396,0.82285 -2.47379,0.80292 -4.319875,-0.0674 -2.541459,-1.19808 -3.002312,-2.26634 -1.802175,-4.17746 0.955128,-1.52096 5.116312,-5.54837 8.668426,-8.38976 4.49752,-3.59763 6.664921,-6.05483 9.432922,-10.6942 1.249892,-2.0949 1.357181,-2.37005 1.302901,-3.34123 -0.05781,-1.0344 -0.08707,-1.0769 -1.29374,-1.87955 -1.23411,-0.8209 -1.279349,-0.91651 -0.885694,-1.87168 0.140159,-0.34009 -0.131803,-0.35651 -4.050567,-0.24459 l -4.200817,0.11998 -0.423333,0.5479 c -0.232834,0.30135 -0.996707,1.26866 -1.697495,2.14959 l -1.274161,1.60168 -3.276672,0.35096 c -1.80217,0.19302 -3.679563,0.35971 -4.171985,0.37041 l -0.895314,0.0195 0.970795,-1.5007 c 2.313072,-3.57565 3.268217,-6.59233 3.279257,-10.35706 0.0039,-1.34122 -0.05809,-2.69853 -0.137833,-3.01625 -0.09276,-0.36958 -0.06024,-0.57767 0.09027,-0.57767 0.35653,0 7.636614,-0.82554 8.528042,-0.96705 0.709179,-0.11259 0.810104,-0.0654 1.112935,0.5202 0.183168,0.35421 0.445378,1.36664 0.582687,2.24985 l 0.249654,1.60583 3.611577,-0.12714 c 5.267261,-0.18542 4.902488,-0.0669 5.065858,-1.64542 0.223491,-2.15934 0.419318,-9.98923 0.265191,-10.60331 -0.175247,-0.69824 -1.403094,-2.08664 -2.378426,-2.68943 l -0.723879,-0.44738 -3.910393,0.54859 c -2.150717,0.30173 -4.03033,0.54542 -4.176918,0.54154 -0.146587,-0.004 0.685978,-0.32477 1.850145,-0.71308 6.965968,-2.32352 19.489332,-7.49216 26.516352,-10.94383 3.80319,-1.86813 4.44715,-2.26067 5.66096,-3.45082 2.07836,-2.03784 3.24459,-5.045964 3.26947,-8.433133 l 0.007,-1.005417 h 2.13903 c 4.30227,0 8.07113,1.735291 8.98904,4.138816 0.64228,1.681778 -0.0175,4.140424 -1.74137,6.488744 -0.88249,1.2022 -3.57925,3.62506 -6.15754,5.53215 l -1.74501,1.29073 2.40175,0.77822 c 1.32096,0.42803 2.69011,0.92734 3.04255,1.1096 1.07443,0.55561 1.9617,1.41623 1.95897,1.90014 -0.007,1.20362 -2.5586,5.98856 -5.86385,10.99544 -1.60044,2.42438 -3.10223,5.21439 -2.91237,5.41056 0.0392,0.0404 3.75651,-0.0478 8.26077,-0.19616 l 8.18957,-0.26973 0.62587,-0.86217 c 0.90348,-1.24459 2.40132,-4.05001 3.72173,-6.97068 1.08602,-2.40222 1.14304,-2.61356 1.06023,-3.93012 -0.0532,-0.84535 -0.30802,-1.92727 -0.6494,-2.75694 -0.30904,-0.75107 -0.53431,-1.39315 -0.50061,-1.42685 0.0337,-0.0337 1.86394,-0.0859 4.0672,-0.11609 3.79488,-0.0519 4.0617,-0.0292 5.06427,0.43226 1.23733,0.56948 2.34822,1.5758 2.52733,2.28944 0.2525,1.00606 -1.69116,3.95271 -5.35893,8.12431 -1.76355,2.00581 -3.62468,4.49122 -3.62395,4.83953 1.6e-4,0.074 4.69122,0.13526 10.42459,0.13602 5.73336,8.5e-4 10.78868,0.0779 11.23403,0.17134 1.09462,0.22975 1.61526,1.33418 1.61484,3.42561 -2.1e-4,1.2144 -0.1044,1.67157 -0.57744,2.53451 -0.56668,1.03377 -0.90489,1.34886 -5.96847,5.5606 -1.86029,1.54734 -3.81617,3.89442 -3.81617,4.57947 0,0.18829 0.47456,0.26848 1.64042,0.27719 2.85322,0.0213 6.74442,1.61174 7.80503,3.19011 1.63051,2.42648 0.0506,6.94242 -3.14193,8.98085 -0.60349,0.38533 -2.65955,1.72454 -4.56902,2.97602 -1.90948,1.25148 -3.56173,2.27541 -3.67169,2.27541 -0.10995,0 0.42449,0.73819 1.18765,1.64042 1.83646,2.17113 2.3657,3.23889 2.01956,4.07454 -0.26667,0.64381 -1.62008,1.63071 -3.06322,2.23369 -0.73639,0.30768 -1.91758,0.34565 -9.95626,0.31998 l -9.12075,-0.0291 0.0887,1.39278 c 0.14152,2.22259 -1.0175,4.57813 -3.69656,7.51272 -0.69082,0.75671 -2.22986,2.49011 -3.42009,3.852 l -2.16406,2.47617 5.7707,3.86366 c 3.17389,2.12502 6.86608,4.51538 8.20487,5.31191 5.89145,3.50522 21.31015,10.77046 29.58073,13.93835 0.72778,0.27876 1.29277,0.60252 1.25554,0.71946 -0.2313,0.72643 -4.24405,2.49507 -7.69557,3.39185 -4.4042,1.14431 -7.60157,1.41149 -9.80545,0.81937 z M 119.9624,181.80042 c 1.89335,-1.94469 3.14006,-3.44866 4.50548,-5.43519 1.27671,-1.85746 1.36553,-2.51463 0.46197,-3.41818 l -0.61872,-0.61872 -3.66753,0.002 -3.66753,0.002 -2.54,3.09106 c -1.397,1.70008 -2.54,3.18902 -2.54,3.30876 0,0.23676 6.00036,4.57116 6.3553,4.59079 0.11933,0.007 0.88929,-0.67856 1.71103,-1.52258 z m -12.4055,-8.30792 1.14971,-1.16417 h -2.47985 c -1.8493,0 -2.47674,0.0673 -2.46762,0.26459 0.0134,0.29015 2.07717,2.03366 2.42916,2.05221 0.1204,0.006 0.73627,-0.51234 1.3686,-1.15263 z m 1.65446,-7.65475 5.57029,-0.13972 0.95083,-1.23569 0.95083,-1.23567 -1.01778,-0.001 c -1.74524,-0.003 -4.87074,-0.56529 -5.89575,-1.06149 -1.74278,-0.84368 -3.69454,-3.90054 -3.69454,-5.78642 0,-3.70547 4.73804,-6.60771 9.56479,-5.85881 0.8368,0.12983 2.81324,0.66013 4.39208,1.17844 2.68676,0.88201 2.8887,0.91878 3.15275,0.57399 1.28126,-1.67301 4.90371,-10.54204 4.90371,-12.00599 0,-0.29654 -0.3614,-0.81245 -0.94777,-1.35294 -0.88233,-0.81331 -1.03213,-0.87364 -2.16958,-0.87376 -1.2536,-1.3e-4 -26.074771,0.59467 -28.738482,0.68868 l -1.481666,0.0523 0.986864,0.48615 c 1.476493,0.72735 2.880713,2.05534 3.16039,2.98881 0.205958,0.68743 0.176782,0.94319 -0.206434,1.80952 -0.528999,1.19588 -1.803334,3.01555 -4.199663,5.99685 -0.963596,1.19882 -1.751991,2.25792 -1.751991,2.35355 0,0.24544 1.331229,0.43583 3.069167,0.43895 1.760914,0.003 2.738778,0.41933 3.435365,1.46205 0.85088,1.27369 0.682525,2.18741 -1.001199,5.43387 -1.698332,3.27463 -1.843322,4.0738 -0.93495,5.15334 0.300696,0.35735 0.848383,0.73707 1.217083,0.84381 0.84535,0.24474 3.630626,0.26864 10.685656,0.0917 z m 32.41154,-0.30406 c 0.42769,-0.12814 1.00005,-0.40076 1.27191,-0.60583 1.14327,-0.86236 0.0396,-1.84871 -4.85167,-4.33587 l -2.69552,-1.37065 -2.94161,1.07273 c -1.61788,0.59 -3.99852,1.37213 -5.29029,1.73808 l -2.34869,0.66535 -0.93215,1.25151 c -0.51268,0.68833 -1.00831,1.3789 -1.10141,1.53459 -0.14026,0.23455 1.39719,0.28307 8.97127,0.28307 6.03905,0 9.4044,-0.0791 9.91816,-0.23298 z m 11.9214,-3.86639 c 2.05763,-2.7276 2.40081,-3.52845 2.05782,-4.8022 -0.55663,-2.06715 -2.53801,-2.9704 -5.51706,-2.51506 -2.07529,0.31721 -11.20739,3.2365 -11.19868,3.57992 0.001,0.061 1.97799,0.91422 4.39209,1.89609 4.45922,1.81367 6.63247,2.81972 7.77593,3.59969 0.34925,0.23823 0.68263,0.43014 0.74084,0.42648 0.0582,-0.004 0.84528,-0.98687 1.74906,-2.18492 z m -33.60683,-3.95885 c 0.66379,-1.17235 1.1739,-2.16248 1.13358,-2.20028 -0.0403,-0.0378 -0.86111,-0.28021 -1.82397,-0.53867 -1.24841,-0.33511 -2.14413,-0.44487 -3.12216,-0.38259 -1.25674,0.08 -1.44235,0.15651 -2.21809,0.914 -1.04801,1.02335 -1.12728,1.85636 -0.27327,2.8713 0.82853,0.98465 2.02155,1.45763 3.6906,1.46314 l 1.40642,0.005 1.20689,-2.13155 z m 9.20943,1.01004 1.16417,-0.43254 -0.6961,-0.28526 c -1.26514,-0.51843 -1.50955,-0.45548 -2.10555,0.54234 l -0.55282,0.92554 0.51307,-0.15877 c 0.28219,-0.0873 1.03694,-0.35342 1.67723,-0.59131 z m 8.55036,-3.82826 c 1.75843,-0.97612 5.26433,-2.96273 7.7909,-4.41469 2.52656,-1.45196 5.02081,-2.7595 5.54276,-2.90563 0.82038,-0.22969 0.99732,-0.38442 1.3055,-1.14156 0.79232,-1.94664 1.55067,-4.41416 1.68144,-5.47111 0.19624,-1.58614 -0.10212,-2.20985 -1.32218,-2.76398 -0.91865,-0.41723 -1.43921,-0.46432 -5.97791,-0.54071 -2.7344,-0.046 -6.32186,-0.0162 -7.97212,0.0663 l -3.00049,0.15 0.9342,0.89512 c 0.51382,0.49232 0.93421,1.05331 0.93421,1.24664 0,0.75795 -0.86906,2.55922 -2.68766,5.57064 -2.31142,3.82747 -5.43962,9.38417 -5.32986,9.46755 0.26288,0.19968 4.17125,1.5901 4.50288,1.60191 0.22065,0.008 1.8399,-0.78436 3.59833,-1.76048 z m -31.09286,-23.69738 6.35,-0.24535 0.46799,-1.39972 c 0.87909,-2.62928 1.74979,-8.74742 1.75278,-12.31621 0.002,-2.29965 -0.16821,-2.80532 -1.31435,-3.90643 l -0.7172,-0.68903 -7.21817,1.21162 -7.218182,1.21163 0.519101,0.61692 c 0.986721,1.17264 1.411171,2.28438 1.511211,3.95812 0.0834,1.39529 0.0285,1.73174 -0.43184,2.64583 -0.738278,1.46607 -2.466545,5.82899 -3.035065,7.66185 l -0.475996,1.53459 1.729863,-0.0192 c 0.951425,-0.0106 4.587358,-0.12964 8.079858,-0.26459 z" id="path847" inkscape:connector-curvature="0" data-llp-id="Ai550X600A-0" data-llp-duration="15000" data-llp-delay="0" fill-opacity="0.2"/>
<text id="credit" style="opacity:0" x="70" y="222" font-size="6" font-family="bold" fill="black">©2020 TacM, Ver0.01</text>
</g>
</svg>
</body>
</html>
前回は「い」の文字のパスデータを作りました。次には左馬をアウトライン化して描画する予定でしたが、それを飛び越えて「直江兼続」が装着した兜をイメージした「愛」の文字を手書き風にアニメーションにしました。
プログラミングコードを公開しますので五月端午の節句に向けて関係者の固有名を入れてプレゼントしてはいかがでしょう。
サンプルコードはLASY LINE COMPOSERが出力したコードを少し変更しています。時代遅れなインターネットエクスプローラーのサポートコードや冗長と思われる部分を削除しています。
アニメーションが終了した時に縁取り文字を目立たせ完了を告知し、クレジットを入れる処理を追加しています。32～35行部分を注視してください。
LAZY LINE COMPOSERはフリーソフトながら画像をアウトライン化してくれる優れたツールです。HTMLプログラミングを習得して会社の創業記念や大切な人への誕生祝いの作品制作に挑戦してください。
インターネットによる情報発信が一般化してかなり時間が経過し、多彩な表現が目につくようになりました。文字を表すこともできますが主に画像を表現するSvg（Scalable Vector Graphics）方式があります。Svgは縮小・拡大しても表示精度が変わることがありません。それに部分的に時間差表示が得意で見る人の注目を引きやすいです。
縁取り文字を描くにあたりPathデータに変換するツールがありますが、存在しないフォント、たとえば「左馬」のPathデータを自作するにはどのようにするのか疑問です。それにはまず、一般的な場合はどのようになるかを調べてみました。
「い」というひらがなをPathデータに変換します。Inkscapeでテキストツール-「い」を入力-必要ならば・Alt+’>’で拡大する-パス-オブジェクトをパスへ-ファイル-名前を付けて保存-○○.svg-保存と指定して○○.svgファイルを作成します。
出力されたSvgファイルの主要部を以下に示します。
見やすいようにテキストイメージを再録します。
<g
inkscape:label="レイヤー 1"
inkscape:groupmode="layer"
id="layer1">
<g
aria-label="い"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:95.27708435px;line-height:379.23632812px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0.02552047px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.27603126"
id="text892">
<path
d="m 100.82488,146.80033 q -3.34958,8.56005 -7.071342,13.02616 -5.210465,6.327 -10.420931,6.327 -9.304402,0 -13.770516,-10.79311 -2.605233,-6.32699 -2.605233,-27.16886 0,-14.88704 1.488705,-30.146262 l 7.815698,1.86088 q 4.466114,1.116532 0.372176,3.721762 -1.488704,13.77052 -1.488704,24.9358 0,15.25922 1.86088,21.58621 1.860881,6.327 5.582642,6.327 4.093937,0 7.071346,-5.95482 1.860881,-3.72176 3.721761,-8.93223 z m 21.9584,-43.54461 q 16.74792,17.49228 20.46968,42.42808 l -10.04875,2.60523 q -4.46612,-26.05232 -18.23663,-40.56719 z"
style="stroke-width:1.27603126"
id="path894" />
</g>
</g>
Pathデータを見ると定義されたポイントをつないでひらがなの「い」を表示しています。データから各点の位置を定めて図にしてPathデータの詳細を解析したいと考えています。
そのあとに「左馬」のPathデータを手作りする予定です。わかんむりの冨や辻は点が２つですが点ひとつの辻「ツジ」の縁取り文字も作ってみたいです。本日はここまで。
世の中、「窮すれば通ず」とのことばがありますが、にっちもさっちもいかなくなると、かえって活路が開けることがあります。そのとき、回りに軍師がいるといないのでは結果が大きく異なります。
傾きかけた組織や行政の長を選ぶとき、知的あるいは美人女性を選びワンポイントで急場をしのぐことがあります。教育長、知事、横綱審議委員、外部取締役、大学長、○○協会長、△△コミッショナーなどに女性が選ばれマスコミも賛辞のことばを贈ります。これはスーパーのめだま商法に似通っています。長く続いた江戸時代で、商売を繁盛させるには経営者の理念や努力が一番でしょうが、優れた番頭の存在がものをいったといわれています。
黒澤明の「七人の侍」では野盗の狼藉から民衆を守った侍衆の勝利かと観衆は思いましたが、侍衆を雇った知恵者の農民の勝利が結末だったようです。
大所高所から物事を判断する経営者とそれを補佐する知恵者が天の配剤よろしく組み合わさる確率は非常に低いとされています。
前にもブログで取り上げましたが、清廉な人物の存在をことさらにアピールするには「臭いものにフタ」の魂胆が見え隠れするものです。賢い芸能人は「その手は桑名の焼き蛤」で危うきに近寄らないようです。
既にかぞえ歌について、ダブル連番かぞえうたにて取り上げています。以前の作品は10個のかぞえ歌のイラストを左から右に横スクロールするものでした。今回は10個の静止画像が4往復する間、40種近くの多彩なビデオ切り替え効果を挿入しています。1～10の輪環の順を保持した大作と言えましょう。
この作品はプログラミングというよりもムービーメーカーによる動画の作成に帰着します。予算があれば質の良いMovie Makerが欲しいところですが、Windows XPに付属していたWindows Movie Maker 2.6をだましだまし利用しました。
かつてパソコンの発展期にDOS時代がありました。この時期、外部記憶装置はフロッピーディスクでした。
カラーテレビが普及してかなりの年月が経ったのになぜかモニタ画面には白黒の文字しか映っていませんでした。OSを持たないBasicがはやりだしてカラー化に門扉を開きました。
上例は持っている機能を有効に使わず宝の持ち腐れを象徴しています。喜怒哀楽を表すには文字が一般的です。文字ならば紙と鉛筆がないとき、釘や棒を使って地面に字を書いて相手に意思や感情を伝えることができます。
一方、音は他人にも聞こえるため迷惑になることもあり、利用が制限されることがあります。ブラウザはautoplayが無効になる条件があるほどです。しかし、五感の一つである聴覚をないがしろにしていることになります。そこで視覚と聴覚の協同利用例を以下に示します。
音が出るhtml記事は読み込み完了時に自動スタートは無効です。次の絵本をクリックしてください。音が出るので音量は控え目に！「少年老易学難成」の漢詩から引用しています。
いろいろな事件が発生します。かんぽ生命保険と日本郵便による保険の不正販売が明るみになり、行政処分を受けました。現場の人間に課するノルマがきつ過ぎて順法精神が欠落するほどのことだったのだろうか。
老若男女、親会社から下請け孫請けまで、上層部から一般社員までといった謳い文句で耳障りのよい言葉が躍っています。そのような共存共栄は果たして可能でしょうか。
分け合うパイの大きさはいつも変わらないのだから誰かに大きく分け与えれば誰かが割を食うのが当たり前です。親会社だけがあるいは会社役員だけが一人勝ちできる時代は終わっています。
物を小さくして安易に儲けることが流行っています。この策は１～２度は通用してもそう何度もは通用しません。子供にねだられ「今度ね」、「次にね」と先延ばしはたびたびできません。
「社運を賭ける」などの言葉はたびたび使えません。モノを小さくしてしのぐのもそれと同一で禁じ手に近いのです。
その策「物を小さくして実質値上げして儲ける」方法は有史以来からあったことでしょうが、華々しく展開されたのは2002サッカーワールドカップ日韓共催のときでした。世界中から日本のあちこちにスポーツ選手やマスコミ関係者が訪れて盛り上がりました。
そして、宴の後に体験したのは薄くなったティッシューペーパーの箱でした。国をあげて騒いだどさくさ紛れに実質値上げされたのです。
弱いもの、深く考えない人から搾り取る策は後で反発を食らうでしょう。そこで大きく儲けて逃げ去る者もいますが、ほとぼり冷めるまでは次の手が打てません。
一時、広大な屋敷に住んでも末は狭い独房暮らしになり兼ねません。長い逃避行に耐え切れずずさんな行為に向かい勝ちです。
「チェンジ」の理念を掲げながらも目標を実現できなかった指導者も多いです。ただ、安易で子供だまし的な策は止めてもらいたいです。
「外箱を省いたティッシューペーパー」が安く出回っています。詰め替え用ティッシューペーパーも売られています。安くて良いものに通ずるこれらの方法は痛みをすべての階層が分け合うことにつながります。
何も考えずにすべての層が一律に共栄することはないと思われます。
教訓：多くの人を長きにわたってだまし続けることは難しい。
かつて著名な劇作家が四字熟語を取り上げてブームになったときがありました。
その後、横綱に推挙されたときの口上に使われて話題騒然の時期を経て今は静かな趣になっています。
以下はクイズの問題です。適切解は複数ありますが原本にすべて合致したときが正解とします。試行とやり直しはできません。出題者の裏をかくことが必要です。正解者はメンタルに強い方といえるでしょう。
8個の四字熟語を完成させてから「順にフリップをめくる」ボタンを8回クリックして最終結果が得られます。
順にフリップをめくる
2019年はラグビーのワールドカップが開催され、一大ラグビーブームが訪れました。ラグビーでは数年前にも忍者ポーズのようなことがマスコミに取り上げられてにわかファンが増えたようですが本物の人気にはつながらりませんでした。
今回は老若男女がテレビにくぎ付けになって応援したので一時の熱がそう簡単に冷めることはないでしょう。ラグビー関係者の恵比須顔が浮かびます。裾野が広がって市民権を勝ち取るまでは並大抵を超える努力がいるのです。
プログラミングは地道です。ゲームなどで利用する側ではかなりの広がりでしょうが、その大元である作ったり考えることまでの広がりはありません。そこでプログラミングの楽しさをプログラミングで表現します。
人間の五感で広告の利用は希少ですが聴覚にも訴えています。
毎度の注記で恐縮ですが、音声は自動スタートが許されていませんので、手ごろなタイミングでアンダーラインが付いたらリンクボタンをクリックしてください。プログラミングの楽しみを礼賛する文言が表示され音声が流れます
法律、習慣、流行など時代とともに変わります。時代にそぐわなくなってもすぐには変えられずそのまま踏襲されているものが数多くあります。同一県でも方言や習慣が微妙に違う地方があります。それは江戸末期までは異なる統治下にあって明治維新で同じ県に統合されたからです。
ニュースを見るためにブラウザを起動するとテレビ局が発行する動画が大音量で流れびっくりしたことがありました。
このようなことがないように操作が加わらないと音が出ないようにブラウザの仕様が変更されました。
それに合わせて一度発表した「奥の細道・序文」の朗読を、音声再生ボタンをクリックしてすべてがスタートするように改訂しました。朗読に加えて臨場感を高めるBGMを付けました。BGMは《気淑く風和らぎ》という万葉集の一節で令和改元の基になったタイトルがついている曲を採用しました。ソースコードは落ち着いた時期に公開されるでしょう。