<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>koeki MAILのemail操作</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../jdmain.css">
<script type="text/javascript" src="../jdinit.js"></script>
<style>
p{
font-size: 1.1rem;
margin-bottom: 10px;
}
.program{color: White; background-color: black; font-size:20px; margin-bottom: 1em; }
td{
text-align: center;
font-weight: bold;
padding: 20px;
}
th{
text-align: left;
font-weight: bold;
padding: 20px;
}
.red{
color: rgb(255, 70, 70);
font-size: 1.6rem;
}
.orengi{
position: relative;
background: linear-gradient(transparent 40%, #ffc58f 40%);
}
.explain{
font-size: 1.3rem;
padding-top: 10px;
padding-bottom: 30px;
margin: 0 auto;
line-height: 1.7;
font-size: 1.2rem;
}
h3{
font-size: 1.4rem;
color: orange;
margin-bottom: 30px;
margin-top: 30px;
}
.icon{
margin-left: 40px;
margin-top: 30px;
margin-bottom: 30px;
}
.black{
background-color: black;
color: white;
}
.csv-inner-li{
padding: 5px;
font-size: 1.2rem;
list-style: none;
text-align: center;
}
.csv-li{
list-style: decimal;
text-align: left;
font-size: 1.2rem;
}
.explain-list{
color: #000;
}
.explain-list:hover{
color: blue;
}
.comment{
color: greenyellow;
}
.blue{
color: rgb(0, 255, 255);
}
.program{color: White; background-color: black; font-size:20px; margin-bottom: 1em; }
@media screen and (max-width: 746px){
p{
font-size: 0.8rem;
}
.red{
font-size: 1.2rem;
}
.explain{
font-size: 1.0rem;
padding-bottom: 30px;
}
h3{
font-size: 1.2rem;
margin-bottom: 20px;
margin-top: 20px;
}
.icon{
margin-top: 20px;
margin-bottom: 20px;
}
li{
padding: 4px;
font-size: 1.0rem;
}
.section-title::before{
background-image: none;
vertical-align: baseline;
content: '';
position: absolute;
bottom: -20px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: rgb(255, 153, 0);
}
.section-title::after{
display: none;
}
.csv-li{
font-size: 0.8rem;
}
}
</style>
</head>
<body>
<header id="header">この部分は header.html に置き換わる</header>
<div class="wrapper">
<h1 class="section-title">koeki MAIL(RainLoop)のemail操作</h1>
<section class="csv-list">
<ol class="csv-ol">
<a href="#first-setting" class="explain-list">
<li class="csv-li">初期設定(パスワードと個人情報設定)</li>
</a>
<a href="#receive-operation" class="explain-list">
<li class="csv-li">受信操作</li>
</a>
<a href="#create-send" class="explain-list">
<li class="csv-li">本文作成と送信操作</li>
</a>
<a href="#refile" class="explain-list">
<li class="csv-li">分類操作(リファイル)</li>
</a>
</ol>
</section>
<section id="first-setting">
<h2 class="section-title">初期設定(パスワードと個人情報設定)</h2>
<h3>emailパスワード設定[<a href="../info/koeki-mail-file/mailpasswd.m4v">解説動画</a>]</h3>
<p class="explain">最初に利用するときにemail専用のパスワードを付け、同時にメイルボックスを 開設する必要がある。情報教室端末にログイン後、<span class="red">C-2</span>を押し<span class="red">kterm</span>に切り替えて以下のようにコマンド起動する。</p>
<pre class="program">% mailpasswd</pre>
<p class="explain">これに対し、「システムログインパスワード」を入れたあとで emailのパスワードを2回入力する。過去にMew(別のemailリーダ) を利用していた場合は以下のメッセージが出る。</p>
<pre class="program">Mewと併用し独立使用できるWebMail専用箱を作りますか?(y/N):</pre>
<p class="explain">引続きMewも利用したい場合のみ y を入力する(そうでない場合あるいは初めての方はそのまま[Enter])。</p>
<img src="../info/koeki-mail-file/rainloop-login.jpg" alt="ログイン画面">
<p class="explain">設定完了したら、ブラウザで koeki MAIL のURL<a href="https://www.koeki-prj.org/mail/"></a>にアクセスし、自分のemailアドレスと設定したパスワードを入れる。入れない場合は最初の <span class="red">mailpasswd</span> コマンドによるパスワード設定をやりなおす。</p>
<h3>個人情報設定</h3>
<img src="../info/koeki-mail-file/rainloop-usermenu.jpg" alt="ユーザーメニュー">
<p class="explain">ログインできたら右上のプルダウンメニューから「設定」を選ぶ。左にある「全般」を選び以下の必要事項を適切に設定する。</p>
<blockquote>
<table border="1" width="500" height="100">
<tr>
<td>表示名</td>
<th><span class="orengi">クリックしてさらに出てきた表示名に自分の氏名を正確に入れる。</span> 最下段の下の大きな枠には、 最初の行に "-- " (ハイフン2個とスペース1個)を入れ、2行目以降に 所属と氏名を入れる</th>
</tr>
<tr>
<td>メール形式</td>
<th>0プレーンテキスト (「Html」のままだと相手によっては読めずに 迷惑となる場合がある)</th>
</tr>
<tr>
<td>1ページに表示する件数</td>
<th> 自由だが50程度が見やすい</th>
</tr>
</table>
</blockquote>
<p class="explain" style="background-color: #f5f4f4;border: #000 solid 1px;margin-top: 10px;padding-left: 10px;">
表示名の例:<br>
-- <br>
東北公益文科大学 ??年<br>
XX部 代表 公益太郎</p>
<p class="exprlain"><span class="orengi">設定が終わったら「←戻る」ボタンで基本画面に戻る。</span></p>
</section>
<section id="kouzou">
<h2 class="section-title">CSVの構造について</h2>
<p class="explain">CSV形式は複数のフィールドをフィールドごとに<span class="red">カンマ（,）</span>で区切り、
１レコードを１行におさめたテキストファイル形式となっています。</p>
<h3 class="kouzou-h3">使うときのルール</h3>
<ol>
<li class="csv-inner-li" style="list-style: decimal; text-align: left; margin-left: 30px;font-weight: bold;">数値はそのまま書く</li>
<li class="csv-inner-li" style="list-style: decimal; text-align: left; margin-left: 30px;font-weight: bold;">文字列はそのまま、もしくはダブルクォート（”）で囲む</li>
</ol>
<h3>例として</h3>
<ul style="border: yellowgreen 2px solid; padding: 10px; margin-bottom: 30px;">
<li class="csv-inner-li" style="font-weight: bold;">Hello(文字列)</li>
<li class="csv-inner-li" style="font-weight: bold;"> １２３(整数)</li>
<li class="csv-inner-li" style="font-weight: bold;">４５６（文字列）</li>
<li class="csv-inner-li" style="font-weight: bold;">Hello,World(文字列)</li>
</ul>
<p class="explain">という内容のCSVファイルを作るときに
<span class="orengi">Hello,123,”456”,”Hello, World” </span>と表します。<br>
この場合Hello,Worldにカンマがついています。<br>
<span class="red">空白文字かカンマがある場合必ずダブルクォートで括りましょう。</span>
</p>
<p class="explain"><span class="orengi">He said “Hello”.</span> という文にはダブルクォート（”）が入っています。<br>
この文を入れてCSVファイルを作るときは
<span class="orengi">”He said ””Hello””.” </span>と表します。<br>
このように<span class="red">文字列自身にダブルクォートが含まれるときはダブルクォートを重ねて</span>表します。</p>
<h3>例</h3>
<blockquote>
<table border="1" width="500" height="100">
<tr>
<th>名前</th>
<th>電話番号</th>
<th>住所</th>
<th>職業</th>
</tr>
<tr>
<td>公益太郎</td>
<td>000-0000-0000</td>
<td>山形県</td>
<td>学生</td>
</tr>
</table>
</blockquote>
<div class="icon"><i style="color: rgb(0, 183, 255);" class="fas fa-angle-double-down fa-4x"></i></div>
<div class="black">
<p style="text-align: center;">名前,電話番号,住所,職業<br>
酒田太郎,000-000-000,山形県,学生</p>
</div>
</section>
<section id="library">
<h2 class="section-title">CSVライブラリについて</h2>
<p class="explain">CSVライブラリとはRubyで使えるCSVファイルを使ってあらゆることを行えるようにする便利道具のようなものです。<br>
<span class="orengi">CSVファイルの「読み込み」「書き込み」「１行変換」「全データの繰り返し処理」などを行えます。</span></p>
<h3>CSVファイルの読み込み①</h3>
<p class="explain">CSV ファイルからデータを読むには <span class="red">CSV.read</span> メソッドを使います。</p>
<h4>使い方</h4>
<p><span style="color: blue;">data(変数)</span> = <span class="red">CSV.read</span>(csvファイル名)</p>
<p>これを使うとdataという変数に各行の各フィールドごとに配列化したものがさらに配列化されて入る。</p>
<div class="black">
<p style="padding-left: 20px;">建物名,住所,電話番号<br>
羽黒山 五重塔,山形県鶴岡市羽黒町手向,000-000-000<br>
加茂水族館,山形県鶴岡市今泉字大久保,999-999-999<br>
</p>
</div>
<p class="red">↓このようなCSVファイルをCSV.readで読み込むと配列の配列が返る
</p>
<div class="black">
<p style="padding-left: 20px;">[["建物名", "住所", "電話番号"],<br>
["羽黒山 五重塔", "山形県鶴岡市羽黒町手向", "000-000-000"],<br>
["加茂水族館", "山形県鶴岡市今泉字大久保", "999-999-999"]]
</p>
</div>
<h3>CSVファイルの読み込み②</h3>
<p>CSV.readを使うときはCSV ファイルの1行目の見出しを
<span class="orengi">キーとして値を取り出せる形式</span>で読んだ方が使いやすい。
</p>
<p>キーとして値を取り出すとは？
</p>
<p style="background-color: black; color: white;">連想配列名 = {キー名1 => バリュー1, キー名2 => バリュー2, キー名3 => バリュー3}
</p>
<p class="explain">配列に似ているが配列が要素を指定するのに「0」から始まる添字を使用するのに対し、<br>
<span class="orengi">添字に「キー」と呼ばれる任意の文字列を指定して「バリュー」と呼ばれる要素を指定する。</span>
</p>
<p class="explain">このようなものを<span class="red">Hash</span>と言います。</p>
</section>
<section id="Hash">
<h2 class="section-title">Hashをもっと深く知ろう！</h2>
<h3>Hashの例</h3>
<div class="black">
<p style="margin-left: 100px;">
menu = {<br>
<br>
"そば" => "300円", <br>
"ケーキ" => "500円", <br>
"ハンバーグ" => "800円"<br>
}<br>
print menu["そば”]<br>
lunch = "ハンバーグ"<br>
print menu[lunch]
</p>
</div>
<p style="color: orange; font-weight: bold;">出力結果</p>
<p style="font-weight: bold;">300円<br>
800円
</p>
<p class="explain">このように、Hashでは<span class="orengi">添字が番号ではなく指定したキーとなっている。<br>要素を取得する際も、キーを指定することでセットになっている値(バリュー)を取得する。</span>
</p>
<h4 style="font-size: 1.2rem;">▶CSV.readでCSVファイルを読み込むときは<span style="color: blue;">青い部分を付け足すことでHash化させることができる</span></h4>
<p style="background-color: black; color: white; padding-left: 30px;">data = CSV.read("shonai.csv", <span style="background-color: blue;">:headers => true</span>)
</p>
<p class="explain">そばは300円である。」というように「そば」と「300円」という２つの言葉が関連付いているときにHashを使うととても便利。
</p>
</section>
<section id="read-use">
<h2 class="section-title">CSV.readを使ったプログラムを書いてみよう！</h2>
<p class="explain"><span class="orengi">今回作るのはCSV.readを使った観光スポットを検索するプログラムです。</span></p>
<p class="explain">今回使うファイルは<span class="red">shonai.csv</span>と<span class="red">kankou.rb</span>です。</p>
<h3>shonai.csv</h3>
<div class="black">
<p style="margin-left: 100px;">
建物名,住所,特徴<br>
羽黒山 五重塔,山形県鶴岡市羽黒町手向,羽黒山参道、東北北地方では最古の塔といわれている。,<br>
白山島,山形県鶴岡市由良2丁目,"由良海岸のシンボルである島。",<br>
加茂水族館,山形県鶴岡市今泉字大久保657-1,約1万のミズクラゲがいる「クラゲドリームシアター」がある。,<br>
庄内観光物産館 ふるさと本舗,山形県鶴岡市布目字中通80-1,庄内地方をはじめとするお土産を数多く取り揃えている。,<br>
酒田米菓（オランダせんべいFACTORY）,山形県酒田市両羽町2-24,オランダせんべいＦＡＣＴＯＲＹではその工程を見学できる。,<br>
丸池様,山形県飽海郡遊佐町直世荒川５７,水深3.5メートル、湧き水だけで満たされた池。,<br>
山居倉庫,山形県酒田市山居町1-1-20,庄内のシンボルである山居倉庫。,<br>
道の駅「とざわ」高麗館,山形県最上郡戸沢村蔵岡黒淵3008-1,韓国風の外観が特徴の戸沢村にある道の駅。,
</p>
</div>
<p class="explain">このcsvファイルを読み込んで取り出していくプログラムを書いていく。</p>
<h3>kankou.rb</h3>
<pre class="program">
<span class="blue">require</span> 'csv'<span class="comment"># CSVライブラリ読み込み</span>
data = CSV.read("shonai.csv", :headers => true)<span class="comment">#観光スポット一覧で使うcsvファイル読み込み</span>
<span class="blue">while</span> true
puts "1 観光スポット一覧"
puts "0 終了"
print "どれかひとつ選んでください => "
input=gets.to_i<br>
<span class="blue">if</span> input == 0 then <span class="comment">#もしinputが0だったとき</span>
break <span class="comment">#終了する</span>
<span class="blue">elsif</span> input == 1 then <span class="comment">#もしinputが1だったとき</span>
<span class="comment">#↓行ごとに取り出す</span>
n = 0
data.each{|row| <span class="comment"># rowには1行ずつ値が入り繰り返される</span>
printf("%d: %sとはどんなところ？\n", n+=1, row["建物名"])
printf("住所 => %s \n特徴 => %s \n",row["住所"], row["特徴"])
print("--------------------------\n") }<span class="comment">#仕切りの機能（何個あってもいい）</span>
<span class="blue">else</span>
print "1/0から選んでください\n"
<span class="blue">end</span>
<span class="blue">end</span>
</pre>
<p style="color: green; font-size: 1.5rem; font-weight: bold;text-align: center;margin-top: 40px;">実際にプログラムを動かしてみてね！どう動いたかな？</p>
</section>
<section id="pg">
<h2 class="section-title">CSVファイルへの書き込み</h2>
<p class="explain">書き込みには<span class="red">CSV.open</span>メソッドを使う。</p>
<div class="black">
<p style="margin-left: 30px;">CSV.open(<span style="color: greenyellow;">ファイル</span>, <span style="color: greenyellow;">モード</span>) do |<span style="color: greenyellow;">変数</span>|<br>
:<br>
: (<span style="color: greenyellow;">変数</span> << によってファイルの中に書き込む処理)<br>
:<br>
end</p>
</div>
<p class="section-text">
書き込む際は、CSV.open メソッドにファイル書き込みオプション <span class="orengi">"w" または "a" </span>などを与えて行なう。
</p>
<h3>書き込みオプションの主な例</h3>
<ul style="border: yellowgreen 2px solid; padding: 10px; margin-bottom: 30px;">
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"r"<br>読み込みモードで開く。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"r+"<br>読み書きモードで開く。ファイルを読み込む場合 先頭から読み込み始める。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"w"<br>書き込み(新規作成)モードで開く。既存のファイルは0バイトに クリアされる</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"w+"<br>読み書きモードで開く。既存のファイルは0バイトにクリアされる。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"a"<br>書き込みモードで開く。ファイルが既に存在する場合は ファイルの終わりから開始し、なければ新規に作成する。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"a+"<br>読み書きモードで開く。ファイルが既に存在する場合は ファイルの終わりから開始し、なければ新規に作成する。</li>
</ul>
<p>中身が空のCSVファイル「sample.csv」があったとします。</p>
<h3>そのときこのようなプログラムを書くと...</h3>
<div class="black">
<p style="margin-left: 30px;">require 'csv'<br>
CSV.open("sample.csv", "w") do |sample| <span style="color: greenyellow;"># csv変数に値を追加すればよい</span><br>
sample << ["name", "phone-number"] <span style="color:greenyellow;"># << で1行ぶんの配列を指定する</span><br>
sample << ["yamada", "000-0000-0000"]<br>
sample << ["ito", "111-1111-1111"]<br>
sample << ["saito", "222-2222-2222"]<br>
sample << ["sasaki", "333-3333-3333"]<br>
end</p>
</div>
<div class="icon"><i style="color: rgb(0, 183, 255);" class="fas fa-angle-double-down fa-4x"></i></div>
<div class="black">
<p style="margin-left: 30px;">name,phone-number<br>
yamada,000-0000-0000<br>
ito,111-1111-1111<br>
saito,222-2222-2222<br>
sasaki,333-3333-3333</p>
</div>
<h3>このようにCSVファイルの中に書き込まれる。書き込みの時も数値はそのまま書く。文字列はそのまま、もしくはダブルクォート（”）で囲む</h3>
<p>プログラムの解説<br>
1行目: 「csv」ライブラリを指定<br>
2行目: 「csv」ライブラリのopenメソッドで「sample.csv」ファイルを開く<br>
3行目～7行目: CSVデータを書き込み</p>
</section>
<p style="color: green; font-size: 1.5rem; font-weight: bold;text-align: center;margin-top: 40px;">CSVライブラリを使ってプログラムの幅をどんどん広げていこう！！</p>
</div>
<footer id="footer">この部分は footer.html に置き換わる</footer>
</body>
</html>
ItoRino