• 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で作れるといいね」

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

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

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

このエントリーをはてなブックマークに追加

エイチが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ