djangoでログイン機能を実装する

djangoでwebアプリを開発し始めたました。今回はログイン機能を実装したのでまとめます。

参考文献はこちらです。

appの概要

ログインページ→ログインする→appのトップページという設計です。

ログイン機能を実装するにあたってあまり必要ないですが「数式とそのtexコマンドが一発で確認できる」という、いうなればtexの数式チートシートです。app名は「RAKURAKUtex」です。

ログイン機能の実装

accountsアプリの作成

appがあるディレクトリにいき、以下を実行します。

python manage.py startapp accounts

1	python manage.py startapp accounts

他のアプリ作成時同様、myapp/setting.pyに以下を追記する。

ログインするためのurlとログアウトのurl、リダイレクト先のurl（ログイン後に飛んだ先のurl）もここで設定してしまいましょう。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
　　　　　・・
　　　　　・・
    'accounts', # 追加
]



####こちらも追記
LOGIN_URL = 'accounts/login/'
LOGOUT_URL = 'accounts/logout'
LOGIN_REDIRECT_URL = '/cms/book/'

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

　　　　　・・

'accounts', # 追加

]

####こちらも追記

LOGIN_URL = 'accounts/login/'

LOGOUT_URL = 'accounts/logout'

LOGIN_REDIRECT_URL = '/cms/book/'

URLの設定

myapp/urls.pyに以下を追記します。

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    ・・・
　　　　　　　　・・・
    url(r'accounts/', include('accounts.urls')), # 追加
]

urlpatterns = [

url(r'^admin/', admin.site.urls),

・・・

url(r'accounts/', include('accounts.urls')), # 追加

]

次にaccountsディレクトリ内にいき、新たに以下の内容で「urls.py」を作成します。

from django.conf.urls import url
from django.contrib.auth.views import login,logout


urlpatterns = [
 url(r'^login/$', login,
 {'template_name': 'accounts/login.html'},
 name='login'),
 url(r'^logout/$', logout, {'template_name': 'accounts/logged_out.html'}, name='logout')
]

from django.conf.urls import url

from django.contrib.auth.views import login,logout

urlpatterns = [

url(r'^login/$', login,

{'template_name': 'accounts/login.html'},

name='login'),

url(r'^logout/$', logout, {'template_name': 'accounts/logged_out.html'}, name='logout')

]

templatesの作成

accountsディレクトリ内に、templatesディレクトリを作成。さらにそのtemplatesディレクトリ内にaccountsディレクトリを作成。そしてその中でlogin.htmlを以下の内容で作成する。

{% extends "admin/base.html" %} {# ① #}

{% block content %}

{% if form.errors  %}
  <div class="alert alert-danger" role="alert">
    <p>Your usernamne and password didn't match. Please try again.</p>
  </div>
{% endif %}

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title text-center">Log-in to mysite</h3>
  </div>
  <div class="panel-body">
    <form action="{% url 'login' %}" method="post" role="form">
      {% csrf_token %}
      <div class="input-group" style="margin-bottom:10px">
        <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
        <input id="id_username" name="username" type="text" value="" maxlength="256" placeholder="Username" aria-describedby="sizing-addon1" autofocus required/> {# ② #}
      </div>
      <div class="input-group" style="margin-bottom:10px">
        <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
        <input id="id_password" name="password" type="password" value="" maxlength="256" placeholder="Pasword" aria-describedby="sizing-addon1" required/> {# ② #}
      </div>

      <button type="submit" style="margin-bottom:-20px"><i class="fa fa-sign-in">Login</i></button>
      <input name="next" type="hidden" value="{{ next }}"/> {# ③ #}
    </form>
  </div>
</div>
{% endblock %}

{% extends "admin/base.html" %} {# ① #}

{% block content %}

{% if form.errors %}

<p>Your usernamne and password didn't match. Please try again.</p>

</div>

{% endif %}

<h3 class="panel-title text-center">Log-in to mysite</h3>

</div>

{% csrf_token %}

<input id="id_username" name="username" type="text" value="" maxlength="256" placeholder="Username" aria-describedby="sizing-addon1" autofocus required/> {# ② #}

</div>

<input id="id_password" name="password" type="password" value="" maxlength="256" placeholder="Pasword" aria-describedby="sizing-addon1" required/> {# ② #}

</div>

<button type="submit" style="margin-bottom:-20px"><i class="fa fa-sign-in">Login</i></button>

<input name="next" type="hidden" value="{{ next }}"/> {# ③ #}

</form>

</div>

{% endblock %}

ディレクトリ構造は→accounts/templates/accounts/login.html　となります。

ログアウトページのtemplatesも同様に作成します。accounts/templates/accounts内にlogged_out.htmlを以下の内容で作成します。

{% extends "admin/base.html" %}

{% block title %}ログアウト{% endblock title %}

{% block content %}

    <h3 class="page-header">ログアウトしました</h3>

{% endblock content %}

{% extends "admin/base.html" %}

{% block title %}ログアウト{% endblock title %}

{% block content %}

<h3 class="page-header">ログアウトしました</h3>

{% endblock content %}

以上で実装は完了です。試してみましょう。

実際に動かす

http://127.0.0.1:8000/accounts/login/にアクセスします

ログインをクリックすると、

RAKURAKUTeXのページ（settings.pyで指定したリダイレクト先のurl）に行きます。

試しにログアウトも動くかどうか確認します。

http://127.0.0.1:8000/accounts/logged_out/にアクセスします

うまく動いているようです。しかしこれだとログアウトをwebアプリから直接できるわけではないので、ログアウトページを作成しただけになります。ログアウトの機能も作ったらまた更新します。

記事が役に立ったらシェア！

MEAN(Mongodb,Express,Angular,Node)スタック環境構築を試そう。だがしかし…

スポンサードリンク

MEAN スタックを使ってwebアプリを開発していこうと思います。なお今回対象とするOSはmacosです。

今回は手始めとして、MEANスタックの開発環境構築から。

これがまた長かった笑

1.node.jsのインストール

nodeのインストールにはhomebrewを用います。homebrewはあらかじめインストールしておいてください。

まずは、nodebrewをインストールします。

　
$ brew install nodebrew

1 2	$ brew install nodebrew

いろんなサイト見るとスムーズに行かれてる方が多いのですが、自分の場合はここでエラーが出ました。

nodebrew install エラーとググると、どうやらここでつまづく方もいるようで少し安心。

以下のコマンドで解決。

curl -L http://git.io/nodebrew  | perl - setup

1	curl -L http://git.io/nodebrew \| perl - setup

これを設定しないとhomebrewに対して、古いバージョンのnodebrewをインストールしてしまうらしい。

ここはこのサイトを参考にしました。

もう一回

$ brew install nodebrew

1	$ brew install nodebrew

でうまくいきました。

ついでにインストールがうまくいったかの確認は以下のコマンドでバージョンを確認できればOK

$ nodebrew -v

1	$ nodebrew -v

vX.X.X

vX.X.X

と先ほどインストールしたバージョンが表示されれば問題ないです。

次に、以下のコマンド

$ nodebrew install-binary latest

1	$ nodebrew install-binary latest

これで勝手に最新版をインストールしてくれます。違うバージョンをインストールしたい場合は、latestの部分をv.7.1.0みたいに指定すれば問題ないです。

次にインストールしたnode.jsのバージョンを有効にします。

$ nodebrew use  vX.X.X

1	$ nodebrew use vX.X.X

Xの部分に自分がインストールしたバージョンを入れてください。

$ nodebrew list

1	$ nodebrew list

でcurrentが上で指定したバージョンになって入ればOK

$ nodebrew list
v8.1.1

current: v8.1.1

$ nodebrew list

v8.1.1

current: v8.1.1

次に実行パスを通します。

$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bashrc

1	$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bashrc

~/.bash_profileも下記のように変更してください(すでに下のようになっている場合もあります)。

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

if [ -f ~/.bashrc ]; then

. ~/.bashrc

ここまで、終わったらターミナルを再起動して、nodeのバージョンを再確認してみてください。先ほど設定したバージョンなら問題ないです。

これでnode.jsのインストールは終わりです。

スポンサードリンク

2. AngularJSのインストール

まず、angularjsに必要なyeoman等をインストールします。

% sudo npm install -g yo bower grunt-cli gulp

1	% sudo npm install -g yo bower grunt-cli gulp

次にangularjsをインストール（少し時間がかかります）

% sudo npm install -g generator-angular-fullstack

1	% sudo npm install -g generator-angular-fullstack

こんだけ！

3, MongoDBのインストール

% brew update
% brew install mongodb
% ln -fs /usr/local/opt/mongodb/homebrew.mxcl.mongodb.plist ~/Library/LaunchAgents/
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist

% brew update

% brew install mongodb

% ln -fs /usr/local/opt/mongodb/homebrew.mxcl.mongodb.plist ~/Library/LaunchAgents/

launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist

上の三つのコマンドを順次実行してください。

これが終了したら、Mongodbが正常に動くか確認してください。

下記のコマンドで、起動

$/usr/local/bin/mongo

1	$/usr/local/bin/mongo

しかし以下のようなエラー。

MongoDB shell version v3.4.4
connecting to: mongodb://127.0.0.1:27017
2017-06-14T19:00:09.373+0900 W NETWORK  [thread1] Failed to connect to 127.0.0.1:27017 after 5000ms milliseconds, giving up.
2017-06-14T19:00:09.374+0900 E QUERY    [thread1] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed :
connect@src/mongo/shell/mongo.js:237:13
@(connect):1:6
exception: connect failed

MongoDB shell version v3.4.4

connecting to: mongodb://127.0.0.1:27017

2017-06-14T19:00:09.373+0900 W NETWORK [thread1] Failed to connect to 127.0.0.1:27017 after 5000ms milliseconds, giving up.

2017-06-14T19:00:09.374+0900 E QUERY [thread1] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed :

connect@src/mongo/shell/mongo.js:237:13

@(connect):1:6

exception: connect failed

色々調べると、権限が設定されていないということにたどり着く。

以下のコマンドで権限を設定し直します。

$ sudo chown -R mongod:mongod /var/lib/mongo

1	$ sudo chown -R mongod:mongod /var/lib/mongo

これでもう一回先ほどの起動コマンド。

/usr/local/bin/mongo
MongoDB shell version v3.4.4
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.4
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
	http://docs.mongodb.org/
Questions? Try the support group
	http://groups.google.com/group/mongodb-user
Server has startup warnings: 
2017-06-14T19:00:06.242+0900 I CONTROL  [initandlisten] 
2017-06-14T19:00:06.286+0900 I CONTROL  [initandlisten] ** WARNING: Access control is not enabled for the database.
2017-06-14T19:00:06.286+0900 I CONTROL  [initandlisten] **          Read and write access to data and configuration is unrestricted.
2017-06-14T19:00:06.286+0900 I CONTROL  [initandlisten] 
>

/usr/local/bin/mongo

MongoDB shell version v3.4.4

connecting to: mongodb://127.0.0.1:27017

MongoDB server version: 3.4.4

Welcome to the MongoDB shell.

For interactive help, type "help".

For more comprehensive documentation, see

http://docs.mongodb.org/

Questions? Try the support group

http://groups.google.com/group/mongodb-user

Server has startup warnings:

2017-06-14T19:00:06.242+0900 I CONTROL [initandlisten]

2017-06-14T19:00:06.286+0900 I CONTROL [initandlisten] ** WARNING: Access control is not enabled for the database.

2017-06-14T19:00:06.286+0900 I CONTROL [initandlisten] ** Read and write access to data and configuration is unrestricted.

2017-06-14T19:00:06.286+0900 I CONTROL [initandlisten]

うまく起動できました。

Mongodbを終了させるときはControl+cでオッケーです。

スポンサードリンク

4, プロジェクトの作成

必要なものはインストールし終わりましたので、いよいよプロジェクトを作成していきます。

適当にディレクトリを作成し、そのディレクトリに移動してください。

以下のコマンドでsプロジェクトを作成（初めての場合、かなり時間がかかります。）

yo angular-fullstack sample

1	yo angular-fullstack sample

色々と聞かれますが、全てエンターで問題ないです。

angularjs-fullstackのバージョンをアップデートします。

% sudo npm install -g npm-check-updates
% npm-check-updates -u
% npm install

% sudo npm install -g npm-check-updates

% npm-check-updates -u

% npm install

三つ目のコマンドは多少時間がかかります。

5. プロジェクトの起動

$grunt serve

1	$grunt serve

これで勝手にサーバーが立ち上がり、デフォルトのUIが表示されるはずが、

$ grunt serve
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

$ grunt serve

A valid Gruntfile could not be found. Please see the getting started guide for

more information on how to configure grunt: http://gruntjs.com/getting-started

Fatal error: Unable to find Gruntfile.

はい？ここにきて問題発生。

有効なGruntfleがないよと言われているが、Gruntfileって何ですか？って感じです。

もう少しでプロジェクトの開発が始められそうなんですが、今回は疲れたのでここまで。

原因がわかったらまた更新します。

記事が役に立ったらシェア！

GitHubに驚嘆した話　〜ドラッグアンドドロップの時代は終わったのか？〜

最近、アプリ開発を始め（まだゴミアプリしか作っていませんが笑）開発のソースコードとかをどう保存しようかと考えていたところ、多くのエンジニアや研究者の方が使っているGitHubを使ってみようと思いました。

GitHubとは？

簡単に言うとクラウド上にソースコードを保管するためのwebアプリケーションです。facebookやインスタグラムは写真をクラウド上で管理できるのに対し、GitHubはアプリ開発のソースコードとかを保存します。そして、GitHubを利用している全てのユーザーとそれを共有できます。なので、他の人が作ったソースコードとか、ダウンロードし放題です。世界中のエンジニアで知らない人はおそらくいないでしょう。

使い方の前に…

githubには専門の用語がたくさんあり、使いこなすにはそれらを理解しなければいけません。以下ではそれらを紹介していきます。

リポジトリ

ローカルリポジトリとリモートリポジトリの２種類があります。簡単に言うと、物（ファイル）を保管または製造する工場とその本社のイメージでしょうか。

管理したいディレクトリを入れておけば、そのディレクトリ内のファイルの変更記録とかを残せます。

2 .プッシュ

ローカルでファイルの編集をし、その作業内容をリモートリポジトリ（クラウド上）へを残すこと。工場での製造記録や発注記録を本社へ知らせるイメージでしょうか。

3. コミット

ファイルの追加や変更の履歴をローカルリポジトリに保存することです。工場で製造記録をまとめてから本社へ知らせるイメージ。本社へ知らせるにも工場内で誰かがそのための書類を作らなければいけませんね。なので、実際の流れはコミット（ローカル保存）→プッシュ（リモート保存）といった流れになります。

4. ブランチ

正直まだ理解できていないのですが、リリースした後のアプリとかをバージョンアップしながら、機能を新たに追加するときに変更記録を分岐した状態で残すことができるそうです。ここら辺は本格的にアプリ開発をしていかないと多分わからないです。すいません。

スポンサードリンク

GitHubの使い方　超初級（自分が機能を使い次第、追加していきます）

まず、github上でリポジトリを作ります。New repositoryのボタンで作れます。
その後ターミナル上で作業します。ターミナルでgithubと連携できるのが魅力的です。ディレクトリ内で以下のコマンドを実行することで、リポジトリ（ローカルリポジトリ）が作成されます。この時点ではGitHub の自分のアカウントには何も表示されません。

git init

git init

3. リポジトリに追加したいファイル（ソースコードとかの）を以下のコマンドで追加します。この時点では一時保存という扱いです。

git add ファイル名

1	git add ファイル名

4. そしてこのディレクトリに新たにファイルや、ディレクトリ等を追加した時の変更記録をリポジトリに以下のコマンドで記録します

git commit -m “追加したファイル名”

1	git commit -m “追加したファイル名”

5. そしてリモートリポジトリに変更記録を保存します。まずリモートリポジトリの情報の追加をします。本社へ送るにも本社の住所や連絡先を知らないと無理ですよね。以下のコマンドで実行します。

git remote add origin URL

1	git remote add origin URL

上のURLのところは、自分のGitHub上でNew repositoryのボタンを押すと次の画面に出てくる、リモートリポジトリのURLです。コピペしてください。

そして以下のコマンドで、ローカルリポジトリの変更記録をリモートリポジトリに保管できます。この作業を「pushする」と言います。

git push origin master

1	git push origin master

ここまでやってようやく、GitHub上で変更したディレクトリやファイルが確認できます。

まだまだ、色々使いかたがありますが超入門として今はここまでにします。追って更新していきます。

スポンサードリンク

記事が役に立ったらシェア！

swiftでiosのアプリを開発してみた

今回は、iosのアプリ開発をしたのでそれの説明をしようと思います。アプリの主な機能は

urlを読み込み、webページを表示させる
Segmented Controlを用いて３つのWebページを表示する機能
ネッワークエラー検出機能
ネットワークエラー検出時の表示ボックス

です。初心者なのでまだこの程度のものしか作れませんが、簡単なところから始めようと思います。ついでに今回はサッカーのチャンピオンズリーグとヨーロパリーグとリーガエスパニョーラのwebページを表示させてみようと思います。

ストーリボードの設定

以下にstoryboard を載せます。とはいっても、複雑な部品は配置していません。設置した部品は、

Segmented Control
Web View

の二つです。Segmented Control は「Show the Attributs inspector」→「Segmented Control」→「Segments」でカテゴリーを３つにするのを忘れないように。

スポンサードリンク

コードの説明

Segmented Controlの設定

以下に、取得したWebページをSegmented Controlと紐付けるコードを載せます。

  @IBAction func siteChoice(_ sender: UISegmentedControl) {
        
        // choose category
        switch sender.selectedSegmentIndex {
        case 0:
            taskCategory = "CL"
            let urlString = "http://jp.uefa.com/uefachampionsleague/"
            let urlRequest = URLRequest(url: URL(string: urlString)!)
            self.browserWebview.loadRequest(urlRequest)
        case 1:
            taskCategory = "EL"
            let urlString = "http://jp.uefa.com/uefaeuropaleague/"
            let urlRequest = URLRequest(url: URL(string: urlString)!)
            self.browserWebview.loadRequest(urlRequest)
        case 2:
            taskCategory = "LIGA"
            let urlString = "http://www.wowow.co.jp/sports/liga/"
            let urlRequest = URLRequest(url: URL(string: urlString)!)
            self.browserWebview.loadRequest(urlRequest)
        default:
            taskCategory = "CL"
        }
        
    }

@IBAction func siteChoice(_ sender: UISegmentedControl) {

// choose category

switch sender.selectedSegmentIndex {

case 0:

taskCategory = "CL"

let urlString = "http://jp.uefa.com/uefachampionsleague/"

let urlRequest = URLRequest(url: URL(string: urlString)!)

self.browserWebview.loadRequest(urlRequest)

case 1:

taskCategory = "EL"

let urlString = "http://jp.uefa.com/uefaeuropaleague/"

let urlRequest = URLRequest(url: URL(string: urlString)!)

self.browserWebview.loadRequest(urlRequest)

case 2:

taskCategory = "LIGA"

let urlString = "http://www.wowow.co.jp/sports/liga/"

let urlRequest = URLRequest(url: URL(string: urlString)!)

self.browserWebview.loadRequest(urlRequest)

default:

taskCategory = "CL"

}

 sender: any  のところを sender: UISegmentedControl　 とするのを忘れないでください。

1	sender: any のところを sender: UISegmentedControl　とするのを忘れないでください。

３つのWebページの配置にはswitch 文を用いています。case内の主な手順としては、

カテゴリーの宣言
urlString （letで定数指定）の中に表示させたいURLをぶち込む
urlをURLRequest型に変換。urlStringがoptinal 型なので、「！」をつける
Webviewのメソッドを呼ぶので、お決まりのselfで呼んであげて終わり。

ネットワークエラー検出

//アラートの表示
    func showAlert(_ message: String) {
        let alertController = UIAlertController(title: "Error", message: message, preferredStyle: .alert)
        let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil)
        alertController.addAction(defaultAction)
        self.present(alertController, animated: true, completion: nil)
    }
    
//nettowa-kuエラー時の検出と表示
    func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {
        if (error as! URLError).code == URLError.cancelled {
            return
        }
        self.showAlert("Network Error")
        self.browserWebview.stopLoading()
    }

//アラートの表示

func showAlert(_ message: String) {

let alertController = UIAlertController(title: "Error", message: message, preferredStyle: .alert)

let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil)

alertController.addAction(defaultAction)

self.present(alertController, animated: true, completion: nil)

}

//nettowa-kuエラー時の検出と表示

func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {

if (error as! URLError).code == URLError.cancelled {

return

}

self.showAlert("Network Error")

self.browserWebview.stopLoading()

}

showAlertメソッドでまずアラートの表示機能を実装します。そして今回実装する機能は、ネットワークエラー時なので、webViewメソッドで実装します。

そしてshowAlertを’Network Error’と表示するようにし、その時にwebページのロードを中止するようにします。if文の中身はユーザーがロード中に他のボタンを押してしまった時などにキャンセルされた場合などを除外するために、記述しましょう。

以下に動作確認の動画を載せます。

webページを表示させることができるので、いつかUIに凝ったブラウザとかも作ってみたいです。以下に今回のアプリ開発で実装したコードを載せます。

//
//  ViewController.swift
//  browser
//
//  Created by 中村俊 on 2017/05/12.
//  Copyright © 2017年 中村俊. All rights reserved.
//

import UIKit

class ViewController: UIViewController , UIWebViewDelegate{

        @IBOutlet weak var browserWebview: UIWebView!
        @IBOutlet weak var categorySegment: UISegmentedControl!
   var taskCategory = "CL"
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.browserWebview.delegate = self
        }


    @IBAction func categoryChosen(_ sender: UISegmentedControl) {
        // choose category of task
        switch sender.selectedSegmentIndex {
        case 0:
            taskCategory = "CL"
            let urlString = "http://jp.uefa.com/uefachampionsleague/"
            let urlRequest = URLRequest(url: URL(string: urlString)!)
            self.browserWebview.loadRequest(urlRequest)
        case 1:
            taskCategory = "EL"
            let urlString = "http://jp.uefa.com/uefaeuropaleague/"
            let urlRequest = URLRequest(url: URL(string: urlString)!)
            self.browserWebview.loadRequest(urlRequest)
        case 2:
            taskCategory = "LIGA"
            let urlString = "http://www.wowow.co.jp/sports/liga/"
            let urlRequest = URLRequest(url: URL(string: urlString)!)
            self.browserWebview.loadRequest(urlRequest)
        default:
            taskCategory = "CL"
        }
    }
    
//アラートの表示
    func showAlert(_ message: String) {
        let alertController = UIAlertController(title: "Error", message: message, preferredStyle: .alert)
        let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil)
        alertController.addAction(defaultAction)
        self.present(alertController, animated: true, completion: nil)
    }
    
//nettowa-kuエラー時の検出と表示
    func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {
        if (error as! URLError).code == URLError.cancelled {
            return
        }
        self.showAlert("Network Error")
        self.browserWebview.stopLoading()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    
}

// ViewController.swift

// browser

// Created by 中村俊 on 2017/05/12.

import UIKit

class ViewController: UIViewController , UIWebViewDelegate{

@IBOutlet weak var browserWebview: UIWebView!

@IBOutlet weak var categorySegment: UISegmentedControl!

var taskCategory = "CL"

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

self.browserWebview.delegate = self

}

@IBAction func categoryChosen(_ sender: UISegmentedControl) {

// choose category of task

switch sender.selectedSegmentIndex {

case 0:

taskCategory = "CL"

let urlString = "http://jp.uefa.com/uefachampionsleague/"

let urlRequest = URLRequest(url: URL(string: urlString)!)

self.browserWebview.loadRequest(urlRequest)

case 1:

taskCategory = "EL"

let urlString = "http://jp.uefa.com/uefaeuropaleague/"

let urlRequest = URLRequest(url: URL(string: urlString)!)

self.browserWebview.loadRequest(urlRequest)

case 2:

taskCategory = "LIGA"

let urlString = "http://www.wowow.co.jp/sports/liga/"

let urlRequest = URLRequest(url: URL(string: urlString)!)

self.browserWebview.loadRequest(urlRequest)

default:

taskCategory = "CL"

}

//アラートの表示

func showAlert(_ message: String) {

let alertController = UIAlertController(title: "Error", message: message, preferredStyle: .alert)

let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil)

alertController.addAction(defaultAction)

self.present(alertController, animated: true, completion: nil)

}

//nettowa-kuエラー時の検出と表示

func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {

if (error as! URLError).code == URLError.cancelled {

return

}

self.showAlert("Network Error")

self.browserWebview.stopLoading()

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

スポンサードリンク

記事が役に立ったらシェア！

appの概要

ログイン機能の実装

実際に動かす

1.node.jsのインストール

2. AngularJSのインストール

3, MongoDBのインストール

4, プロジェクトの作成

5. プロジェクトの起動

GitHubとは？

使い方の前に…

GitHubの使い方 超初級（自分が機能を使い次第、追加していきます）

ストーリボードの設定

コードの説明

Segmented Controlの設定

ネットワークエラー検出

GitHubの使い方　超初級（自分が機能を使い次第、追加していきます）