凡才(ぼんさい)プログラマー

久しぶりに、このブログに向かってしまった。日曜午前中、とてもいい天気。窓辺からは春らしい日差しが差し込んでいる。桜はもう散ってしまったが、我が家のプランターには、種(たね)をまいた覚えがないのに、なぜだか朝顔の双葉(ふたば)がたくさん出て来ている。もう何年も同じところに朝顔を栽培しているので、昨年の種が落ちて自然と芽が出たらしい。土が痩せているので、はたしてこの芽が大きく育つのかどうか怪しい気がするが、期待もしている。どうかすくすく育ってくれるように。

そう言えば、玄関の横に置いてある梨の木にも緑がいっぱいつきだした。枝の剪定(せんてい)の仕方がわからなくて何にもしてなかったのだが、冬に多少余計だと思うようなところを切ってみた。するとなんだかこの春になって活き活きと葉が伸びて来たような気がする。はじめて買って来た年には病気にもなって、いろいろ薬も与えたのだが、今年は元気に小さくてもいいから実(み)をつけてくれないかな。楽しみにしている。

さて、前回ブログを書いたのは2月の終わりで、今日がもう4月のアタマ。ひと月ほどの間隔が空いてしまった。ブログというものは定期的に書いて行かないと誰も見てくれないらしいのだが、ブロガーになりたいわけでもないので、そんなにこだわりがあるわけでもなく、ほったらかしにしてしまった。更に私にとって一番大切な音楽制作の時間も差し置いて実はほかのことに夢中になってとりかかっていたのだ。

それは私のホームページ、https://yukio.asia/ をもう少し機能させようと思い、ああでもない、こうでもないと手探りで作り変え作業をおこなっていたのだった。その詳細を久しぶりにこのブログで語ってみることにする。

このブログも上記yukio.asiaの一部分で、https://yukio.asia/blog/となっている。ただこのブログはワードプレスという無料のソフトウェアを使って、フォーマットに沿って書いていくだけなのだが、ほかのページは自分自身で作成しているものなのだ。

なぜこうなったかと言うと、まだそんなにスマホが世の中に出回ってない時にホームページを知り合いに頼んで作ってもらったのだが、その内次第にパソコンよりもスマホが普及して行って、パソコンとは別のスマホ用のサイトの方が主流になっていったので、それに対応するために、自分自身で作り直さざるを得なくなってしまったのだ。

当時、スマホでyukio.asiaを見ると、パソコンでみる画面と同じものが映るだけであったのだが、気づくと周りは結構みなさんスマホ対応に切り替えられていて、これに乗り遅れては命取りになると思い、ただ自分の音楽で、業者にお金を払ってまでサイトをスマホ対応にするほど儲かっているわけでも何でもないので、自分でやるしかないと思ったのだった。プログラミングの知識は、サイト上のライブの日時を自分で変更することくらいしかできなくて何にもなく、最初、どこか一つ、肝心なところを変更すれば、一発でスマホ向けのサイトに変わると思い、本屋でそうしたプログラミングの本を立ち読みしていたのだが、段々わかってきたのは、どうやらそんな魔法の方程式のようなものはなく、業者が宣伝文句として簡単にスマホ用に作り変えられると言っているだけだということに気づいてしまった。

それで初めて、※HTML(ウェブサイトをつくるために使用するコンピューター言語。詳しくはウイキペディア)と※CSS(HTMLで作られたページの要素に装飾を与えることができる仕様のひとつ。詳しくはウィキペディア)の入門用のプログラミングの本を買ってきて、その本の中に出ているサンプル例に合わせる形で、自分のホームページyukio.asiaをスマホ用に一から作り直したのだ。確か2年前のお正月3日間くらいかけてやったと思う。その時にこのブログも作ったのだった。

※正確には”HTML”も”CSS”もプログラミング言語では無いらしい。

三日間集中してやったので、パソコンの前で足が寒いのでストーブをつけていたのだが、夢中になってしまい、足の裏を火傷(やけど)してしまい、医者に行くと珍しいところを火傷してるねと笑われてしまった。(笑)

今から考えれば、ブログだけでなくホームページ全体をワードプレスで作り変えればよかったかなと思ったりもするのだが、画像の素材とかも残っていて、フォトショップ(プロ用画像編集ソフト)とか持っているわけでもないので、こうした素材を使ってスマホそしてパソコンにも対応する形だけのサイトを一から自分で作り直したのだった。

タテに長いスマホ画面と横に広いパソコン画面、両方に対応するデザインを※レスポンシブルデザインと言って、これがやっかいなのだ。ワードプレスなどは元々がレスポンシブル対応になっているので、わざわざレイアウトをいじくる必要もないのである。その2年前にやり残していたと思っていたことを、今回ひと月かけてなおしたのであった。

※正確には”レスポンシブ(responsiv)”だと思われます。(笑)

それは、HTMLとCSSだけではできない動的なサイトを作るということであった。動的なサイトとはどういうものなのかというと、要はトップページの上のイメージ画像が映り変わるサイトがどこにでもあると思うが、そうしたものである。私もそれがやりたかったのだ。(笑)ただ、そうした動的サイトを作るには、HTMLとCSSの知識だけではできなくて、※Javaスクリプトというまた別のプログラミングの知識が必要になってきて、時間がなくて2年前は諦めたのだが、いつかは絶対に自分のホームページを動的サイトにしてやる!と思い、2年前の正月以降、ネットの進研ゼミみたいなベネッセの基本プログラミング授業を空いてる時間とかに見ていたりもしたのだが、お酒を飲む方が好きで、そちらに時間をとられ(笑)、なかなかJavaスクリプトの講義のところまで行かず、こんなことやってると、死ぬまで動的ページはつくれない!これでは駄目だ!と思ってしまって(笑)、本屋でJavaスクリプトの入門書を買ってきて、手っ取り早くそれを参照にyukio.asiaを1ヶ月かけて動的ページに作り変えたのだった。(笑)

※Javaスクリプト(Java Script)はプログラミング言語とのこと。プログラミング言語かどうかは、どちらでもいい。私にとっては初めての経験と言うか、難しいのだが、理解しなければいけないもののような気がする・・・。

まず最初に取りかかったのは、前は”音楽”というアイコンをクリックすると、ギター弾き語りページに飛んで行っていたのだが、これはおかしいとずっと思っていて、クリックすると”ギター弾き語り”、”ピアノ弾き語り”、”バンド形態”、”バンド形態”、”バンド形態”と5つのアイコンが下に出て来るようにして、そこから各(かく)私の作品ページに飛んでいく形にした。そして、再度”音楽”アイコンをクリックすると5つのアイコンが閉じるという形式になっている。どんなもんでぃ!えへん。

次にページ上の”YUKIO”の隣にハンバーガーメニューというものを追加してみた。ハンバーガーメニューとはどういうものなのかと言うと、それをクリックすると横からメニュー一覧(いちらん)が現れ、そのサイトの各ページに飛んで行けるというものだ。パソコン画面では無くて、スマホ画面に付いているみたいで、全然今まで気にしたことはなかったのだが、よくよく見ると、みなさんみんな付けてるみたいで、負けじと自分も付けてやった。(笑)ただハンバーガーメニューからはyukio.asiaの音楽サンプルページへ飛ばすことはせずに、直接tunecoreの私の音楽配信ページに飛べるようにした。

tunecoreのページも今は、歌詞も読めるようになっていて、サンプル音源も各曲聴けるようになっているので、ぜひこちらのページも見てください!

そしてハンバーガーメニューの横から出て来るページをつくったことで、日本語、英語、フランス語、スペイン語の各ページをそれぞれはっきりと色分けすることにした。日本語ページは青、英語はオレンジ、フランス語は紫、スペイン語は緑と、イメージを4つに区分し、もう面倒くさかったのだが、がんばってパソコンのアドレス上の横に出て来るファビコンもそれ専用に色分けしたものを作った。

“MOVIE”をクリックするとユーチューブの昔の私の音楽トップページの画面を貼り付けただけのページだったのだが、4つばかり動画に直接飛んで行ける形にした。パソコンだと上2つ、下2つ。スマホだと上から下に4つ並べてみた。レスポンシブルでどうすればできるのだろう?と1日がかりで悩んだりもした。(笑)

最後にメイン、”YUKIO”下の画像をとうとう映り変わらせることに成功した。これまでの動的動作のチャレンジはすべて自分なりに考えて成功してきたのだが、本屋で買って来たJavaスクリプトの入門書には、私がやりたかったスライドメニューとは微妙に違うものが載っていて、ウエブ上で調べてやるしかなくなった。なんとか画像が映り変わるようにはなったのだが、画像が左に寄ってしまい、次、なんとか真ん中にすることができたのだが、最後、スマホ画面にすると、スライド画像だけが横に縮んでいかない・・・。一日がかりで考えたのだが、どうにも解決策が見つからない・・・。このパターンのスライドショーではなくて、違うモノにするしかないかな・・・と思いつつも最後の最後、これで駄目なら諦めようと、※プログラミングの相談サイトに右も左もわからず悩みを上げてみたところ、プロのエンジニアさんなのだと思うがあっという間に解決してくれた。

※プログラミング相談サイトteratailの私が相談したページ。プログラミングがわからない場合はこのteratailを使うといい!とても便利。

自分が悩んだあの時間を返してくれ~!

とも思うのだが、人生とはこんなもの。(笑)世の中にはいろいろな人がいる。この人に出会えてよかった。何回か前のこのブログでも書いたがパソコン修理でわからなくなり、ああでもないこうでもないと悩んだりもしたのだが、今回のプログラミング経験も同じようにたくさんのアタマの冒険をしてきた。結構、ハラハラ、ドキドキ。まだなおしたいところはいっぱいあるのだが、とりあえずしばらくはyukio.asiaはこの形態でいこうと思う。肝心の自分の音楽がおろそかになってはいけない。(笑)ぜっかくなおしたのでホームページ https://yukio.asia 見てね! 上の画像、変わって行くので。ただ12秒間隔にしているので、せっかちな人は待っていられないかもしれない。(笑)画像は足りなかったので10年以上前によく散歩した善福寺公園の風景を入れたりした。

しかし、今年の春から小学校ではプログラミングの授業が始まると言う。どんな授業なのだろう?一緒に受けたい気がするのは私だけだろうか・・・?。小学生レベルの凡才(ぼんさい)プログラマー。

音楽配信中!!聴いてね。