文字列が全て半角英数字か調べる

こんな感じでできるようです。

<?php

$str = "あいうえaおかきくあけ";

if (preg_match("/^[a-zA-Z0-9.]+$/", $str)) {
    echo "すべて半角英数である";
} else {
    echo "すべて半角英数ではない";
}

?>

preg_match()が色々と正規表現が使えて便利ということですね。

こちらのサイトを参考にさせて頂きました。
正規表現：すべて半角数字かどうか調べる表現：すべて半角数字かどうか調べる

ページがモバイル フレンドリーではありません。

Suama Online ServiceのページがGoogle検索で表示されるか確認していたところ、検索結果に「ページがモバイル フレンドリーではありません。」との表示が！

何だこれと思って調べてみたのですが、サイト管理者にだけ表示されるものみたいです。Googleが世の中全体に向けてこのサイトがダメだとアピールしだしたのかと思い、焦りました（笑）

リンクをクリックすると、モバイルフレンドリーテストというページに飛びます。で、以下の4つがダメですと表示されました。

• テキストが小さすぎて読めません
• ビューポートが設定されていません
• コンテンツの幅が画面の幅を超えています
• クリック可能な要素同士が近すぎます

なるほど、確認すると確かにスマホで見ると表示が非常に小さいです。取り敢えずviewportを設定しよう、ということで以下の設定を各ページに入れました。

<meta name=viewport content="width=device-width, initial-scale=1">

再度モバイルフレンドリーテストで確認を行うと、モバイルフレンドリーです、と表示されました！でもまあ、表示は大きくなったのですが使いにくいですね。。。今後の検討としましょう。

参考にさせて頂いたサイト

もう逃げない。HTMLのviewportをちゃんと理解する

「viewport設定て何だよ、面倒くさい！」→実は一番脳みそ使わない問題。　スマホ対応 最前線ブログ

モバイルフレンドリーテスト

決まった範囲を選択してクリップボードにコピーするjava script処理

出力結果をクリップボードにコピーする処理をjava scriptで作成しました。正直java scriptはまだ良くわかっていないので現時点ではあまり利用したくないのですが、こういった処理はjava scriptを使わないわけには行きませんね。。。

処理
function TextareaSelected() {
  document.form2.output1.focus();
  document.form2.output1.select();
  document.execCommand("Copy");
}

実行するボタン
<input class="button2" type="button" value="パスワードをクリップボードにコピー" onClick="TextareaSelected()">

選択するフォーム
<form name="form2">
<textarea id="output1" name="output1">
  ここに出力結果を表示
</textarea>
</form>

実際に作成したページはこちらです。
パスワード自動生成

以下のサイトを参考にさせて頂きました。
6. テキストエリアをボタンで全選択する　仕掛けで見せる! WEBデザインTIPS ＆ TRICS

パスワードを生成する

パスワードを自動生成するページを作成しました。
パスワード自動生成

パスワードを自動生成するサイトは既に世の中にたくさんありますが、自分もよく利用する機能であること、既存のサイトでイマイチ使い勝手が、と思うところがあるので作成してみました。

あまりデザインセンスがないページになってしまいました。が、機能的には以下の3点ほどこだわってみました。

• シンプルな作り
• パスワードの文字列を最大128文字まで選択できる
• 作成したパスワードをそのままクリップボードにコピーできる

シンプルな作りは全体のコンセプトの１つです。文字列数についてはここまで文字列が必要か、というのはありますが、最近はブラウザにパスワードを覚えさせてしまうことも多いので覚える必要も減っています。それであれば、なるべく長いパスワードも生成できたらなと思い、最大128文字を設定しています。256文字までというのも考えたのですが、まあそこまでは不要かなと。実装自体は難しくはないんですけどね。あとは、クリップボードにコピー出来る機能です。パスワードをテキストでダウンロードできるサイトもあるのですが、個人的にはコピーを簡単にできれば、その方が手間がかからないのではないかと日々思っていました。

作成してから思ったのですが、本当はパスワード生成処理はクライアントサイド、つまりjava scriptで生成したほうが、より安心なのかもしれません。勿論、本サイトでは生成したパスワードを保持しているわけではないので安全ではあるのですが、それはサーバ側の主張ですからね（自分で言うのもなんですが）。でもまあ、サーバ側ではパスワードの用途も分からないですし、そこまで問題ないのかも。

変数が数値であるかをチェックする

色々やり方はあるようですが、こちらを採用しました。

(!preg_match('/^[0-9]+$/', $int))

以下のサイトを参考にさせて頂きました。
PHPで数値をチェックする4つの方法を比較

PHPは変数の型があいまいでも動いてしまうので、楽ではありますが想定外の動きをするリスクはありますよね。

テキストエリアの出力テキストをテキストファイルとしてダウンロードする

テキストエリアの出力テキストをテキストファイルとしてダウンロードするjavascriptのサンプルです。

function handleDownload() {
    var content = document.getElementById( "output1" ).value ;
    var blob = new Blob([ content ], { "type" : "text/plain" });
    if (window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(blob, "test.txt");
        // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
        window.navigator.msSaveOrOpenBlob(blob, "test.txt");
        } else {
        document.getElementById("download").href = window.URL.createObjectURL(blob);
    }
}
ボタン
<input type="submit" value="ダウンロード" onClick="handleDownload()">
テキストエリア
<textarea id="output1">テスト</textarea>

以下のサイトを参考にさせて頂きました。
JavaScriptでファイルダウンロード処理を実現する
入力フォームの値を取得する方法

数字を選択するプルダウンメニュー

PHPを利用して数字部分を生成し、プルダウンメニューを作成するサンプルです。

 <?php
     #数字選択プルダウンメニュー
     $html = "<select name=\"kazu\">\n";
  for ($i=1;$i<=128;$i++){
      $html.="<option value=\"$i\">$i</option>\n";
  }
     $html.= "</select>";
     print $html;
 ?>

CSSでテーブルの幅を調整する

テーブルを作成したのですが、変なふうに改行されてしました。ということで、CSSで幅を調整しました。こんな感じです。

table{
width: 100%;
} 

th.koumoku{
width: 20%;
} 

th.hensu{
width: 20%;
} 

th.atai{
width: 60%;
}

以下のサイトを参考にさせていただきました。
HTMLのtableでテーブル（表）を作る方法とCSSのデザイン調整解説

完成したサイトは以下のものです。
WEB接続環境確認

接続元のWEB環境を表示する

接続元IPアドレス表示に引き続き、接続元のアクセス環境を表示するページを作成します。
以下のサイトを参考にさせていただきました。
PHPでユーザー・アクセス情報を表示する

これについては参考にするという、ほぼそのままですね。表示させる内容はPHPの変数で取得できるものだけにしています。JavaScriptを利用すればもっと色々取得して表示させることが出来るとは思うのですが、一旦そちらには手を出さず、シンプルな作りにしました。

完成したサイトが以下のものです。
WEB接続環境確認　Suama Online Service

接続元のIPアドレスを表示する

接続元のIPアドレスを表示するサイトは、シンプルに作れそう＆結構よく使うということで、最初に作成してみました。

今回PHPで環境を作成しています。

以下のサイトを参考にさせていただきました。
PHPでIPアドレスを取得する：$_SERVER変数, gethostbyname

接続元IPアドレスを表示するのは変数を表示させるだけで良いのですね。簡単で良いです。

echo $_SERVER['REMOTE_ADDR'];

IPアドレスだけだと寂しい気がしてきたので、ホスト名も表示するようにしました。
こちらは以下のサイトを参考にさせていただきました。
[PHP] アクセス元のホスト名を取得する

先程の接続元IPを利用して、ホスト名を解決させるという感じですね。

$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);echo $host

完成したサイトが以下のサイトです。
IPアドレス確認　Suama Online Service

Suama Online Serviceとは

Suama Online Serviceは普段IT技術の中でもインフラレイヤに関わっている１エンジニアが、フロントエンドやプログラミングについても学習しよう！、ということで構築しているWEBサービス群です。

基本コンセプトは以下のとおりです。

• なるべくシンプルに
• 既に世の中にあるものも、再度作ったって良いじゃない
• 自分が使いたくなるものを

本サービスは個人利用、商用利用を問わず、自由に無料でご利用頂くことが可能です。ただし、以下の留意事項があります。

• 法令、モラルに反するご利用はご遠慮ください。
• 本サービス利用に際して発生したトラブル、損害等については一切保証いたしません。
• 本サービスに異常に負荷をかける利用のされ方をした場合、利用の停止を求めたり、接続を切断させて頂く場合があります。
• 本サービスは可能な限り継続するよう努力致しますが、予告なく停止する可能性もありますので、その旨ご了承下さい。

また本サイトはリンクフリーです。
お好きなページをリンク先として頂いて構いません。

よろしくお願いします。

本サイトが使用しているアクセス解析ツールについて

• 本サイトでは、サイトの分析と改善のためにGoogleアナリティクスを使用しています
• 本サイトをご利用中のウェブブラウザは、Google に特定の情報（例えば、アクセスしたページのウェブ アドレスや IP アドレスなど）を自動的に送信します
• データ収集のためにGoogle がお使いのブラウザに cookie を設定したり、設定済みのcookieを読み取ったりする場合があります。
• 利用者は、本サイトを利用することで、上記方法および目的においてGoogleが行うこうしたデータ処理につき許可を与えたものとみなします。

本サイトに掲載されている広告について

• 本サイトではでは、第三者配信の広告サービス（Googleアドセンス）を利用しています。
• このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報  cookie （例えば、アクセスしたページのウェブ アドレスや IP アドレスなど）を使用することがあります。
• 利用者は、本サイトを利用することで、上記方法および目的においてGoogleが行うこうしたデータ処理につき許可を与えたものとみなします。

リスト（ul,li）を縦横に並べる

トップページに機能一覧を鉢したいのですが、AWSの機能一覧みたいに並べたいなと思います。で、やり方を調べたところ、まさにやりたい事が纏めてあるサイトがありました。

CSSでリストから表を作る方法！２列、３列、４列のレイアウトはこうすれば良いけど罫線が問題

今回はサンプル３を利用させていただきました。

ul.listtest3 {
    display: table;
    width:100%;
}
ul.listtest3 > li:nth-child(3n+1) {
    clear: both;
}
ul.listtest3 > li {
    display: table-cell;
    float: left;
    width: 33%;
}

あとは少し行間を調整します。

【CSS】line-heightで行間を調整する方法：おすすめの値は？ 

bloggerで独自ドメインを設定する

このブログがgoogleが提供しているブログサービスであるbloggerを利用しています。bloggerの場合、標準でXXX.blogspot.comというURLが割り当てられるのですが（XXXの部分は任意）、今回は独自ドメインを設定してみました。

設定方法については、以下のサイトに詳しく記載されていますので、そちらをご参照下さい。
2018年版 Blogger のサイトを独自ドメインに設定する方法　ブロギングライフ

bloggerだと独自ドメインでも簡単にHTTPS化できます。こちらについても以下のサイトに分かりやすく記載されています。
独自ドメインのBloggerでHTTPSを有効にする設定方法　ブロギングライフ

さて、今回.onlというあまり見覚えのないドメインを取得しました。本当は.netとかもっとメジャーなドメインで取得したかったのですが、はやりメジャーなドメインは既に他の方が取得されていましたね。まあ、onlはオンラインを表すドメインということなので、まあ良いかな？ということで選択しました。onlineというドメインもあるのですが、お名前.comだと結構高いんですよね。