slide20200529.txt

class: center, middle


# XFREEは意外と便利



---
### 自己紹介

@basictomonokai

.left[![img](https://i.imgur.com/a3ataoO.jpg)]

* .red[非エンジニア]
* 趣味でプログラミング（ＪＳ、ＧＡＳあたり）
* 元はBASIC界隈の人（低レベル）


---
### １．XFREEとは

* エックスサーバーが運営するレンタルサーバー


<img src="https://i.imgur.com/vFnXk5I.jpg">

---
###２．XFREEの良い点

* 無料

* ３種類が一度に借りれる

> 1. HTML　…　使ってます
> 1. PHP+MySQL（PHPMyAdmin)　…　使ってます
> 1. WordPress　…　使ってない

* WEB版ファイルマネージャ（基本認証設定可）
* FTP利用可

---
###３．XFREEの良くない点（多分）

* レガシー

> 1. 非SSL(HTTPのみ）　…　地味に痛い
> 1. ターミナルなし　　…　めんどくさい
> 1. ComposerやGit Cloneとかできない　…　めんどくさい

* スマホだと広告入る

> 1. PHP+MySQL
> 1. WordPress

* 登録画面で住所まで必須

---

* 3種類の説明

> <img src="https://i.imgur.com/nAdJ30w.jpg" style="border: solid 1px #000" width="45%">


---
### 4．何につかってるのか(HTML)


> <img src="https://i.imgur.com/HVMpNxy.gif" width="60%">


---

#### .red[電子書籍端末kobo touch用Web画面]

* ハードオフでジャンク1000円で買ったkobo touch
* kobo touch用メインメニュー

> <img src="https://i.imgur.com/Gu6p7Tn.jpg" style="border: solid 1px #000" width="20%">


* 各メニュー毎のWEB画面
* Web画面のformからCGI的にGoogle Apps ScriptのAPIを呼び出し

---

### 補足
あまりにプログラミングと関係が薄いのでGASの話を補足


---

### 補足

### GASとは（１）

### .red[Google Apps Script(GAS):Google提供のスクリプト環境]

1. .blue[Googleのサービスと連携できる]
1. .blue[外部API経由で連携できる（LINE,Slack等）]
1. .blue[WEBアプリケーションも作れる]
1. 日、曜日、時間、時間毎等を指定して.red[トリガー機能]で実行できる（バッチ処理）
1. 上限はあるが.red[無料] [https://docs.google.com/macros/dashboard#quota-limits](https://docs.google.com/macros/dashboard#quota-limits)

---

### 補足

### GASとは（２）

1. .red[サーバー不要]
1. 開発環境の.red[セットアップが不要]（ブラウザーのみ）
1. JSベースのスクリプト言語
1. V8エンジンを今年ついに採用
1. 一番簡単なFaaS

---
### 補足

### GASのエディター画面

> <img src="https://i.imgur.com/xaSrMSy.jpg" width="50%">


---
### 補足

終わり

---

### 4．何につかってるのか(HTML)の続き



【前提】kobo touchのブラウザはとても機能が低い

* サーバー側の基本認証設定⇒ブラウザ側でid,pass画面が表示不可
* JSのalert⇒ブラウザでダイアログ表示不可
* JSのfetch通信、ajax通信⇒ブラウザ無反応

そこで以下の仕組みにした
* Google Apps Scriptでwebapi作成
* htmlのフォームからcgiとして動かす

---

### 4-1．作ったもの

* kobo touchで「メモ追加」ボタンを押す

  ⇒Googleスプレッドシートを更新

* 「メモ一覧」ボタンを押す

  ⇒Googleスプレッドシートを読込、最新10件表示

※JSを極力利用しない作りとした

---

### 4-2．コードの例（メモ追加 HTMLの一部）

* メモ追加画面のHTMLフォーム


```html:add.html
<h1>GASメモ</h1>
  <form action="https://script.google.com/macros/s/xxxxx/exec" method="get">
    <p>password：<input type="password" name="pass" size="20" /></p>
    <p>件名：<input type="text" name="namae" size="20" /></p>
    <p>内容：<br><textarea name="naiyo" cols="40" rows="4"></textarea></p>
    <p><input type="submit" name="submit" value="送信" /></p>
  </form>
```

---

### 4-3．コードの例（メモ追加 GASの一部）

* GASのWEBAPI ※GAS側のWEBアプリケーション許可設定必要


```javascript:add.gs
function doGet(e) {
  var p = e.parameter;
  var passx = p.pass;
   
  if (passx != "kobo") {
    return ContentService.createTextOutput('Password NG\n戻るボタンを…');
  }

  var files = DriveApp.getFilesByName('gaskobomemo');
  if (files.hasNext()) {
    var spreadsheet = SpreadsheetApp.open(files.next());
    var sheet = spreadsheet.getSheets()[0];
    sheet.appendRow([p.namae,p.naiyo]);
  }  

  return ContentService.createTextOutput('MEMO added\n戻るボタンを…');
}
```




---
### 5．何につかってるのか(PHP+MySQL)


> <img src="https://i.imgur.com/qUCZsOQ.jpg" style="border: solid 1px #000" width="30%">


---

#### .red[個人用PHPツール]

* マークダウンノートやRSSリーダー、ファイル管理、CMS等

> <img src="https://i.imgur.com/lEgihS6.jpg" style="border: solid 1px #000" width="60%">


* PHPの資産は多い
* 基本認証と組み合わせて利用
* 今はPHPのサイトの方がHTMLより軽い
* 今はただアップロードしてCSS少しいじって動かしてるだけ


---

### 6．まとめ

#### .red[微妙な点もあるがXFREEは使える]

* 簡単なHTML＋CSS＋JSページなら十分
* PHPも7.1なのでそこそこ使え、実験には十分
* MySQLの勉強もできる

---
class: center, middle

### おしまい