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



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

参考文献はこちらです。

 

 

appの概要

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

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

 

ログイン機能の実装

  • accountsアプリの作成

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

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

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

 

  • URLの設定

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

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

  • templatesの作成

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

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

 

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

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

 

実際に動かす

  • 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をインストールします。

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

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

以下のコマンドで解決。

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

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

もう一回

でうまくいきました。

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

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

次に、以下のコマンド

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

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

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

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

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

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

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

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


スポンサードリンク

2. AngularJSのインストール

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

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

こんだけ!

3, MongoDBのインストール

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

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

下記のコマンドで、起動

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

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

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

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

うまく起動できました。

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



スポンサードリンク

4, プロジェクトの作成

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

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

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

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

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

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

5. プロジェクトの起動

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

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

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

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

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

 

 

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

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

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

 GitHubとは?

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

使い方の前に…

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

  1. リポジトリ

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

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

2 .プッシュ

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

3. コミット

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

4. ブランチ

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

 



スポンサードリンク

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

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

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

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

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

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

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

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

 

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

 

 

 



スポンサードリンク

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

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

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

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

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

ストーリボードの設定

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

  • Segmented Control
  • Web View

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



スポンサードリンク

コードの説明

 

Segmented Controlの設定

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

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

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

 

ネットワークエラー検出

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

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

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

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

 



スポンサードリンク

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