Web管理関連記事 - 連続表示

新規書き込み

※該当の記事タイトル一覧はリンク一覧から参照できます。

KUNISAN.JPサイトのメンテナンス(2019)

名前: 小川 邦久 リンク: https://kunisan.jp 日付: 2018年10月7日
KUNISAN.JPサイトのメンテナンス(2019)先月のWebサーバー引っ越し作業とHTTPS化に引き続き、KUNISAN.JPサイトのメンテナンス作業を行いました。表面上は目立った変更はありませんが、具体的にはこんな作業でした。

■リンク集からデッドリンク削除
タスマニアペルーケニアのホームページなど、主に旅行記系サイトにリンク集のページがありますが、10年近く放っておいたこともあって、多数のデッドリンクがありました。特に個人ホームページへのリンクは壊滅状態でした。そういったデッドリンクを削除していったのですが、残っている個人ホームページもジオシティーズのものが多く、来年3月末のジオシティーズ閉鎖以降もまた作業する必要が出てきそうです。

■HTMLの属性値をダブルクオーテーションで括る
古いサイトでHTMLの属性値をダブルクオーテーションで括ったり括らなかったり、統一されていない状態になっていました。特にPerlではメンテ性は考慮せずに、当時「シンプルに書ける」という事だけを考えて以下のような記述をしていました。
print "<img src=xxx$yyy.jpg>\n";
サイトのメンテの上で、複数ファイル用のテキスト一括変換ツールを使うことが多いのですが、ダブルクオーテーションで括った文字列と括らないものとで処理を分ける必要がありました。
今回、テキスト一括変換ツールの正規表現を用いて、HTMLの属性値をダブルクオーテーションで括る形に統一化しました。エラーを回避するため、事前にPerlのダブルクオーテーションをシングルクオーテーションに変更したり、end_markで展開してから作業を行うようにしました。
・置換前例(属性名の前に要半角スペース): src=([^"\\].*?)([ >])
・置換後例(属性名の前に要半角スペース): src="$1"$2
※正規表現置換例の意味 → src=の直後に"(ダブルクオーテーション)もしくは\(バックスラッシュ)を使わないでそのまま繋がっている文字列は、文字列後の空白もしくは山カッコ(閉)の直前までの部分について、ダブルクオーテーションで括ったものに変換しつつ、空白もしくは山カッコ(閉)も文字列の後にそのまま残す。

■KUNISAN.JPブログの年月選択
画面左メニューでブログ記事の年月選択ができますが、これは毎月初めに記事をアップした際に、自動的に直接HTMLファイルを変更するというものでした(PerlやPHPのファイルも自動変更します)。ただ、その直後にHTMLファイルを手動でダウンロードするのを忘れて、そのままローカルファイルを編集してアップしてしまうケースが時折あり、その場合にページの年月選択の表示がおかしくなってしまうこともありました。この年月選択メニュー部分だけを独立したhtmlファイルとして、各ページからこれをiframeで表示するように変更しました。これにより月更新後の手動ダウンロードが不要になりました。

■KUNISAN.JPショップのカート機能復活
KUNISAN.JPショップのページに、商品をアマゾンのカートに入れる機能があるのですが、Webサーバーを切り替えてから動作しなくなってしまいました。WebサーバーのIPアドレス等の情報を渡したりするような処理はしていないため、「何でだろう…」と不思議に思っていました。よくよく調べてみたところ、PHP5からPHP7になったことで、spliti関数をexplode関数に変更した個所があり、その中の大文字・小文字の表記に誤りがありました。以前のspliti関数は大文字・小文字を区別していなかったので、そのまま動作していたようです。分割対象の文字列の大文字・小文字を正しいものに修正したところ、再び正常に動作するようになりました。

■KUNISAN.JPトップページのミニスロット画像変更
2002年から公開しているミニスロットの「K」「U」「N」の文字が、2002年当時の黒色のままでした。これを現在の青紫系の色に変更して、少しだけ統一感を出してみました。

本当はこのほかにもやりたい事が無くは無かったのですが、先月の作業から合計80時間ほど費やしていることと、特に頭にあった「将来のためのトラブル予防措置」は「今後トラブルが起きてから対処すればいい」ということにしました。将来、HTMLやWeb系の言語どのような仕様変更があって、こちらもその時にどう変更するかは、結局その時にならないと分からないということもあります。

いずれにしても、「しばらくはこれで安泰」と言える状態であると嬉しいです。でも、ジオシティーズ閉鎖の影響は少なからずあるでしょうね…。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

詳説 正規表現 第3版
詳説 正規表現 第3版をAmazon.co.jpでチェック

Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化

名前: 小川 邦久 リンク: https://kunisan.jp 日付: 2018年9月24日
Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化数年前にGoogleがHTTPS(暗号化通信)を推進する方向に舵を切って以来、多くのホームページがHTTPS(常時SSL)化していきました。Google、Yahoo、楽天などのIT企業はもちろんのこと、トヨタ、ソニー、ANA…等々、大手企業のホームページのHTTPS化はどんどん進んでいます。一方、切り替えに多大な時間とコストがかかることもあって、中小企業や個人で運営しているホームページは、あまりHTTPS化が進んでいないというのが現状です。

今年に入り、HTTPS化されていないサイトに対して、Chormeのアドレスバーの左側に「保護されていない通信」と出るようになりました。また、同じようなコンテンツの場合にはHTTPよりもHTTPSの方がGoogleの検索順位が上に来るような話も聞きます(今のところコンテンツ自体の差ほどは影響が出ないようですが)。そんなことで、私のKUNISAN.JPサイトもHTTPS化をすることに決めました。

ところがKUNISAN.JPのWebサーバーとして使っているWebArena SuiteXでHTTPS化をするとなると、SSLサーバー申請代行で年間数万円、さらに設定料として毎回8,640円の費用がかかってしまうことがわかりました。しかも手続きを自動化できません。さらに、HTTPとHTTPSでファイルを格納するディレクトリも変わるなど、管理面でも色々と面倒なようです。

そのため、他のレンタルサーバーのサービスを調査していったところ、「さくらインターネット スタンダードプラン」が独自ドメインでも無料HTTPS(無料SSL)のサービスがあることがわかりました。しかも料金が年5,124円(税込)と、SuiteXの年17,641円(税込)から大幅に下がることになります。この料金で容量が100GBある上、独自ドメイン、Perl、PHPもしっかり使えます。

今年の7月に「さくらインターネット スタンダードプラン」の申し込みを行い、試しに手持ちのサイトをいくつかアップして動作の確認を行いました。特にサーバー依存の言語であるPerlとPHPの動作が気になりました。PerlのバージョンはSuiteXの5.8.8から5.14.4に、PHPのバージョンは5.1から7.2に変更になります。

Perlについては基本的な動作はほとんど問題なく、sendmailモジュールのパスを変更しただけで、あとはそのままの状態で動作しました。心配していたPerlMagick (Image::Magick)も変更なしで普通に動作しました。

一方、PHPについてはバージョンが5から7に変わった事で変更点が多く、かなり戸惑いました。以下の修正が必要になります。
・$_GET[ABC]、$_POST[ABC]だとWarningが出る。$_GET['ABC']、$_POST['ABC']とクオーテーションでくくる。
・ereg、eregiは使用不可。mb_ereg、mb_eregiに修正。
・split、splitiは使用不可。explodeに修正。(正規表現を使う場合はpreg_split)
・URLのクエリーのURI表記の扱いが変更。"?SEARCH=%83J%83%81%83%89%8A%D6%98A%8BL%8E%96"ではなく、"?SEARCH=カメラ"のように日本語化する。
・mysql関数は使用不可。mysqliなど別の関数を使用。

このうち最後のmysql関数は自作のアクセス解析プログラムで多用していたのですが、関数名を変えるだけで対応できるような生易しいものではありませんでした。変更に費やさなければいけない膨大な時間を考えた場合に、それに見合った効果が得られるとも思わなかったので、アクセス解析プログラムは廃止して、Googleアナリティックとさくらのサーバーに付属しているアクセス解析を併用することにしました。これに伴い、古いホームページで採用していたトップページ下のアクセスカウンターも廃止となります。

7月の段階でこれだけ決定していたのですが、8月~9月上旬はサンディエゴ旅行やマラソンに向けた週末のトレーニングなどが入ったため、作業開始は「後日、時間のある時にまとめて…」ということになりました。それから1月半が経過し、3連休中日の9月16日(日)からようやく作業開始となりました。

まずはWebサーバーの引っ越し作業です。KUNISAN.JPでは大小合わせて約50個のサイトがあり、全部合わせて2000個程度のテキストファイルで構成されています。もちろん一つ一つファイルを開いて作業していったら時間がいくらあっても足りないので、「TextSS」というテキストファイル一括変換ツールを使います。状況に応じて正規表現を使い、作業の効率化を図ります。

作業内容としては、上記のようなPHPプログラムの修正、HTTPS化に向けてドメイン内のリンク先を絶対アドレス(例: http://kunisan.jp/xxx/)から相対アドレス(例: ../xxx/)や通信名を除いたアドレス(例: //kunisan.jp/xxx/)への変更、Googleアナリティクスのコード埋め込みなどですが、これに加えてここ数年のブラウザー側の仕様変更で崩れてしまったページレイアウトの修正も行います。

休日2日で約20時間かけてホームページ全ファイルの作業が完了しました。あとは.htaccessの設定、メール設定、迷惑メール設定、各ホームページの細かい調整、新しいサイト管理画面の作成などの後、さくらのサーバーコントロールパネルからKUNISAN.JPのドメイン設定、お名前.comの方でKUNISAN.JPのネームサーバー情報の変更を行いました。

DNSサーバーの更新がほぼ一巡した翌日に、無料SSL(Let's Encrypt)の申し込みを行いました。サーバーコントロールパネルから申し込みのボタンをクリックするだけで、1時間ほどで開通します。さくらの方はSuiteXと違い、HTTPとHTTPSでディレクトリが分かれないので管理が楽です。

早速新しいHTTPSの方でホームページを見てみたのですが、アドレス欄に「保護されている」という意味の鍵マークが出ず、情報マーク「i」が出ています。これをクリックすると「このサイトへの接続は完全には保護されていません」と出てきます。調べたところ、ページ内に外部の画像ファイルや埋め込みなど(例: src="xxx")で、アドレスがHTTPのものが含まれているとそのような表示になってしまうようです。特に古いサイトに含まれるネット広告用の古いコードにHTTPのアドレスが指定されており、これを全て修正しないといけないということがわかりました。

仕方なく、また全サイト・全ファイルの確認&修正の作業になります。9月22日(土)からの3連休で、結局この作業にもトータル20時間以上かかりました。

9月16日(日)の作業開始から約50時間で、KUNISAN.JP全ホームページのWebサーバー引っ越しとHTTPS化が完了しました。アドレス欄の左側にしっかりと鍵マークが出てきて、これをクリックすると「この接続は保護されています」と表示されます。これだけ時間をかけて作業を行ったものの、情報を調べた限りではKUNISAN.JPサイトのGoogle検索結果がすぐに上がるということはなさそうです。ただ、Webの世界の大きな波にはかろうじて乗ったかな、というところです。

私の最初のホームページ「タスマニアへの道標」から21年、KUNISAN.JPドメイン取得から16年が経過しますが、今後も継続的にメンテを続けつつ、新たな試みもできたらと思っています。また久しぶりにJavaScriptのゲームでも作ってみようかな、とも思っています。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

暗号技術入門 第3版 秘密の国のアリス
暗号技術入門 第3版 秘密の国のアリスをAmazon.co.jpでチェック

Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2018年7月17日
Googleマップの有料化(ディベロッパー向け) → Google Cloud Platformタイトルに「Googleマップの有料化」と書きましたが、Googleマップを使って検索する人が課金されるという話ではなく、Googleマップのサービスを使ってホームページやアプリを作っている人(ディベロッパー)に対する課金ということになります。今までは個人のディベロッパーであればGoogleマップのサービス利用は無料と考えて差し支えなかったのですが、これからは個人・企業を問わず、原則有料ということになります。

ただ、「原則有料」とは言うものの、毎月200ドル分まではクレジットが与えられるため、この金額までは実質無料で利用できるということになります。200ドル分で利用できるリクエスト回数はサービスによって異なり、例えばStatic Maps(静的な地図)であれば毎月10万回まで、Dynamic Maps(動的な地図)であれば毎月28,000回までとなります。

私のホームページ(KUNISAN.JP)では地図がリアルタイムに動くようなものは無いのですが、本ブログの飲食店紹介や一部の旅行系ホームページ(フィンランド&エストニア家族旅行日記)で、GoogleマップのJavaScript Maps APIを使用しています。これは上記の"Dynamic Maps"のカテゴリーに入ります。今回のルール変更に伴い、APIキーのプログラム記述が必須になったのですが、私の場合には2013年のプログラム修正(JavaScript Maps API v3に対応)で既にAPIキーを入れていたため、こちらの対応の必要はありませんでした。

KUNISAN.JP全体のGoogleマップAPIへのリクエスト数ですが、直近の1か月で1,000回にも達していませんでした。28,000回までは大分余裕があるので、当面は無料と考えても差し支えなさそうです。でも、将来的に少ないリクエスト回数でも有料に変更される可能性もありうるので、今後はJavaScriptのプログラムから、Googleマップのページからコードを取得する形の「埋め込み」に少しずつ変更していこうと思っています。

今回の「Googleマップの有料化」ですが、実は5月3日にGoogleから英文メールで通知があったものの、中身を読まずに既読フォルダーに移動してしまいました。今朝になってGoogleから再通知の英文メールが届き、統合された"Google Cloud Platform"上での支払い方法の登録など、先ほど慌てて所定の手続きを行いました。これを行わないと、地図が非表示になってしまうようです。Googleからのメールは、しっかりと読まないとだめですね。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

ポケット百科 Googleサービス 知りたいことがズバッとわかる本
ポケット百科 Googleサービス 知りたいことがズバッとわかる本をAmazon.co.jpでチェック

KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換)

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2017年10月29日
KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換)昨日、今日と週末二日間で、KUNISAN.JPの全ウェブページの文字コードをUTF-8化しました。大小全部で約50個のサイトがあり、関連のテキストファイルはHTML、PHP、Perl、データファイルを合わせて2000個程度あるので、さすがに手作業での変更は無理です。以下の無料ソフトを使って作業を進めました。

Notepad++ - 基本はテキストエディターですが、複数ファイルのテキスト一括変換も対応しています。正規表現も使えます。
KanjiTranslatior - 複数ファイルの文字コード一括変換ができます。

作業はHTMLのmetaタグ中の文字コード宣言をShift_JIS(SJIS)からUTF-8に変更し、その後にファイルをUTF-8形式に変換するというのが中心になります(逆の順番で行うと、Notepad++が文字コードを誤認識する影響で、文字化けが発生してしまいます)。

作業はそれなりに順調に進みましたが、やはりPerlやPHPの文字列絡みのところで何度かひっかかりました。具体的には以下のような所でした。

・Perlでのメール送信。今まではjcode.plを使って日本語の処理をしていましたが、jcode.plはUTF-8に対応していません。ただ、Perl5.8からデフォルトで各種コードが扱えるようになっているので、"use utf8"の宣言をして、encode関数、decode関数を使ってメール作成、送信の処理をしています。
・PHPの文字列処理。今まではmb_internal_encoding、mb_regex_encodingがいずれもSJIS指定になっていましたが、これをUTF-8に変更しています。MySQLとのデータやり取り(UTF-8⇔SJIS)などで使用していたmb_convert_encodingも全て無効にしました。
・PHPでのメール送信。送信者名が日本語の場合、UTF-8のままメール送信処理を行うと、受信者側のメールクライアントによっては文字化けする不具合が発生しました。mb_encode_mimeheaderを使うことで回避しています。

対策に何時間もかかるような大きなトラブルは無かったものの、やはり一括変換だけでは処理しきれないファイルも多数あったことから、トータルで10時間ほどかかってしまいました。ただ、今週末は関東地方に台風が近づいていて雨が降り続いていたので、こういった作業を自宅で集中的にやるには最適のタイミングではありました。

KUNISAN.JPのウェブページは、1997年から作り始めたこともあって、ほぼ全ページ文字コードがSJISでした。しかし、データベース(MySQL)や外部APIとの絡みや、昨今のWeb関連の流れに沿う形で、今回のUTF-8化への決断となりました。表面的には何も変わっていないように見えますが、今後のメンテや新しい外部サービスとの接続などでは、より効率化が図れるようになったと思います。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)
プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)をAmazon.co.jpでチェック

アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2017年2月5日
アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル生まれて初めて「アサヒカメラ」という雑誌を購入しました。私は写真は多く撮るものの、ホームページやブログやSNSにアップするのがメインで、もちろんその道のプロではありません。一部の写真についてPIXTAに投稿したりしますが、たまに売れたとしても1枚あたり数十円、最大でも数百円程度が入る位です。

アサヒカメラを購入した理由は、「写真を無断使用する泥棒を追い込むための損害賠償&削除要請マニュアル」という記事があったからです。もともとYahoo!ニュースで話題になっていて、それを見てアマゾンで購入しました。

私のホームページで使用している写真を本や雑誌に「掲載したい」という依頼が今までに何回かあって、特に断る理由も無いので「OK」を出しています。お金を取るようなこともないのですが、そういう場合には本や雑誌を無料で送ってくれたりして、その中にある自分の写真を見るだけでも嬉しい気分になります。

逆に、私の写真や文章が無断で掲載されているページも何度か発見しています。某健康食品の販売ページでペルーのリャマの写真が使われていたり(削除要請のメールを出しましたが無視されています)、個人のまとめサイトでブログの記事がまるごと転載されていることもありました(RSSから自動取得していたので、その後RSSはタイトルのみ配信するように変更しました)。

アサヒカメラの記事では「まとめサイト(キュレーションサイト)」に対して厳しい意見が書かれていました。まとめサイトの方がオリジナルのサイトよりも検索順位が上位に出てしまうなどの問題があり、自分のサイトで商売をしている人にとっては死活問題にもなります。私の写真も大手まとめサイトに無断で使用されているケースがありますが、いずれもオリジナルページへのリンクが貼ってあり、検索順位についても問題ないので、個人的には今まで問題にはしてきませんでした。

いずれにしても写真や文章の無断使用は気持ち悪いので、必要な場合に何らかの対策が取れると期待して、アサヒカメラの記事を読みました。無断使用者に対するメールやレターのサンプル文章があって、これは将来大きな問題があった時に参考になりそうです。ただ、損害賠償請求額は「使用料」に相当するようなので、私のようなプロではない人にとっては請求できるにしても少額で、それに対するコストや労力を考えると、本格的に行動に移すのは難しそうです。

一方、写真やブログなどで生計を立てているような人には、非常に参考になる記事だと思います。アサヒカメラの次号(3月号)でも同じ内容の記事を掲載するらしいです。

ところで、アサヒカメラの別の記事や写真も見ましたが、写真のクオリティーや芸術性の高さはさすがですね。私は入門用の一眼レフ(Canon EOS Kiss X7)のボケだけでも感動してしまいましたが、機能を使いこなせず撮影の失敗(ピンぼけや露出不良など)も多いので、結局今はコンデジをメインに使っています。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

アサヒカメラ 2017年 02 月号 [雑誌]
アサヒカメラ 2017年 02 月号 [雑誌]をAmazon.co.jpでチェック

KUNISAN.JPトップページの統合

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2017年1月2日
KUNISAN.JPトップページの統合正月の時間を使って、KUNISAN.JPトップページの統合作業を行いました。

今まで、ドメイントップ"kunisan.jp/"は個人事業の事業内容紹介用としてのKUNISAN.JPページ、"kunisan.jp/kuni/"は個人ブログをメインコンテンツとして、自作サイトへのリンクと管理者プローフィールとリンク集を含めた「個人的な」内容のKUNISAN.JPページ、という風に分けられていました。個人事業の方のページは2009年の個人事業開業の時に制作したものですが、その後活動自体は休止状態だったものの、税法上のメリットもあり個人事業そのものは残していました。そういった事もあり、「まあ、ページの方も残しておいても問題ないだろう」ということで、そのままにしておきました。

ただ、内容的にダブってしまっているものも多く、何かある度に2つのページを更新しなければならないなど、管理が面倒になってきたのと、同じタイトルのページが2つに分かれている状態も普通にややこしいので、個人事業の方のページは完全に廃止し、前からあった方の個人的な内容の方のトップページのみ、ドメイントップに移行しました。今はアドレス"kunisan.jp"のみで本ブログのトップページに行けます。

KUNISAN.JPページですが、もともとBiglobeサーバーの時代に作成したKUNI'S PAGE(1999年作成)が起源になっています。当時は自作サイトへのリンクのみを掲載したページでしたが、その後2002年夏に掲示板(現在のブログ)を追加、同年秋にKUNISAN.JPドメインを取得してWebArenaのレンタルサーバーに移行、2005年に現在の"KUNISAN.JP"という名前のページになりました。

当時はSEO対策などという言葉も一般的ではなく、ドメイントップページの重要性などもよく知らなかったので、ドメイントップは「空」の状態がしばらく続いていました。2009年以降は個人事業ページがドメイントップに入っていましたが、これからはここに私の個人ページがトップに来ることになります。まあ、もともと個人の趣味で始めたホームページ作りなので、ようやく本来の姿になったのかな、という気がしています。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

新人IT担当者のための Webサイト 構築&運営がわかる本
新人IT担当者のための Webサイト 構築&運営がわかる本をAmazon.co.jpでチェック

JavaScriptパチスロ公開

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年9月18日
JavaScriptパチスロ公開JavaScript自作ミニゲーム第3弾は「JavaScriptパチスロ」です。ゲームというよりは、シミュレーターと言うべきかもしれません。

JavaScriptパチスロ
http://kunisan.jp/slot/

私が初めてパチスロに触れたのは、大学1年生の時です。友人に連れられて、大学の近くにあったパチンコ店に行き、ワイルドキャッツという機種にお金をつぎ込みました。初のパチスロでは負けてしまいましたが、その後しばらくパチスロにハマってしまった時期があり、後日中古パチスロ店で、ワイルドキャッツの実機を買うということもあった位です(ワイルドキャッツのホームページはこちら)。

中学、高校とプログラミングをやっていたこともあって、「パチスロのプログラム位ならBASIC(言語)でも作れそう」と当時思ったものです。しかし、仮にパチスロプログラムを作った所で、当時はインターネットもなく、また売り出せる程の本格的なプログラムも作れないので、結局「公開する手段が無い」ということで作ることはありませんでした。

ここ最近、JavaScriptの学習を兼ねてアクションゲームを作ってきましたが、ちょっと前から「パチスロゲームを作ってみよう」と思うようになりました。「多分、作るのはそんなに難しくないだろう」と考えていたのですが、いざ作り始めると色々な所で壁に当たりました。

中でも面倒だったのがリールストップの制御です。単純に左→中→右とストップさせるだけなら、それ程難しくないのですが、左→右→中、中→右→左…、などストップの順番だけでも6通りになります。パチスロには「ボタンストップ後に必ず4コマ以内にストップさせる」という規制があり、これに「ストップボタンの押し順」と「役の当たりフラグ別の処理」を合わせると、かなり面倒な処理になってしまいます。

昔の知識で、パチスロのリール制御にはフラグに合わせて絵柄を引き込む「引き込み制御」と、フラグごとにリール上のストップする場所をマッピングする「テーブル制御」というものがある事は知っていました。テーブル制御の方が例外処理が少なく済みそうなものの、マッピングが面倒なこともあり、今回は「引き込み制御」で制作していくことにしました。しかし、「ボーナス」フラグのみが立っているのに不意に子役が揃ったり、「チェリー」フラグが立っていないのにストップボタンを不規則に押すとチェリーが揃ったリ、なかなか思った通りに動作してくれませんでした。

それでも試行錯誤を繰り返し、何とか完成までこぎつけることができました。リール制御については、最新の5号機の規制に100%沿った訳ではありませんが、とりあえず「それらしさ」は醸し出していると思います。知っている方には分かると思いますが、JavaScriptパチスロは、「ジャグラーシリーズ」を参考にしています。ただ、著作権の関係もあり、画像や音は別物、リール配列やリール制御も参考にはしていますが同じではありません。GoGoランプはありませんが、代わりにLet's Goランプがあります(挙動も若干異なります)。

本当はボーナスゲーム中の曲を自分で作曲してみようと思い、作曲ソフトを購入してみたのですが、結局これで作ったのは効果音とファンファーレのみ。ファンファーレもたった5秒で、コード進行もC→F→G7→Cという非常にシンプルなものですが、これだけでも30分以上の時間がかかってしまいました。そういう訳で、ボーナスゲーム中の曲は、BGM素材集のものを使用しています。作曲については別途学習を進めて、将来別のゲームのBGMか何かの形で公開したいと思っています。

JavaScriptのプログラミングについては、各リールオブジェクトでプロトタイプ(prototype)を使ったのと、キャンバス(canvas)のスクロール処理を行ったのが、今回初めてになります。特にプロトタイプについて、最初はよくわからずに試行錯誤的にプログラムを組んでは「全く動かない」というのを繰り返したものの、最終的に何とか動くようになりました。一度動いてしまうと、その後大きなトラブルはありせんでした。

JavaScriptミニゲームのアイデアは、もう1本頭にあるのですが、これをいつ作るかはまだ決めていません。作曲ソフトを買ったこともあって、とりあえずはこちらの方をある程度使いこなせるようになりたいと思っています。自分で作曲もできて、さらに絵が描ければ、ゲーム以外にも色々なことができると思うのですが、まあ全てをまんべんなくこなすのはさすがに難しいですね。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!をAmazon.co.jpでチェック

ミサイル防衛 - JavaScriptのシンプルシューティングゲーム

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年8月20日
ミサイル防衛 - JavaScriptのシンプルシューティングゲーム先月作成した「フルーツ王子」に続き、JavaScriptでシンプルなシューティングゲームを作ってみました。

ミサイル防衛:
http://kunisan.jp/missile/

爆風はミサイルコマンド風(1980年頃のゲーム)ですが、マウスクリックやタッチパネルのタッチで即爆風が発生します。連鎖爆発(誘爆)でミサイルを一気に破壊するのがポイントな所は変わりません。

前回の「フルーツ王子」はJavaScriptで作成した初のアクションゲームということで、「とにかく作ってみよう」とプログラミングを進めていきました。オブジェクトを積極的に使うことを意識したものの、今までPHPでやってきたようなパワープレイ的な進め方もあったりして、一部の箇所であまり統一感の無いプログラムになってしまっています。

今回の「ミサイル防衛」のプログラムでは、以下のものを新たに取り入れてます。

・Canvas - 爆風やレーザーの描画や、ミサイルと爆風の当たり判定などを行っています。
・setInterval - JavaScriptでアクションゲームを制作する場合には、通常はキャラクター毎にsetIntervalで関数を割り当てて、それぞれが自分で意思を持って動いているかのように作りこみます。しかし、前回の「フルーツ王子」では、1/10秒のタイミングで、全キャラクターを同時に処理するような、ある意味「昔風」な処理でした。今回の「ミサイル防衛」ではミサイルや爆風はもちろんのこと、色々なところでsetIntervalを使っています。
・オブジェクトと配列の複雑な組み合わせ - 敵の出現パターンデータは、「配列化したオブジェクトのプロパティを配列化」した形になっています。これにより効率的にデータ処理ができました。
・audioコントロールの微調整 - 昔と違い、JavaScriptの機種間、ブラウザー間の動作の違いは、あまり無くなってきましたが、オーティオ、ビデオ、タッチパネルなどの操作は、今でも機種間、ブラウザー間での動作に結構な違いが見られます。例えば、WindowsのEdgeやChromeやFirefoxでは普通にゲームの効果音が出せますが、iOSのSafariやAndroidのChromeではタッチ動作と直接紐付いた音しか出ない仕様になっています。iOSについては、さらにmutedメソッドが使えないため、ミュート機能はiOS用にpauseメソッドを併用しています(ちなみにiOSではvolumeメソッドでの音量調節もできません)。IEではcurrentTimeメソッドを使うとエラーで動作停止してしまう他、なぜか爆発音しか効果音が出ません。ミュート機能やIEの動作停止については対応するようにしましたが、他の部分については仕方なく放置しています。

JavaScriptの再学習開始時の1.5ヶ月前よりも、だいぶ感覚的に慣れてきた感じです。オブジェクトについては、まだプロトタイプが未経験ですが、これも近いうちにしっかりと使っていこうと思います。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く! : 田中 賢一郎
ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く! : 田中 賢一郎 をAmazon.co.jpでチェック
コメント:ミサイル防衛 - JavaScriptのシンプルシューティングゲーム
名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年8月21日
動画も公開してみました。

フルーツ王子の改良

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年7月30日
フルーツ王子の改良2週間前に作成したJavaScriptのシンプルアクションゲーム「フルーツ王子」ですが、その後少しずつイベントの追加やゲームバランスの調整などの改良を行いました。

主な追加イベントは以下の通りです。
1. コンボ - フルーツを一定時間内に連続で3個以上取ると、x2、x3、x4...と得点が上がっていきます。スピードアップアイテムで王子のスピードを早くすることで、コンボが成立しやすくなります(その分操作が難しくなります)。コンボの効果音は昔の名作ゲーム「Mr.Do」をイメージして、楽譜作成ソフトで自作してみました(和音1音だけの簡単な効果音ですが)。
2. ハチ - 動く敵キャラで時折登場してきます。最初に出てくる時はスピードが遅いのですが、後から少しずつ早くなっていきます。このキャラを追加したことにより、「王子を一箇所に留めておくと全くミスしない」ということが無くなりました。
3. キング - ゲームがある程度進むと画面の隅にキングが登場、画面上にいるタコを一旦全て消滅させます。その後、タコの出現頻度が早くなり、短時間で画面がタコだらけになります。
4. ビッグフルーツ - フルーツが一通り出るようになるタイミング(メロンが出てくるあたり)以降で、同じ種類のフルーツを3連続で取ると、ビッグフルーツが出現します。ビッグフルーツは通常のフルーツの10倍の得点です。

当初と違って、スピードアップアイテムの重要度が増しました。コンボでの高得点を狙う上でも、ハチをうまく避けるためにも、2段階程度のスピードアップが必須になってきます。

その他、以下のような改良を行いました。

・オーディオのミュート機能(画面下のボタンで変更可能)
・効果音のボリューム調節(オリジナル音源の音量がそれぞれ異なるため)
・効果音の途切れの防止(フルーツやタコ退治連続でも音が切れないように)
・タコ最大20匹から最大30匹に増量(ゲームバランス調整。最大20匹では簡単すぎたので)
・タコやフルーツの出現を王子から2キャラ以内に出現しないようにしていたものを、1.5キャラ以内に変更(ゲームバランス調整)
・スピードアップアイテムを取っていない場合、3つめのアイテムはスピードアップアイテムで固定(ゲームバランス調整)
・画面下のボタンの位置を全体的に上に(スマホやタブレットでボタン全体が表示されるようにするもの)
・viewportでズームの禁止設定(スマホやタブレットでカーソルボタンを連続タップしても拡大しないようにするためのもの)
・王子&馬の前後揺れアニメーション補正(2コマの回転角度を大きくして前後に揺れているように見せる)
・左右のキーを押しっぱなしにしたり連打したりすると、王子のアニメーションがうまく表示されない不具合修正(進んでいる方向と同じ方向のカーソルキーを押しても、画像を再表示させないように修正)
・ゲームオーバー時に王子が左右反転しないように修正(自然に見せるため)
・フルーツ出現の「待ち」を最小化(Fruit Frenzyアイテムでフルーツがよどみなく出るように)
・日本語-英語対応(画面下のボタンで変更可能。URLに?LANG=enを加えることでデフォルトを英語にすることも可能)

個人的にはJavaScriptで第1弾のゲームではあるものの、面白いかどうかは別にして、「やりたい」と思うことは大体やりきることができました。次はCanvas機能とマウスを使ったゲームを作る予定でいますが、オブジェクトをもっと効率的に使った形でのプログラミングも意識するようにします。将来的にはタッチパネル操作やGPSと連動したものなど、色々と試してみたいと思っています。




Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) : 狩野 祐東
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) : 狩野 祐東 をAmazon.co.jpでチェック
コメント:フルーツ王子の改良
名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年7月30日
動画もアップしてみました。
コメント:フルーツ王子の改良
名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年8月2日
その後、さらに以下の改良を行いました。

・2段階目のスピードアップ後のスピードをやや遅く調整(ゲームバランス調整。もともとの2段階目のスピードは、今は3段階目になっています)
・スピードアップなしでも3つ以上フルーツ連続取得でコンボ成立(ゲームバランス調整)
・1UPアイテムの出現確率を若干少なめに、他のアイテムの出現確率を若干多めに(ゲームバランス調整)
・アイテムが表示される際に、前回表示されたアイテムが一瞬表示されてしまう不具合を修正
・ビッグフルーツの得点表示の調整(普通のフルーツより大きく動く)
・タッチパネル操作の修正(JavaScriptのタッチイベントの使用)

フルーツ王子 - JavaScriptのミニアクションゲーム

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年7月18日
フルーツ王子 - JavaScriptのミニアクションゲーム数日前からJavaScriptの再学習を始めましたが、早速ミニアクションゲームを制作してみました。

フルーツ王子
http://kunisan.jp/fruits/

生まれて始めてオブジェクトを多用したプログラムでの制作になっています。プロパティやメソッドの設定など、最初は少し取っつきづらく感じたのですが、慣れてくると逆に便利に感じるようにもなりました。複数の処理が同時進行的に進むアクションゲームなどでは、必須の技術ではないかと思います。

こういったアクションゲームを最後に制作したのは、今から25年以上も前のことです。当時所有していたパソコン(X68000)は、本体+モニターで50万円程度と、当時のパソコンとしてもそれなりに高価なものでしたが、今のパソコンの処理速度と比べると数百分の1レベルです。スマートフォンよりも性能が大幅に劣る位です。

当時はBASIC(X-BASIC)でプログラムを書き、コンパイラーを使って機械語で動かすということをやっていました。大きなプログラムでは、コンパイルに毎回数十分かかったりしましたが、その時間はテレビを見たりファミコンでゲームをしたりして、のんびりとやっていたものです。その時に機械語で動いていたプログラムよりも、今のJavaScriptの方が断然処理が早く、「あの時できなかったような事も、今ならできるかも…」と少しワクワク感のようなものもあります。

JavaScriptの学習はこれからも進めていきますが、当面は今回のような規模が小さめのゲーム制作が中心になると思います。ゲーム制作自体は「自己満足」以外の何物でもありませんが、JavaScriptのプログラミング技術向上に直結するのは間違いなく、さらには将来的に「KUNISAN.JPサイトの大改装」へ向けての基礎となることも期待しています。

ちなみにフルーツ王子は、あと数点機能を追加する予定でいます。詳細については、また後日こちらのブログで…。




Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く! : 田中 賢一郎
ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く! : 田中 賢一郎 をAmazon.co.jpでチェック

| 前ページ(新しい記事) |     | 次ページ(過去の記事) |

※該当の記事タイトル一覧はリンク一覧から参照できます。