ZAPAnet総合情報局 > ZAPAブログ2.0 >

Enterキーを押されても実行されないフォームの作り方

formのinput入力欄でEnterキー(リターンキー、実行キー、決定キー)を押されてページ遷移させたくないとき、ありますよね。インクリメンタルサーチを実装したときなどは、わざわざエンターキーを押して画面遷移される必要性がありません。また、ページ内ですべて完結する処理も、POSTして画面遷移される必要がありません。例えば、以下のようなページです。
Enterキーを押しても実行させないフォームの作り方

Submitのボタンを消せば、ページ遷移を防げそうですが、input[type=text]のフォームが一つだけで、そのフォーム内でEnterキーを押されると実行されてしまいます。これを防ぐには、javascriptで別途処理を書いたり、「 onSubmit="return false;"」などとする方法があります。

ただ、最近のブラウザはもっと賢くて、もっと簡単に送信を防ぐことができるようになりました。ダミーフィールドの使用です。
2020年06月23日 プログラミングTIPS

iPhone(iOS)でtextareaやinputのフォーカス時にズームする理由と解決策

ios 16px zoom


iPhoneで入力欄にカーソルを合わせたとき、自動的に画面がズームアップする機能があります。ユーザー側としては、勝手に拡大表示されて面白いなぁと思っていました。ところが、Webページ提供側から見ると、「勝手に拡大するな」と言いたくなるときもあります。このiPhoneでの「勝手に拡大する」「拡大しない」の違いは一体何なのか、調べてみました。

まず、Google Chromeのエミュレータから、スマホ向けのレスポンシブデザインのページを動作確認してみました。Chromeのエミュレータからだと、入力欄にカーソルを合わせても拡大しません。これだと、iPhoneの自動ズーム問題に気付かないことがあります。実機での動作確認は絶対に必要です。「スマホ表示だから拡大する」のではなく、「iOSだから拡大する」というApple側の仕様です。

調べてみたところ原因は、「フォーム入力欄のフォントサイズが16px未満だと、iOS側で勝手にズームする」という仕様になっていました。

原因がわかれば、対処方法は簡単です。一番簡単に解決する方法は、textareaやinputなどのフォントサイズを16px以上にすることです。単純明快です。

例えば、inputのテキストフォームにフォーカスを合わせたときに自動拡大させたくないなら、CSSでこのようにします。
input[type=text]{
  font-size: 16px;
}
2020年06月22日 プログラミングTIPS

www付きのサブドメインをSSLドメインに転送できなかったときのメモ

httpのwwwアクセスをhttpsのwwwなしドメインにリダイレクトすることはできるのに、httpsのwwwアクセスをhttpsのwwwなしドメインにリダイレクトできなかったときのメモです。

あらかじめWebサーバーのNginxで、サブドメインwww付きのアクセスはすべてwwwなしにリダイレクトするように設定していました。例えば、「http://www.zapanet.info/blog/」にアクセスすると、SSL対応の「https://zapanet.info/blog/」に転送できるようにしていました。

ところが、「https://www.zapanet.info/blog」にアクセスしても、「https://zapanet.info/blog/」には転送されなくて失敗しました。httpからhttpsには転送できるのに、httpsからhttpsには転送できませんでした。なんででしょう?

Webサーバー側の設定はできているはずなのに、なぜかエラーが起きて転送されません。「この接続ではプライバシーが保護されません」と表示されてしまいます。常時SSL化はしてあるはずなのに。


なんでかなぁとよく考えたら、取得したSSL証明書がサブドメインに対応していないからでした。「zapanet.info」はSSL化していましたが、「www.zapanet.info」はSSL化していなかったということです。

では、どうするか。

取得したSSL証明書は、「Let's Encrypt - フリーな SSL/TLS 証明書」です。
letsencrypt

Let's Encryptで、サブドメインも含めたSSL証明書に更新すれば良かったというわけです。最初にCentOS8のサーバー上でcertbot-autoコマンドで取得した証明書は以下でした。
certbot-auto certonly --webroot -w ファイルのあるディレクトリ -d zapanet.info
2020年06月21日 プログラミングTIPS

特定のファイル一覧を出力するときのメモ

Linuxサーバー内のある特定のファイルの一覧を出力したくなりました。例えば、「*.html」とか「*.php」とかです。Linuxにはtreeコマンドがあったなと思ってCentOS8で打とうとしたらありませんでした。ということで、まずはtreeコマンドのインストールから。CentOS8ではインストールコマンドが今までの「yum」から「dnf」に変わっています(「yum」でも動きます)。
dnf install tree

ディレクトリの情報はいらなくて、全ての階層のサブディレクトリまでファイルパスとファイル名だけ出てきてくれれば良かったので、「.html」のファイルを全て出力するために以下のようなコマンドを打ってみました。
tree -f -i  ./ -P '*.html' > html_list.txt
これでファイル一覧がhtml_list.txtに出力されるかと思ったら、htmlファイルだけでなくディレクトリ情報も一緒に出力されてしまいました。

ファイルだけをスマートに出力させたかったのですが、できていなかった上にもうローカルにダウンロードしてしまったので、今度は特定のファイルを含まない行を全て削除する方法を考えてみました。

今使っているWindows用のエディタ「Sublime Text」は複数行置換や正規表現などに対応していて高機能です。それならと、「特定の文字列を含まない行」を置換できるのではないかと考えました。探してみたらすぐ見つかりました。
Sublime Textで「特定の文字列を含まない行」は以下のようにして取り出せます。
^(?!.*文字列).+$
「html以外の行を削除」というのであれば、Sublime Text3で正規表現置換をONにして、以下のように置換すればOKです(置換後の文字列は空白です)。
^(?!.*html).+$\n
これで、「html」で終わっているファイルを全て取り出せました。ファイルパスは相対パスになっているため、ここからドメイン名に置換すると、そのまますべてのhtmlファイルのURLになります。sitemapで静的なhtmlファイルの一覧を作るときに、この方法を使いました。

ついでに、sitemapは一般的に以下のような構造になっています。
<url>
  <loc></loc>
  <priority></priority>
  <changefreq></changefreq>
  <lastmod></lastmod>
</url>

出力した全てのHTMLファイルのパスが一行ずつ並んでいるのなら…
sublimetext
2020年06月20日 プログラミングTIPS

PukiWikiがまだ進化していた!PHP7でも動く

PHPで動くWikiシステムとして有名なPukiWikiは、PukiWiki派生の互換Wikiプログラムもいくつか登場し(PukiWiki Plus!など)、もう何年も前にPukiWikiはオワコンかと思っていました。が…なんと、最新のPukiWiki 1.5.3はPHP7.4にも対応していました!
驚きました。Pukiwiki1.5.0の登場が2014年で、Pukiwiki1.5.1の登場が2016年。ここでもう終わったのかと思っていました。その後、2019年にPukiwiki1.5.2が登場し、今年2020年にはPukiwiki1.5.3が登場していました。


最新のPukiWikiでは、UTF-8推奨、スマホデザイン対応、検索機能強化、プレビュー移動時の警告など、新機能が追加されていました。ただ、実際に新サーバーで動かしてみると、PHP7系の構文で注意や警告のエラーがたくさん出ました。動くことは動きますが、あまりよくはないですね。

今までのサーバーではPukiWiki 1.4系のシステムに、PHP5.4以降でも動くようにパッチを当てて動かしていました。PukiWikiには、既存のページに自動でリンクを張るAutoLinkという便利な機能があります。この機能は、ページ数が増えるととんでもなく重い処理となっていきます。そのため、PukiWikiのページ内容を変換した後にキャッシュさせるプログラムを組み込んでいました。毎回パッチを当てるのも大変なので、今まではずっとPukiWiki1.4系で動かしていました。

サーバーを移転してPHP5系からPHP7系に上がることにより、このキャッシュの機能やPukiWiki自体が動かなかったりしたらどうしよう…とずっと心配でした。先日投稿した記事の「LAMP環境からLEMP環境になりました」にも書いたように、まずは仮想サーバー上で動作確認しました。結果としては、最新のPukiWiki 1.5.3がPHP7.4対応になっていてくれたおかげで助かりました。これをベースにキャッシュの機能を組み込みました。さくらのVPSをレンタル(詳しくは「サーバーをさくらのVPSに移転」参照)した後、試しにページ数の多いWikiで文字数の多いページを表示させてみました。すると、キャッシュなしでは、1ページを表示するのに3秒や5秒かかることもありました。重すぎてこのままでは使えません。キャッシュシステムが動くか不安になりながら、キャッシュのプログラムを組み込んで動かしてみると…1ページ表示するのに、0.002秒~0.003秒!(PukiWikiのプログラム内で計測を始めて、最後のHTMLを出力し終わるまでの時間です)キャッシュシステムを組み込むと、1000倍以上速くなりました。この後、PHPのコンパイル済みのバイトコードを共有メモリに保存するOPcacheをインストールしたところ、さらに2倍速くなり、表示処理は平均0.001秒になりました。1秒間に同時に1000アクセス来ても余裕で処理できます。
2020年06月19日 プログラミングTIPS

ブログのデザインとシステムをリニューアルしました

サーバーをさくらのVPSに移転し、LAMP環境からLEMP環境に変更したことに合わせ、ブログのデザインとシステムもリニューアルしました。
ブログリニューアル

システムについては、見ている人には全くわからないと思いますが、内部プログラムとデータベース構造は全く違うものに作り替えました。元々このブログのシステムは、Movable Typeのシステムをインストールして試した後、やっぱり使いにくくて、Nucleus CMSというツールに入れ替えた過去があります。そして、それまで利用していたライブドアブログの過去ログを全てサーバー内のデータベースにインポートし、このブログを続けてきました。

Nucleusでは無駄なプラグインなどがあって動作が重いことから、2007年に自力でブログ表示部のプログラムを作り、100倍速いシステムに作り替えました。
自分で作ったブログ表示部のソースコードを見直していたら、「ケータイ対応」とかもあって(スマホのことではなく、ドコモのiモードとかJ-PHONEとかの古いやつです)、コメントアウトはしていましたが、かなり古くさかったです。それを今回、データベース構造から見直して、新たにブログシステムを作り替えたというわけです。トラックバック機能やコメント機能もバッサリ削除しました。ブログシステム自体は他にも作ったことがあったため、そちらからある程度のソースコードを流用し、DB構造なども変えました。ブログ投稿システムだけは先日まで古いNucleusをそのまま使っていました。それももう捨てました。新たに自分でブログ投稿システムを作り、そちらから投稿するように切り替えました。

ついでに、以前作った画像アップロードシステム(iPhone(iOS6以上)対応画像アップロードプログラムをPHPで書いた)を改良して、スマホから複数枚の画像をアップロードしたり、画像を削除できる機能を付けたりしました。FTPソフトやCMSの機能を使わず、すべて自分のプログラムだけで動くようにしました。もちろんスマホ対応です。
2020年06月18日 お知らせ

【PR】Maywind 枕 レビュー。50%オフクーポン付き!

枕4

ブログレビュー用に、Maywindの枕を提供していただきました。
この枕は、「雲のうえで寝よう、枕難民の睡眠を救う」がキャッチコピーの新感覚のパイプ枕だそうです。アマゾンから届いた商品はこちら。
枕6

段ボールの中に黄色い袋があり、その中にビニール包装された枕が入っていました。枕という清潔さが求められる商品のため、包装もきっちりしていました。さて、黄色い袋から枕を取り出し、ビニール包装を破ってみると…これがMaywindの枕です!
枕7

反対側。
枕8

首元までサポートしてくれて、頭部のところがヘコんでいて、顔の左右もサポートしてくれる枕。こういう枕、テレビの通販番組で似たような枕を見てから気になっていました。「3Dエルゴノミックス構造による未体験なホールド感」で、まるでスプリングが入っているかの様にフレキシブルに連動し、空洞部分(エアースプリング)が首筋に合ったフォルムを実現してくれるそうです。
枕2

手に持つと、そこそこの重さがあります。軽くてふわふわの枕とはちょっと違います。重さは1.5kgあるようです。
枕9

「もしかして硬いのかな…?」と押し込んでみると…硬くはありません。ふにゃふにゃに柔らかくもないです。低反発でぐにゅーっと沈み込む枕とも違いますし、柔らかすぎてペチャンコになる枕とも違います。硬い枕とも柔らかい枕とも異なる、ちょうどいい感じの硬さの枕です。押せるのに、それでいて反発性もあります。

Amazonの商品説明を読んでみると、「革新的な“温度管理するウレタンフォーム”、呼吸できる枕、優れた反発弾性(63%)も備えているので頭を枕にあずけた瞬間に首を優しく包み込みつつしっかり持ち上げサポートします」と書かれていました。メッシュ構造と中材による中空構造だそうです。優れた吸水性のあるスーピマコットンを100%使用し、しっとりとした肌触りを実現し、寝汗もしっかり吸い取り、まくらをさらさらに保とうとしてくれるそうです。これから暑い季節になるため、暑苦しくならないのは助かります。
枕1

ここがメッシュ部分ですね。
枕10
2020年06月17日 雑記

Epicのサムライスピリッツの音割れを直す方法

【急げ】サムライスピリッツ無料配布中!DLは6月18日まで!」で紹介したサムスピ、もうプレイしましたか?このサムスピ、ネオジオ版なのに4K画面でプレイできてすごいです。文字も英語版と日本語版を切り替えられます。
サムライスピリッツ

さて、そんな無料のサムスピも、起動して困ったことが一つ。

音割れがひどい!

最初は、PCの調子が悪いのかなぁと思っていたのですが、PCを再起動してもノイズまみれなので、原因を調べてみました。サウンドの設定に問題があったようです。まずはWindows右下のサウンドアイコンから「サウンドの設定を開く」をクリック(あるいはWindowsの設定からサウンドへ進んでください)。
サムライスピリッツ

右側に関連設定があり、「サウンドコントロールパネル」をクリック。
サムライスピリッツ

音声を再生しているデバイスのプロパティを開き、「詳細」タブを開くと、信号の拡張機能のところに「オーディオ拡張機能を有効にする」が見つかります。この項目を「OFF(チェックなし)」にすることで、サムライスピリッツの音割れ問題は解決します。
サムライスピリッツ
2020年06月17日 ゲーム全般

LAMP環境からLEMP環境になりました

前記事「サーバーをさくらのVPSに移転しました!」で、さくらのVPSにサーバー移転したことを書きました。今まではずっと、LAMP環境でサーバー運用してきました。

LAMP環境とは一般的に、Linux、Apache、MySQL、PHP(Perl、Python)です。今回はサーバー移転にあたり、いろいろ変えてみることにしました。WebサーバのApacheから、速いと噂のNginxへと切り替えてみることにしました。Nginxが速いと言われ始めてからもう結構な期間が経っているので、そろそろ良いかなと思いました。一方で、まだ新しすぎるH2OのWebサーバーは選びませんでした。情報が少なすぎると困ってしまいますので。

また、LinuxはCentOSの最新バージョンCentOS8.1に、MySQLはMariDBに、PHPはPHP5系からPHP7系に切り替えることにしました。つまり、Linux(CentOS8)、Nginx、MariDB、PHP7になったというわけです。略して、LNMPではなく、LEMPです。

正直、この切り替えはかなり大変でした。

手元のWindowsに仮想マシンをインストールするところから始め、ここに仮想サーバーを構築して動作を確認していきました。LAMP環境からLEMP環境にPHPファイルなどを持っていっても、そのままでは動きません。初期設定も大事ですし、バージョンの違いからプログラムも修正していかないといけません。

CentOS8

CentOSは、最新版ではCentOS8系になりました。インストール時はCentOS8.1が最新でした。アップデートコマンドのyumがdnfになったり、serviceがsystemctlになったり、ファイアウォールが変わったりいろいろありました。でも基本はCentOSです。それほど大きくは変わりません。文字コードは、EUC-JPからUTF-8に変更しました。ここは仮想サーバーで何度でもやり直しができるので、初期設定の練習用として仮想サーバーをいじっていきました。後に、本番環境のさくらのVPSへと移りました。さくらのVPSだと、パケットフィルタが設定されていて、ポートは塞がれたりもしています。ポートを開放するときは、さくらのVPSのコントロールパネルから確認が必要です。SSHポートの番号を変更する際などは確認必須です。

nginx

大変だったのがnginx。これはキツかったです。できたと思ってもできていなかったり、特にlocationブロックの優先順位などが想定通りに動いてくれなくて大変でした。Webサーバーから動かすPHPもApacheではモジュールとして組み込んでいて簡単だったのが、nginxではCGIのPHP-FPMとして動かさないといけなかったり、設定も難しかったです。それでもなぜApacheからNginxに変えたかといえば、Apacheの同時接続数が増えるとやたら重くなることを回避したかったからです。Nginxなら同時接続数が増えても耐えられるという話を聞いていたので、試してみたい気持ちの方が強くてnginxを使うことにしました。もう情報も相当蓄積されているのかと思っていましたが、Apacheよりも情報が少なかったです。Apacheにあったディレクトリ内設置の.htaccessは使えず、nginx.confにまとめて記載することで動作速度も向上しています。「高速に動くならその方が良い」と最初は思いましたが、いざ.htaccessが使えないとなると、意外と不便であることにも気付きました。ApacheからNginxに移行するときは、ディレクトリ内においた.htaccessの記載漏れがないように注意する必要があります。初めからNginxなら問題はありません。

ちなみに正式名称は、NginxなのかnginxなのかNGINXなのかわかりません。
2020年06月16日 プログラミングTIPS

サーバーをさくらのVPSに移転しました!

このブログなどを動かしているサーバーを、さくらのVPSに移転しました。今まではさくらインターネットの専用サーバを使っていました。もうサーバーが古いので、「早く移転しよう、早く移転しよう」とずっと思っていました。ただ、移転作業が大変すぎて…移転先のサーバーをレンタルまでしたものの、結局移転作業が面倒くさくなってそのまま解約したこともありました。今回、重い腰を上げて、やっと移転しました。移転先で利用することに決めたサーバーは、さくらインターネットのVPS(仮想専用サーバー)|さくらインターネットです。

サーバー移転にあたり、また専用サーバーにするか、クラウドにするか、VPSにするか悩みました。移転先のサーバー会社は、今までお世話になってきたさくらインターネットさんでほぼ決めていたので(クラウドならアマゾンの選択肢もありました)、まずは料金体系を比較してみました。
専用サーバー
専用サーバーはどれだけ負荷をかけても、他の利用者には誰にも迷惑をかけない安心感。でも料金は高く、サーバーの増加も高価。
クラウド
クラウドは、スケールアップ/スケールダウンが自由にできるエラスティック性が魅力。
VPS
VPSは、専用サーバーさながらの管理機能とコスパ。ただし、負荷の面で他のユーザーとの兼ね合いがわからない。
などの悩みどころがありました。

最初にさくらのクラウドについて調べてみると、スケールアップ/スケールダウンが自由にできるエラスティック性は高いのですが、CPU、メモリ、ストレージの組み合わせによってはけっこう利用料金が高いことがわかりました。特に、SSDのディスク容量を増やすと月額料金が跳ね上がります。

次に、さくらのVPSについて調べてみました。さくらのクラウドの後にさくらのVPSの料金体系を見ると、驚きます。

コスパがすごい!



メモリ1GB、仮想CPU2コア、SSD50GBで月額800円~!メモリ2GB、仮想CPU3コア、SSD100GBで月額1580円~!メモリ4GB、仮想CPU4コア、SSD200GBで月額3200円~!圧倒的なコスパに驚きました!
2020年06月15日 プログラミングTIPS