脱サラのすすめ

ダムとバイクとSEの記録


【LAMP環境】【XAMPP環境】PHPでメール送信を行う方法【Postfix】【mb_send_mail()】

f:id:shibatty:20211103094959j:plain

2021.11.3 

とうとう来たなこの時が・・・

再び開けるプログラマーの扉

 

の流れの話で、前記事(Webシステム実行環境、開発環境作成)の外伝的な話です。

前記事は下記からご参照ください。 

datsusara-susume.hatenablog.com

 

datsusara-susume.hatenablog.com

 

実行環境開発環境が整いWebシステムの開発が進んできましたが、「自動メール送信機能が欲しい」という要望が出てきました。

そこで今回は、メール送信機能のひとつである、Postfixインストール、及び設定方法のメモも兼ねて紹介を行います。

実行環境がLAMP環境開発環境がXAMPP環境と分かれておりますので、それぞれ設定方法を紹介していきます。

※正確にはXAMPPはPostfixを使ってないです

(全行程の所要時間:60分程度)

 

 

 

 

目次

 

0.構築環境

■実行環境

・さくらVPNメモリ:1GB、CPU:2コア、SSD:100GB)

 

LinuxOS:Ubuntu18.04

 

Apache:2.4

MySQL:5.7

PHP:7.2

 

■開発環境

Windows10メモリ:8GB、CPU:2コア、SSD:256GB)

 

XAMPP:3.3.0

 

※各環境の詳細は下記過去記事を参照ください。

 

datsusara-susume.hatenablog.com

 

datsusara-susume.hatenablog.com

 

datsusara-susume.hatenablog.com

 

 

 

 

1.XAMPP環境

 正確にはPostfixではなく、XAMPPインストール時に付属されている”メール送受信機能を活性化させる”流れになります。

 

①XAMPPコントロールパネルから「php.ini」ファイルを開く

 Apache列の[Config]ボタンより、「PHPphp.ini)」を選択します。

f:id:shibatty:20211103102106p:plain

 

②「php.ini」ファイルの編集

 ①の操作で、下記ファイルが開きます。

約1106行付近の[mail function]内にある赤枠下段の記載を追記します。

ノーマル状態だと「;sendmail_path = 」となっており「;」でコメントアウトされています。

このコメントアウトを外し、「=」の後にメール機能を行うアプリケーションが保存されているパスを、次のオプション付きパス「""C:\xampp\sendmail\sendmail.exe" -t"」と記入します。

※「sendmail.exe」のパスはインストールの仕方で変わるため、各人で確認してください。

f:id:shibatty:20211103102525p:plain

 

③「sendmail.exe」格納場所にある「sendmail.ini」ファイルを開く

 「sendmail.exe」と同じ場所にある「sendmail.ini」ファイルを、メモ帳などで開きます。

f:id:shibatty:20211103103316p:plain

 

④「sendmail.ini」ファイルの編集

 編集箇所は、メール送信のみであれば次の3ヶ所です。

②と同様、該当の設定のコメント「;」を外し、設定を入れていきます。

ⅰ.「smtp_server=」→メールサーバを指定します。

 例)G-mailなら「smtp.gmail.com」になりますが、G-mail側で2段階認証機能をオンにしているとメール送信できない点に注意です。不明なアクティビティが検出され、アクセスがブロックされました。。。

 

ⅱ.「;smtp_port=25」→「smtp_port=587」

コメントアウトするだけでいいと思いますが、大抵のSMTPサーバがポート587からの応答に応えていると思われるためこの設定に。G-mailの場合はポート587。

 

ⅲ.「;auth_username= ;auth_password=」→自身のアカウントとパスワード

 例)G-mailなら、自分のメールアカウントがusername、ログイン時のパスワードがpasswordになります。ⅰ同様、2段階認証に注意です。

 

f:id:shibatty:20211103105126p:plain

f:id:shibatty:20211103104702p:plain

 

PHPからテスト送信

 PHPのシステム側から「mb_send_mail($to, $subject, $message, $headers);」関数を使って送信してみましょう。

対象へ送信できていれば完了です。

※$to→送信対象メールアドレス文字列(例:"test@aaa.com")

 $subject→件名文字列(例:"test")

 $message→本文文字列(例:"test")

 $headers→送信者、CCなどを含むヘッダ文字列(例:"From: send@bbb.com")

 例)"From: send@bbb.com" から、"test@aaa.com"へ、件名"test"、本文"test"、としてメールが送信されます。

 

次はLAMP環境での導入方法、及び設定方法について説明していきます。

 

 

2.LAMP環境

 自分のサーバーからメールを送信するだけであれば、次のPostfixのインストールと、インストール中の設定のみでメール送信機能が利用可能となります。

 

①以下コマンドでメール送信用ポート587を開けます。

sudo ufw allow 587

 本当に開いたか気になる方は、次のコマンドで解放ポートを確認を行うと良いでしょう。

sudo ufw status

 

②さくらVPS側でも、587番ポート(または「メール用ポート」)を開けます。

 「パケットフィルタを設定」というところから設定する流れです。

※メール設定はデフォルトで「全て許可」状態です。もし何らかの設定で外していればこれらを許可してあげてください。

f:id:shibatty:20211103142946p:plain

 

③以下コマンドで「Postfix」をインストールします。

※「Webmin」などからもコマンドを飛ばせますが、「Postfix」は確認画面が伴うため、なるべくリモート等でコンソールを直接触ってください。フリーズします。。。

sudo apt-get install postfix

 

すると、下記画面が出ます。

この前に、何かを確認する画面が出たり出なかったりします。その際は、[Tab]でカーソルを<OK>に合わせて[Enter]押下してください。

現実行環境は実際にネット上にあり、ドメインも取得してあるため、「Internet Site」に[Tab]でカーソルを持ってきて[Enter]押下し、選択します。

 

次に、以下の画面が出ます。

メールサーバーの名前を入力する感じです。

初期値は現サーバのサーバ名になっていますが、ドメイン取得している場合は取得したドメインをピンク帯に上書きしてあげます。

入力が終わったら、[tab]でカーソルを<OK>に移動させ、[Enter]押下で選択。

 

この先もあったりなかったりするらしいですが、自分はここで設定が完了しました。

おそらくメールに関する何らかの設定を先に入れていると、細かく聞いてくるのかと思われます。

 

PHPから送信テスト。

 手順1の⑤同様、「mb_send_mail($to, $subject, $message, $headers);」関数を使って、メール送信テストを行います。

外部からホスト名、またはドメイン名が認識できれば特に問題なく送信できるはず。

 

後は実際にプログラムに組み込んでいくだけですね。

 

 

 

3.おまけ:日本語文をmb_send_mail()で送る

 実は単純に「mb_send_mail($to, $subject, $message, $headers);」関数を使うだけじゃ日本語を送れないんですよね。

 次のように記載することで、日本語文が送れるようになります。

$headers = "Mime-Version: 1.0\n";  //ヘッダにMimeを指定(現状はこれ)
$headers = $headers."Content-Type: text/plain; charset=UTF-8\n";  //ヘッダにコンテンツのタイプと文字コードを設定
$headers = $headers."From: test@test.com";  //ヘッダに送信元を設定
mb_language("Uni"); //mbstring関数で言語の設定(何故かJapanieseで日本語しなかった)
mb_internal_encoding("UTF-8");  //mbstring関数でエンコード
mb_send_mail($to, $subject, $message, $headers);  //各引数を関数に渡し、送信処理

 

 

 

4.最後に

メール送信機能の追加が完了しました。

他にもあーしたいこーしたいという要望をWebシステムに昇華していく中で苦戦した内容などを、忘れないためにもこのブログにメモしていくつもりなので、気になったらご参照ください。

 

datsusara-susume.hatenablog.com

 

 

以上。 

(不明点あればコメント頂ければ、可能な限りお答えします。)

 

 

 

 

日本一周中に訪問したダムの中で「好きなダム10選」:観光編

f:id:shibatty:20200925140551j:plain

はてなブログ10周年特別お題「好きな◯◯10選

2018年にひたすらダムを回って日本一周をやってました。

その中でもダムにあまり興味ない人でも「お~」となるような観光に良いダムで好きなダムを10基選んでみたので、気になる方はご覧ください。

富山県にある「黒部ダム」は省きました。あそこは別格です。さすが世界の黒部。

(北から順に紹介しています。)

 

 

 

 

目次

 

1.豊平峡ダム(北海道)

f:id:shibatty:20211103182322p:plain

豊平峡ダム

【所在地】北海道札幌市南区定山渓7区

【管轄・特徴】国交省管轄の多目的アーチダム

【観光ポイント】黒部ダムに似て、電気バスでダムまで行き、道内唯一の大規模アーチダムからの観光放流を拝むスタイルな点。

正直、北海道は魅力的なダムが多いので迷いました・・・のでベターなところを上げました。

ロケーションは支笏洞爺国立公園内のため、駐車場から徒歩か専用電気バスでの移動となります。

道内唯一の大規模アーチダム、からの観光放流ということもあり、どこか黒部ダムを彷彿とさせられます。

渓谷の対岸には定山渓ダムが、そして渓谷のたもとには定山渓温泉街が広がるため、観光にはピッタリなロケーションかなと思います。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

2.湯田貯砂ダム(岩手県

f:id:shibatty:20211103181204p:plain

湯田貯砂ダム(錦秋湖大滝)

【所在地】岩手県和賀郡西和賀町

【管轄・特徴】国交省管轄の下流湯田ダム用の貯砂ダム。

【観光ポイント】湯田貯砂ダム(錦秋湖大滝)のライトアップが綺麗な点。

七色に光る錦秋湖大滝のライトアップが魅力的です。

筆者はまだライトアップ時期に訪れたことがないので、コロナが開けたら是非ライトアップを拝見したいです。

また、ライトアップだけではなく、水量がちょうどいいときだけ、この滝の裏側を歩くことができるので、それもまたレアな体験ができて良いと思います。

ダムカードも配布しているので、是非。

 

sightseeing.jrnets.co.jp

f:id:shibatty:20211103180530p:plain

 

 

 

 

 

3.寒河江ダム山形県

f:id:shibatty:20211103175954p:plain

寒河江ダム

【所在地】山形県西村山郡西川町

【管轄・特徴】国交省管轄の多目的ロックフィルダム

【観光ポイント】日本一高く上がる噴水が上がる点、国道沿いにありアクセスがしやすい点。

国道112号線沿い、噴水の高さ112m、ダム移転家屋数112戸、竣工式H2年11月2日、となぜか「112」に強い執着のあるダムです。

噴水は隔時間00分に約15分ほど噴射しているので、是非見ていってください。あと隣接売店で玉こんにゃくも忘れずに。

レペゼン西川町。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

4.品木ダム(群馬県

f:id:shibatty:20211103175053p:plain

品木ダム

【所在地】群馬県吾妻郡中之条町

【管轄・特徴】国交省管轄の発電兼水質改善の重力式コンクリートダム

【観光ポイント】草津温泉街にある、酸性河川を中和する体験ができる点。

酸性河川を中和した際にできる中和沈殿物を堰き止め、中和した水を下流に流すという特殊な役割をしているため、是非訪れて中和体験をして頂きたいダム(正確には、環境体験アミューズメント)です。

すぐ上流が草津温泉街なので、観光に迷ったら是非選択肢に。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

 

 

 

5.奥只見ダム新潟県

f:id:shibatty:20211103172822p:plain

奥只見ダム

【所在地】新潟県魚沼市×福島県南会津郡檜枝岐村

【管轄・特徴】J-POWER管轄の発電用の重力式コンクリートダム

【観光ポイント】重力式コンクリートダムの中では国内最大級であり、新潟県福島県の県境のかなり秘境なところにある点。

通称、「新潟のラストダンジョン」。

奥只見シルバーラインという、車だけが通行可能な22Kmもある手彫りトンネルを突き進むのも良し、対岸から遊覧船で訪れるのも良し。

その秘境っぷりには息をのむでしょう、非日常を感じさせられる良きダムです。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

6.殿ダム(鳥取県

f:id:shibatty:20211103170909p:plain

殿ダム

【所在地】鳥取県鳥取市国府

【管轄・特徴】国交省管轄の多目的ロックフィルダム

【観光ポイント】階段状の洪水吐と、白い土石で作られた珍しく美しいダムという点。

とにかく形状の珍しさと美しさがポイントです。「平成のピラミッド」と称するだけあり美しいダムなので、是非その目で見てみてください。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

 

 

 

7.湯原ダム(岡山県

f:id:shibatty:20211103170231p:plain

湯原ダム

【所在地】岡山県真庭市

【管轄・特徴】県管轄の発電用兼治水用の重力式コンクリートダム

【観光ポイント】ダム直下に、露天風呂「砂湯」がある点。

このロケーション自体がかなりレアです。一応混浴です。タオル、水着等は必須ですので気を付けましょう。(ダム天端から思いっきり見えます。。。)

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

8.温井ダム広島県

f:id:shibatty:20211103163010p:plain

温井ダム

【所在地】広島県山県郡安芸太田町

【管轄・特徴】国交省管轄の多目的用アーチダム

【観光ポイント】まずは規模がアーチダムの中で黒部ダムに次いで大きい点。もう一つは、写真のように放流口のそばまで行ける点。

これ、放流してなくてもダムがでかいので圧が半端ないです。この大きさのダムをこんな近くから見れるダムはそうそうないので、かかりレアな体験が可能です。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

 

 

9.豊稔池堰堤(香川県

f:id:shibatty:20211103155759p:plain

豊稔池

【所在地】香川県観音寺市大野原町

【管轄・特徴】土地改良区管轄の農業用兼治水用のマルチプルアーチダム

【観光ポイント】国内で2基しかないマルチプルアーチダムの中で、完成が昭和5年という最古のダムであったりと、国指定の重要文化財となっている点。

かなりレアなダムなので、存在している間に拝見しておきたいダムです。

非公式ですが、ダムカードも配布しています。(2018年時点)

ちなみにですが、ちゃっかりアニメの「結城友奈は勇者である」シリーズとコラボしてます。

 

 

datsusara-susume.hatenablog.com

 

 

10.大山ダム(大分県

f:id:shibatty:20211103154017p:plain

大山ダム

【所在地】大分県日田市大山町

【管轄・特徴】水資源機構管轄の上水兼治水用の重力式コンクリートダム

【観光ポイント】進撃の巨人」作者の諫山創さんゆかりの地となっている模様で、2020年に下記記事

www.nikkei.com

のような登場人物の像が設置されているという点。ダムを巨大な壁と見立て、それに立ち向かう図、はまさしく劇中のシーンを彷彿とさせられます。

ダムカードも配布しているので、是非。

 

datsusara-susume.hatenablog.com

 

 

 

 

最後に

いや、魅力的なダムが多すぎて10基に絞るの難しいですね・・・

上記のダムは各々の理由でダム入門者にはピッタリかと思います。

観光地に悩んだ際は、近くに上記ダムがあればぜひ訪れてみてください。

ダムはいいぞ~

 

 

 

 

【PHP】【HTML5】【JavaScript】CSVダウンロード機能実装方法2種(環境依存文字対応)

f:id:shibatty:20210727223110j:plain

2021.9.4 (2021.10.28 追記)

社内システムをWEB(LAMP構成)で作っているのですが、その中で実装したい機能をコーンディングしている際にハマったところや、そもそも便利だと思った機能についてメモ的に書いて残していくシリーズです。

 

今回は環境依存文字に対応したCSVダウンロード機能です。

データベースにあるデータをCSVデータとして抜いて、別システムなどで使用すること多いですよね。

CSV出力の方法環境依存文字の対応の方法はそれぞれ多様なやり方があるのですが、ここではわかりやすくシンプルな方法(またの名を力技)を伝えていきます。

(社内の仕様変更もあり、以前お伝えした方法では実装が不可能になりましたので、新たに別の方法で実装した例を追記しました。おそらくこちらの方が汎用性は高いかなと。)

 

 

 

目次

 

0.構築環境

・さくらVPNメモリ:1GB、CPU:2コア、SSD:100GB)

 ※有料契約

 ※ハードがどのような環境でも構築手順は大きく変わりません

 

LinuxOS:Ubuntu18.04

 ※最新は20.04ですが、何故かSSL化がうまくいかなかったので、

  個人的に実績がある18.04を選定しました

 

Apache:2.4

MySQL:5.7

PHP:7.2

 

今回はLinux(Ubuntu18.04)で行うため、LAMP構成の構築が前提条件となります。

LAMP構成の構築は下記過去記事を参照ください。

(Ubuntu20.04でも基本的にインストール方法は変わりません。)

 

datsusara-susume.hatenablog.com

 

 

 

 

手法1.セッション+PHPの機能でCSV出力

ただ決められたデータをCSV出力するだけなら、こちらの方が実装は楽です。

ⅰ.データベース→CSVデータ作成

データベースからデータを引っ張ってきて、それをCSV形式のデータに加工する手順です。

※データベース操作ロジックの記述側

※DB接続は省略

 

※以下のテーブルを例とします

ID NAME KANA
1001 田中 タナカ
1002 鈴木 スズキ
1003 佐藤 サトウ

 

①ヘッダ部の作成(以下、例)

$csvstr = '';
$csvstr += '"ID", "名前", "フリガナ"'."\n";

 

見ての通り、無理やりCSVデータを作る感じで、ヘッダの最後に改行コード(\n)を入れています。

ヘッダ名はテーブルのヘッダ名を持ってきてもいいですが、そのままだと使用者がわからないと思うので分かり易い日本語名で出力したいという仕様です。

 

②データ部の作成(以下、例)

while($row = $prepare->fetch()){
  <画面表示ロジック>
 $csvstr += '"'.$row['ID'].'", "'.$row['NAME'].'", "'.$row['KANA'].'"'."\n";
}

 

コツとしては、画面表示ロジックと一緒に、欲しいデータを「$row」で検索結果をキャッチさせるということ。

「while」で対象行分回して「$csvstr」のCSVデータにどんどん連結させていく感じです。 

データベースから引っ張ってくるだけでなく、この時点で付随させたいデータも混ぜることができます。

(カラム数が多いと大変ですけどね・・・)

配列をCSV化する関数等ありそちらの方がスマートですが、力業は色々小細工ができる点、好きです。

 

例えばこの時点で変数の中身を見ると次のようなデータになっています。

"ID", "名前", "フリガナ"(改行コード)

"1001", "田中", "タナカ"(改行コード)

"1002", "鈴木", "スズキ"(改行コード)

"1003", "佐藤", "サトウ"(改行コード)

 

CSVデータを出力するたの小細工

$_SESSION['csv'] = $csvstr;

 

セッションに作成したCSVデータを格納します。

次項のCSVダウンロード機能の際に、このセッションに格納したデータを引っ張ってくる流れです。

セッションであればクラス(ファイル)が変わっても共通して参照できるデータスペースなので、スマートじゃないですが困ったらここですね・・・。

 

 

 

ⅱ.CSVダウンロード機能(環境依存文字対応)

作成したCSVデータをダウンロード(出力)する機能の作成手順です。

今回はリンク付きボタンを作成し、リンク先にCSVダウンロード機能を記述する流れを取ります。

 

①ブラウザにダウンロードロジックのリンクを作成(一例)

<button onclick="location.href='./csvdl.php'">CSV出力</button>

f:id:shibatty:20210911173651p:plain

 

同じディレクトリに「csvdl.php」ファイルを作り、その中にダウンロードロジックのphp構文を記述するというやり方です。

CSV出力というボタンをクリックすると、先ほど作ったCSVデータの中身がCSVデータとしてダウンロードされます。

 

CSVファイルダウンロード機能

$filename = strval(time()).'csv'; //ファイル名

//出力情報の設定
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename={$filename}');
header('Content-Transfer-Encoding: binary');

//CSV出力用データをセッションから取得
$csv = $_SESSION['csv'];

//環境依存文字対応のCSVファイル出力
echo pack('C*', 0xEF, 0xBB, 0xBF).$csv;

return;

 

よく”UTF-8”コードに変換して出力するやり方を見ますが、CSVExcelで開くと強制的に"SJIS"コードに変換される仕様で文字化けします・・・

どちらにせよ、コードを気にするのであれば、「pack()」関数を利用してBOM(Byte Order Mark)という符号をデータの先頭に付与すれば、文字コードの悩みは少なくなると思います。

ちなみに、データを開くと、「BOM付きUTF-8」という形式で表示されます。

 

pack()関数の詳細は、こちらPHPのリファレンスマニュアルを参考にしてください。

 

 

 

手法2.JavaScriptでスマートに出力

今回は、対象行に☑されたデータをCSV出力する流れを紹介します。

この☑されたデータを云々ロジックは、CSV出力のみならず色々な要望に汎用的に組み合わせられると思います。

ⅰ.データベース→CSVデータ作成

データベースからデータを引っ張ってきて、それをCSV形式のデータに加工する手順です。

※データベース操作ロジックの記述側

※DB接続は省略

 

※以下のテーブルを例とします(手法1と同じ)

ID NAME KANA
1001 田中 タナカ
1002 鈴木 スズキ
1003 佐藤 サトウ

 

①ヘッダ部の作成(以下、例)

$csvstr = '"ID", "名前", "フリガナ"'."\n";
<input id="csv0" type="hidden" value="'.$csvstr.'" />

 

見ての通り、無理やりCSVデータを作る感じで、ヘッダの最後に改行コード(\n)を入れています。

ヘッダ名はテーブルのヘッダ名を持ってきてもいいですが、そのままだと使用者がわからないと思うので分かり易い日本語名で出力したいという仕様です。

今回はこれを、フォームの隠し要素である<input type="hidden" />を利用し、「画面には表示されないが裏でデータを持っている」、という状態にするというコツを使います。

 

②データ部の作成(以下、例)

<?php
//検索件数
$res = $prepare->rowCount();
//ボタン(引数に検索件数を引き渡す)
$csvstr += '<button onclick="csvdl('.$res.')">CSV出力</button>';

$i = 1;
$printstr = ""; //画面に表示させる内容

$printstr += '<table>'; //テーブル
//ヘッダ
$printstr += '<tr><td>選択</td><td>ID</td><td>名前</td><td>カナ</td></tr>';

//明細はループ文で一緒に加工する
while($row = $prepare->fetch()){ //画面表示ロジック

//CSVで出したいデータ
 $csvstr = $row['ID'].', '.$row['NAME'].', '.$row['KANA]."\n";

//明細
//隠し要素(画面には表示されない)
$printstr += '<td><input id="csv'$i'" type="hidden" value="'.$csvstr.'" /></td>';
//チェックボックス
$printstr += '<td><input id="check'$i'" type="checkbox" /></td>';
//ID
$printstr += '<td>'.$row['ID'].'</td>';
//名前
$printstr += '<td>'.$row['NAME'].'</td>';
//カナ
$printstr += '<td>'.$row['KANA'].'</td>';
 $printstr += '</tr>'
$i += 1; }
$printstr += '</table>'
//画面出力
print($printstr);
?>

 

欲しいデータを「$row」で検索結果をキャッチ。

「while」で対象行分回す中に、①と同様この画面表示ロジックと合わせて、<input type="hidden" />のフォーム隠し要素を利用し、対象行一行一行に対して、このinput-hidden を付与してあげます

正確には以下の通りです。

コツとしては、各行のフォームに対して、フォームのIDをループを利用して連番で付与してあげるということですね。

 

あとは手法1で述べた通りで、データベースから引っ張ってくるだけでなく、この時点で付随させたいデータも混ぜることができます。

(カラム数が多いと大変ですけどね・・・)

配列をCSV化する関数等ありそちらの方がスマートですが、力業は色々小細工ができる点、好きです。

 

例えばこの時点で画面表示データを見ると、次のようなデータになっています。

各行の見えないところに、input-hidden で指定した値が格納されている寸法です。

f:id:shibatty:20210911173651p:plain

選択 ID 名前 かな
1001 田中 タナカ
1002 鈴木 スズキ
1003 佐藤 サトウ

 

 

ⅱ.CSVダウンロード機能(環境依存文字対応)

作成したCSVデータをダウンロード(出力)する機能の作成手順です。

今回はリンク付きボタンを作成し、かつ、各行に付けたチェックボックスに☑されたデータに対してCSVダウンロードする、という機能を記述します。

 

①ブラウザにダウンロードロジックのリンクを作成(一例)

<button onclick="csvdl(res);">CSV出力</button>

f:id:shibatty:20210911173651p:plain

 

同じディレクトリに「<javascript>」の関数(ここでは、csvdl()という関数)を用意し、クリック時にその関数で全て処理させるという流れです。

CSV出力というボタンをクリックすると、先ほど作ったCSVデータのうち、チェックボックスに☑された対象データのみCSVデータとしてダウンロードされます。

ここでは「res」という引数を渡していますが、詳細は以下の通りです。

 

CSVファイルダウンロード機能

<script>
  //CSV出力
  function csvdl(res){
    // コピー対象をJavaScript上で変数として定義する
    var copyStr = document.getElementById('csv0').value;
    var rowCount = res;
    var i = 1;
    
//1行ずつ見ていき、チェックが入っていた行のCSVデータを連結させていく for (i; i < rowCount; i++){ if(document.getElementById('check'+i).checked){ copyStr = copyStr + document.getElementById('csv'+i).value; } } // Dateオブジェクトを作成 var date = new Date() ; // UNIXタイムスタンプを取得する (ミリ秒単位) var a = date.getTime() ; //ダウンロードするCSVファイル名を指定する var filename = "csvdate_" + a + ".csv"; //BOMを付与する(Excelでの文字化け対策) const bom = new Uint8Array([0xef, 0xbb, 0xbf]); //Blobでデータを作成する const blob = new Blob([bom, copyStr], { type: "text/csv" }); //IE10/11用(download属性が機能しないためmsSaveBlobを使用) if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(blob, filename); //その他ブラウザ } else { //BlobからオブジェクトURLを作成する const url = (window.URL || window.webkitURL).createObjectURL(blob); //ダウンロード用にリンクを作成する const download = document.createElement("a"); //リンク先に上記で生成したURLを指定する download.href = url; //download属性にファイル名を指定する download.download = filename; //作成したリンクをクリックしてダウンロードを実行する download.click(); //createObjectURLで作成したオブジェクトURLを開放する (window.URL || window.webkitURL).revokeObjectURL(url); } }
</script>

 

このスクリプトを、</body>の手前に書いてあげます。

上記は手順1の「pack()」関数を利用してBOM(Byte Order Mark)という符号をデータの先頭に付与したやり方の、JavaScript版になります。

ちなみに、データを開くと、こちらもちゃんと「BOM付きUTF-8」という形式で表示されます。

この☑が入っていたら○○する、という要望は多々あるので、このロジックのほうが応用が利きます。

 

 

3.最後に

結局のところ、要望の実装にあたって数学パズルのようなところがあるので、そのアルゴリズムがバチっと閃いたときは超絶快感ですね!

コツはループと配列添え字の使い方です。

 

プログラム脳の鍛え方も紹介していますので、こちらも是非。

datsusara-susume.hatenablog.com

 

以上。 

(不明点あればコメント頂ければ、可能な限りお答えします。)

 

 

 

 

【バイクで行くダム巡り】2021.10.2:ほぼタダで奈良田を楽しむ裏技+ゆるキャン△聖地巡礼(西山ダム)【ストリートスクランブラー】

f:id:shibatty:20211016174238p:plain

緊急事態宣言が開けました。

ということで、ZX-6Rを駆る友達とゆるキャン△2シーズンの主に奈良田方面を聖地巡礼した話になります。

余談ですが、早川、奈良田で使えるクーポンを利用すると、ほぼタダで遊ぶ裏技があるので、その手もご紹介します。

もちろん、ダムにも行きますよ!

※動画は鋭意作成中

 

ちなみに日本一周時、及び1年前の紅葉時にも訪れているので、こちらもチェックしていただくとより良さがわかるかと思います。

datsusara-susume.hatenablog.com

 

datsusara-susume.hatenablog.com

 

ダムカード配布場所情報について、変更になる場合がありますので、

実際に訪問の際は国交省のページ、または各ダム管理所の

ホームページよりご確認ください。

 

※また、現在コロナ対策でダムカードの配布方法が異なっているケースがあります。各ダム管理所のホームページなどで確認してから訪問することをお勧めします。(執筆時現在)

 

 

 

目次

 

1.裏技

さっそく裏技を紹介します。

早川町にある観光協会南アルプスプラザ)で、対象箇所で利用できる2000円の宿泊クーポン、または500割引きクーポン2枚当日のみ有効)が貰えます。

f:id:shibatty:20211016182244p:plain

f:id:shibatty:20211016182322p:plain

必要なのは身分証明書のみです。

これをうまく利用すると、ほぼタダで遊べるわけですね。

実は2021年7月10日~開始されたキャンペーンなので、いつ終わるかはわかりませんが、記事を書いている2021年10月2日現在ではまだ利用可能です。

これから紅葉シーズンですので、行こうかな?と思っている方は是非参考にしてみてください。

一応観光案内所の場所を以下に貼っておきます。

早川上流方面に行くのであれば南アルプス沿いにあるので、わかりやすいかと思います。

f:id:shibatty:20211016182120p:plain

 

 

2.西山ダム(山梨県

西山ダムの位置はこの辺りです。

 

(8:00)

まずは友人との待ち合わせ場所「道の駅みのぶ」で朝飯を食らいます。

早川富士川へ合流するポイントなので、沼津からだとちょうどいいストップポイントです。

f:id:shibatty:20211016182503p:plain

 

(9:15)

友人と合流してから、まずは早川町観光協会にクーポンを貰いに行きます。

f:id:shibatty:20211016182120p:plain

 

貰ったらそのまま南アルプスを早川に沿って遡上していきます。

奈良田はその最終地点ですね。

奈良田の手前に西山ダムがある位置感です。

 

途中いくつか発電所が見えます。

しかし、いい感じで晴れましたね。

紅葉していたら最高です。

f:id:shibatty:20211016201629p:plain

 

去年訪れた際は、この映像がオレンジか赤に染まっていたわけですね。

f:id:shibatty:20211016202547p:plain

去年のやつ(2020年11月末時点)です、参考に。

f:id:shibatty:20201201223904j:plain

 

奈良田の奥ほうで行っているリニアを通す工事の関係で、かなり頻繁にトラックが往来している点は注意が必要かもです。

(抜いても抜いても何十台とトラックが走ってるので、ここは諦めてゆっくり行きましょう。)

f:id:shibatty:20211016204240p:plain

 

そんなこんなで西山温泉街を抜けていくと・・・

f:id:shibatty:20211016204436p:plain

 

(10:30)

西山ダム

f:id:shibatty:20211016174238p:plain

f:id:shibatty:20211016210547p:plain

f:id:shibatty:20211016204743p:plain

山梨県企業局の発電用ダムのようです。

しかし、何回訪れてもダム湖が奇麗ですよね。

もう優勝です。

 

ここはダムカードが配布されています。

 

<西山ダムの情報>

型式・・・重力式コンクリート

目的・・・P*1

堤高・・・40.6m

堤長(幅)・・・112.3m

総貯水量・・・2,400千㎥

 

 

 

3.ゆるキャン△聖地巡礼

本題に入ります。

この西山ダムの目と鼻の先ですが、さらに奥に進んだ先が一般車が行ける最終地点、奈良田になります。

奈良田のシーンは、アニメ2期の8話後半の内容になります。

 

(11:30)

ここは志摩リンが到着した駐車場ですね。カメラワークは逆になります。

f:id:shibatty:20211016211237p:plain

f:id:shibatty:20211017173324p:plain

 

志摩リンとなでしこ姉が遭遇した場所ですね。カメラワークはもう少し引きです。

f:id:shibatty:20211016211446p:plain

f:id:shibatty:20211017173429p:plain

 

アニメでの時系列では前後しますが、なでしこ姉が寄った温泉、女帝の湯です。

アルカリ質で日本で3番目、東日本で1番目にヌルヌルするそうです。

ちなみに、入浴料550円ですが、先ほどのクーポンを使うと50円で入浴できます。(マジで)

f:id:shibatty:20211016215658p:plain

f:id:shibatty:20211017173815p:plain

 

ちなみに、ここからダムがいい感じに見えますし、実は湯船からもダムを望めます

ダム好きにはたまらんポイントですね。

f:id:shibatty:20211016215905p:plain

 

(12:30)

アニメでは時系列が前後しますが、志摩リンとなでしこ姉が最初によったところ。

f:id:shibatty:20211016215406p:plain

f:id:shibatty:20211017173605p:plain


作中ではえごまチーズケーキを注文していたので、私も同じものを。

えごまのプチプチ感がいいアクセントになっていていGoodです。

セットで頼んだ自家製焙煎珈琲もチーズケーキの甘さと合って最高です。

f:id:shibatty:20211016215503p:plain

ちなみにちょうど12時頃に訪れていておなかがすいていたので、併せて昼食もここで取りました。このあとにデザートでえごまチーズケーキを食した流れです。

写真は自家製ベーコンのピザ自家製タバスコです。

このタバスコがめっちゃおいしかった!

鹿肉のシチューなどジビエ料理もありました。

f:id:shibatty:20211016215533p:plain

ちなみにここでも先ほどの500円クーポンが利用できます。

えごまチーズケーキが450円なので、ケーキ分はタダに。

ということで、このピザ代ぐらいしかお金を使っていないという最強のツーリングに。

 

アニメでは8話でも近くを散策しており雨畑ダム等訪れておりますが、我々は次の目的地に行くべく早々に下山します。

(13:30)

 

(15:30)

目的地は・・・

アニメの時系列がだいぶズレますが、志摩リンが奈良田温泉に到着するカット直前にある、なでしこが富士宮鉄板焼き屋に訪れるシーンのところですね。

f:id:shibatty:20211016220010p:plain

f:id:shibatty:20211017173102p:plain

時間も時間だったので、劇中のシーンほど混んでなかったですが、3組ほど待ち状態でした。

 

例の五目しぐれ焼きです。

なるほど、広島のお好み焼きに近いんですね。

ただ、こちらのほうが面が太麺のモチモチ麵なので、個人的にはこちらのほうが好きです。(700円~800円)

f:id:shibatty:20211016220112p:plain

f:id:shibatty:20211017175312p:plain

はい、優勝です。
先ほども優勝したので、これで2冠ですね。

 

 

 

4.おまけ

(17:30)

先ほどの富士宮鉄板焼き屋、お持ち帰りもできるのです。

なので、富士宮焼きそばをお持ち帰りして、ビールでさらに優勝してみました。

f:id:shibatty:20211016220204p:plain

このツーリングで実質2000円ほどしかお金を使っていないという。

今秋は奈良田で決まりでしょ。

久々に完璧なツーリングをしました。3冠

 

 

 

【バイクで行くダム巡り】2021.9.19:聖地巡礼+伊豆ツー+BBQで優勝した話(奥野ダム)【ストリートスクランブラー】

f:id:shibatty:20211006204846p:plain

緊急事態宣言中ですが、県内ということで。

聖地巡礼→ダム視察→城ケ崎でBBQし優勝した話です。

※動画は鋭意作成中

 

ダムカード配布場所情報について、変更になる場合がありますので、

実際に訪問の際は国交省のページ、または各ダム管理所の

ホームページよりご確認ください。

 

※また、現在コロナ対策でダムカードの配布方法が異なっているケースがあります。各ダム管理所のホームページなどで確認してから訪問することをお勧めします。(執筆時現在)

 

 

 

目次

 

1.聖地巡礼

9月19日はラブライブ!サンシャイン!!桜内梨子ちゃん誕生日!!

沼津在住のため、まずは内浦へ向かい聖地を流そうかと。

 

まずは淡島・・・を眺めながら走ります。

f:id:shibatty:20211006202453p:plain

 

三津シーパラダイス・・・も眺めながら走ります。

f:id:shibatty:20211006202813p:plain

 

そのまま通りすぎ、オーモス!へ。

f:id:shibatty:20211006202941p:plain

 

この時期は極早生ミカンが旬ですね。

f:id:shibatty:20211006203052p:plain

これで300円、安い。

デザートにいただきます。

 

三浦観光案内所

f:id:shibatty:20211006203328p:plain

f:id:shibatty:20211006203456p:plain

実は翌々日はルビィちゃんの誕生日でもあるため、同時に祝うとしましょう。

f:id:shibatty:20211006203637p:plain

 

左手に三津海水浴場、右手に安田屋旅館、を流します。

f:id:shibatty:20211006203843p:plain

 

このまま県道130号線伊豆長岡三津線を伊豆方向へ曲がり、第2の目的地へ向かいます。

 

 

2.奥野ダム(静岡県

奥野ダムの位置はこの辺りです。

伊豆長岡からは、県道12号線伊東修善寺を使い、奥野ダムへ向かいます。

f:id:shibatty:20211006204746p:plain

気持ちいいワインディングが続きます、最高。

 

奥野ダム

f:id:shibatty:20211006204846p:plain

奥野ダム

f:id:shibatty:20211006204949p:plain

松川湖

ここは日本一周時にも訪れていますので、そちらも参照いただくとありがたみです。

 

datsusara-susume.hatenablog.com

 

静岡県管轄の多目的ダムのようです。

ダム湖外周はランニングや散策で利用する人が多いらしいです。

当日も、中学生や小学生の部活動でランニングされていました。

 

ここはダムカードが配布されていますが、当日は緊急事態宣言中で配布中止となっていました。

 

<奥野ダムの情報>

型式・・・ロックフィル

目的・・・F*1 N*2 W*3 

堤高・・・63.0m

堤長(幅)・・・323.0m

総貯水量・・・5,150千㎥

 

 

 

3.伊豆高原・城ケ崎海岸

奥野ダムの後は集合場所の道の駅伊東マリンタウンへ。

f:id:shibatty:20211006210653p:plain

 

集合の後に伊豆高原にある城ケ崎海岸へ向かいます。

f:id:shibatty:20211006210806p:plain

思ったより観光客がいましたね・・・

きんk  まあいいか。

向こうに離島が見えますね、離島旅もまたいずれやりたいものですね。

 

ひとしきり楽しんだ後は・・・

f:id:shibatty:20211006210925p:plain

カイザーベルクでBBQ、優勝です!!

酒類の提供はないので注意

 

 

 

4.おまけ

帰りは伊豆スカイラインを通りましたが・・・

f:id:shibatty:20211006211849p:plain

f:id:shibatty:20211006211940p:plain

夕日に照らされる富士山駿河湾、控えめに言って最高でした。

先ほど優勝したので、これで2連覇ですねっ

映像はないですが、伊豆スカは駿河湾相模湾の両方望めるので、走ってて気持ちいいです!

※有料道路です

 

 

 

*1:洪水対策

*2:河川維持

*3:上水用

【Scratch】現役プログラマが考える、プログラミング脳のつくり方・鍛え方

4/21】キッズのためのやさしいプログラミングイベント | CANVAS | 遊びと学びのヒミツ基地

2021.9.14 

(プログラミング初心者向け)

2020年度から小中高の授業でプログらミングを扱っていくようで、しかも大学の入試試験にも一般科目で出題されるらしい。

また、副業フリーランスとしてのプログラマもよく見るようになり、この日本社会においては今プログラミングスキルを求める人が多くなっている気がします。

 

ただし、「プログラミングスキル」は「ロジカル思考力」が身についてから活きてくるスキルであり、一般的にこの思考力を「プログラミング脳」と呼んでいます。

つまり、プログラミングができるようになりたかったら、まずはこの「プログラミング脳」を作らないと始まらないということです。

スポーツで例えるなら、プログラミング脳=筋力のような関係で、まずは筋トレから!といった感じです。

 

そこで今回は、プログラミングを教える立場にいた経験をもとに、プログラミング初心者の方向けに、プログラミング脳のつくり方や鍛え方を述べていこうという内容です。

※人によって差があり、ロジカル思考が最初からできる人と、どれだけやってもできない人がいます。ですので、誰でもプログラミングができるわけではありません・・・

 

 

 

目次

 

0.プログラミング(プログラミング言語)とは

そもそもプログラミングとは、コンピュータにしてもらいたいことを書き並べることで、いわばコンピュータに対する指示書のようなものを書く作業と言えます。

この指示書の書き方といったものがプログラミング言語になってきます。

ですので、書いてある指示書の内容は、どのプログラミング言語でも変わりません。

指示する場面に合った言語を取捨選択しているに過ぎない、という感じです。

 

コンピュータはというと、実際のところ指示書を上から順に実行しているだけです。

ですので、「コンピュータにしてもらいたいこと」に対して、そのスタートからゴールまで順序立てて指示書を記載する能力が、「ロジカル思考力(プログラミング脳)」となります。

 

指示内容が複雑になるにつれて指示の仕方も複雑になってくるのですが、その内容をどこまで順序だてて書き起こせるかという能力度合いがプログラミング脳の力となります。

ですので、プログラミング脳が鍛えられてくると、より複雑な指示書が書けるようになる、といった感じと私は捉えています。

 

その最終形がプログラマなのかな?と。

 

次項から、プログラミング脳のつくり方と鍛え方について述べていきます。

 

 

 

1.プログラミング脳のつくり方

順序だてて物事を考える力を身に着けること、が大切になってきます。

手始めに行うといいと思うのが、「数学パズル」と呼ばれるものです。

順序だてて考えないと解けない数学のパズルなので、これをやりまくれば自ずと身に着くと思います。

最近だと「プログラミング脳を鍛える数学パズル」という、ピンポイントな代物もあるので、これらをいくつか解いてみるといいでしょう。

 

 

 

 

2.プログラミング脳の鍛え方

より実践的なプログラミング脳へ近づけるためには、実際にプログラミングに触れるのが早いと思います。

が、いきなりガチガチにコードを書くのはハードルがめちゃくちゃ高い・・・

このギャップが多くの人を苦しめてきた感があります。

 

しかし、最近だと教育系でよく目にするのが「Scratch」というアプリケーションです。

プログラミングで言ういわゆる文法条件分岐とか、ループ文とか)をパズルのブロックのようにして、パズルを組み合わせるようにしてプログラムを作る「ブロックプログラミング」と呼ばれる代物です。

Obnizの時にこのブロックプログラミングに触れた際、「これめちゃくちゃ初心者にわかりやすいな」と感じたので、ここでもオススメします。

要は、プログラミング言語特有の”クセ”がなく、ロジカルに文法のパズルを組み合わせていくだけで動作するので、純粋にロジカルな思考力を鍛え磨いていけます。

 

datsusara-susume.hatenablog.com

 

以下がScratchのサイトで、一応Web上でも動作するので、実際試しに何か作ってみると分かり易いと思います。

サイトは、こちらより飛んでいけます。

 

以下が、そのサイトのトップページです。

上部ヘッダの「作る」から、実際のコーディングができます。

f:id:shibatty:20210914182518p:plain

 

最初に起動すると「チュートリアル」が見れます。

自信のない人は一度見ると良いでしょう。

f:id:shibatty:20210914192454p:plain

 

以下画面が実際の起動した様子です。

コード」のタブから文法のパズルを選び、組み合わせて指示書を書き、この右のネコ?のような生き物を動かしたり変化させたりして遊びながらプログラミング脳が鍛えられるわけです。

f:id:shibatty:20210914192626p:plain

 

色々弄って遊んでみてください。

地味に楽しい・・・(笑い)

(もし面白そうなのが作れたら動画載せておきます。)

 

 

 

3.最後に(プログラマに必要なもの)

ブロックプログラミングでもある程度複雑な処理ができるようになったら、あとは”言語”そのものに触れて言語の”クセ”を理解すれば、プログラマへの扉が見えてきます。

ブロックプログラミングの各ブロックを、各々のプログラミング言語で書き換えてあげるというイメージですね。

そこまで行けるようになったらプログラマです、やったね!

 

ドメインは、下記バナーのお名前ドットコムで契約するか、さくらVPS利用であればそのままさくらインターネットよりドメインを契約するのが手っ取り早いです。

個人的に、お名前ドットコムが安いのでオススメです。

 

以上。 

(不明点あればコメント頂ければ、可能な限りお答えします。)