2017.11.29
WEB

Swiftとバグバグ〜Kitura〜

IBMが公開しているWebフレームワークKituraを使うと
Swiftでサーバーサイドプログラムを実装できるようになります。
今回はSwiftとKituraを用いた簡単なサーバーサイドプログラムを
日々大量のバグを生み出し続けるWebプログラマー「エイチ」と
バグが大好物なエイチのペット「バグバグ」とともに実装してみます。

バグバグ　「zzz zzz zzz」

エイチ　　「バグバグ　ねぇ　バグバグ　起きなよ
　　　　　　Swiftでサーバーサイドプログラムを作ってみるよ」

バグバグ　「！！」

エイチ　　「Swift Package Managerでプロジェクトを作るよ」

カチャカチャッ　タンッ！


$ mkdir TryKitura
$ cd TryKitura
$ swift package init --type executable

エイチ　　「作成されたプロジェクトのディレクトリ構造はこんな感じだよ」


TryKitura
├── Package.swift
├── Sources
│   └── main.swift
└── Tests

エイチ　　「Kituraフレームワークをパッケージに追加しよっと
　　　　　　Package.swiftを修正するよ」

カチャカチャッ　タンッ！


import PackageDescription

let package = Package(
    name: "TryKitura",
    dependencies: [
        .Package(url: "https://github.com/IBM-Swift/Kitura.git", majorVersion: 1, minor: 3),
        .Package(url: "https://github.com/IBM-Swift/HeliumLogger.git", majorVersion: 1, minor: 3),
        .Package(url: "https://github.com/IBM-Swift/Kitura-MustacheTemplateEngine.git", majorVersion: 1, minor: 1),
        .Package(url: "https://github.com/IBM-Swift/Kitura-StencilTemplateEngine.git", majorVersion: 1, minor: 4),
    ]
)

エイチ　　「まずは文字列を表示してみよっと
　　　　　　main.swiftを修正するよ」

カチャカチャッ　タンッ！


import Foundation

import Kitura
import HeliumLogger
import KituraMustache
import KituraStencil
import Stencil

HeliumLogger.use()

let router = Router()

router.get("/") {
    request, response, next in
    response.send("Hello, bugbug!")
    next()
}

Kitura.addHTTPServer(onPort: 8090, with: router)

Kitura.run()

エイチ　　「ビルドしてWebブラウザで確認してみよう
　　　　　　URLはhttp://localhost:8090でぇ〜」

カチャカチャッ　タンッ！


$ swift build
$ .build/debug/TryKitura

h_161227-0001

エイチ　　「表示されたね
　　　　　　今度はテンプレートエンジンを使ってみよっと
　　　　　　MustacheとStencilってのがあるんだ
　　　　　　変数や配列の値の表示と条件分岐、ループをやってみるよ
　　　　　　main.swiftにビューで使う情報とルーティングを書くよ」

カチャカチャッ　タンッ！


import Foundation

import Kitura
import HeliumLogger
import KituraMustache
import KituraStencil
import Stencil

HeliumLogger.use()

let router = Router()

router.get("/") {
    request, response, next in
    response.send("Hello, bugbug!")
    next()
}

// ビューで使う情報
let context: [String: Any] = [
    "variableString": "文字列",
    "variableArray": ["A", "B", "C"],
    "variableDictionary": [
        ["key": "value1"],
        ["key": "value2"],
        ["key": "value3"],
    ],
    "variableBool": true,
]

// mustache確認ページのルーティング
#if !os(Linux)
router.setDefault(templateEngine: MustacheTemplateEngine())
router.get("/mustache") { request, response, next in
    defer {
        next()
    }
    try response.render("mustache", context: context).end()
}
#endif

// stencil確認ページのルーティング
router.add(templateEngine: StencilTemplateEngine())
router.get("/stencil") { request, response, next in
    defer {
        next()
    }
    try response.render("stencil.stencil", context: context).end()
}

Kitura.addHTTPServer(onPort: 8090, with: router)

Kitura.run()

エイチ　　「ビューファイルはViewsディレクトリに置くよ」


TryKitura
├── Package.swift
├── Sources
│   └── main.swift
├── Tests
└── Views
    ├── mustache.mustache
    └── stencil.stencil

エイチ　　「Mustacheのビューファイルmustache.mustacheはこうだよ」

カチャカチャッ　タンッ！


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mustache</title>
</head>
<body>
    {{! 変数の出力 }}
    <div>
        <p>{{ variableString }}</p>
        <p>{{ variableArray.first }}</p>
        <p>{{ variableArray.last }}</p>
        <p>{{ variableArray.count }}</p>
    </div>

    {{! 分岐 }}
    <div>
        {{# variableBool }}
            <p>フラグON</p>
        {{/ variableBool }}
        {{^ variableBool }}
            <p>フラグOFF</p>
        {{/ variableBool }}
    </div>

    {{! ループ }}
    <div>
    {{# variableDictionary }}
        <p>{{ key }}</p>
    {{/ variableDictionary }}
    </div>
</body>
</html>

エイチ　　「Stencilのビューファイルstencil.stencilはこうだよ」

カチャカチャッ　タンッ！


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stencil</title>
</head>
<body>
    {# 変数の出力 #}
    <div>
        <p>{{ variableString }}</p>
        <p>{{ variableArray.first }}</p>
        <p>{{ variableArray.last }}</p>
        <p>{{ variableArray.count }}</p>
    </div>

    {# 分岐 #}
    <div>
    {% if variableBool %}
        <p>フラグON</p>
    {% else %}
        <p>フラグOFF</p>
    {% endif %}
    </div>

    {# ループ #}
    <div>
    {% for value in variableDictionary %}
        <p>{{ value.key }}</p>
    {% endfor %}
    </div>
</body>
</html>

エイチ　　「よしっ　ビルドしてWebブラウザで確認してみるよ
　　　　　　MustacheのURLはhttp://localhost:8090/mustacheでぇ〜
　　　　　　StencilのURLはhttp://localhost:8090/stencilでぇ〜」

h_161227-0002

h_161227-0003

エイチ　　「サーバーサイドもSwiftで作れるといいね」

エイチ　　「お待たせ　バグバグ　ソースコード　全部お食べ」

バグバグ　「バグバグ　バグバグ　バグバグ」

エイチ　　「美味しかったろうバグバグ」

2017.11.29

Swiftとバグバグ〜両替問題〜

エイチ
システムちーむ / Webエンジニア
エイチです。エイチはWebプログラマーです。エイチはキーボードをタイプするのが好きです。エイチはいつもカチカチやってます。エイチはカチカチすると心地いいです。エイチはカチカチしすぎてバグを生み出します。エイチはバグバグと友達です。エイチはバグバグにバグをバグバグしてもらいます。エイチはバグバグが大好きです。エイチでした。