読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django の {{ form }} をカスタマイズして使う

参考サイト https://docs.djangoproject.com/en/1.11/topics/forms/#rendering-fields-manually https://docs.djangoproject.com/en/1.11/topics/forms/#looping-over-the-form-s-fields 手動でformをレンダリングしてカスタマイズする。 {{ form }}でレンダ…

Bootstrap + Django で、themeをMaterial ぽくする。

大まかな流れ ベースになるbase.htmlページを作成する。 base.htmlを作成する urls.pyを設定して、テストしてみる。 css.htmlを作成する javascript.htmlを作成する base.htmlに読み込ませる bootstrapのthemeを変える チューニングされている bootstrapファ…

Vue.js + Django でVue.config.delimitersを使う

参考サイト https://jp.vuejs.org/v2/api/#delimiters Vueの設定を変更する。 {{}} -> [[]] に変更する。 new Vue({ delimiters: ['[[, ']]'] })

Vue.js 入門 vol.6 コンポーネント 後半

参考サイト https://jp.vuejs.org/v2/guide/components.html#動的コンポーネント 動的コンポーネント コンポーネントの切り替え: componentタグと、isによるcomponentの指定で実装可能。 var vm = new Vue({ el: '#example', data: { currentView: 'home' },…

Vue.js 入門 vol.6 コンポーネント 前半

参考サイト https://jp.vuejs.org/v2/guide/components.html コンポーネントの使用 登録 new Vue({ el: '#some-element', }) Vue.component('my-component',{ //オプション }) 一度登録すると、カスタム要素<my-component>を使えるようになる。親のinstanceのtemplate内で</my-component>…

Vue.js 入門 vol.5 フォーム入力バインディング

参考サイト https://jp.vuejs.org/v2/guide/forms.html フォーム入力バインディング formのinput要素と、textarea要素で、two-way binding を作成するには、v-modelを使うことができる。(初期値は無視する。) テキストの例 <input v-model="message" placeholder="edit me"> <p>Message is : {{ message }}</p> 複…

Vue.js 入門 vol.4 イベントハンドラ

参考サイト https://jp.vuejs.org/v2/guide/events.html イベントの購読(subscribe) v-on ディレクティブ <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) メソッド…

Vue.js 入門 vol.3

参考サイト https://jp.vuejs.org/v2/guide/class-and-style.html クラスとスタイルのバインディング <div v-bind:class="{ active: isActive }"></div> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> da…

Vue.js 入門 vol.2

参考サイト https://jp.vuejs.org/v2/guide/instance.html コンストラクタ vm (ViewModel の略) を Vue インスタンスの変数名としてよく使うらしい。 すべてのVue vmは、Vueコンストラクタ関数(new Vue)で、root Vue instance を作成することから始まる。roo…

Vue.js 入門 vol.1

参考サイト https://jp.vuejs.org/v2/guide/ Vue のチュートリアル vueの基本機能をみてみる。 <script src="https://unpkg.com/vue"></script> <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', // elで #app は、id=app で指定ができ…

Celery(redis) + Django

参照リンク https://www.codingforentrepreneurs.com/projects/time-tasks/ https://www.codingforentrepreneurs.com/blog/celery-redis-django/ https://redis.io/ http://docs.celeryproject.org/en/latest/userguide/periodic-tasks.html#crontab-schedul…

Angular4 + Bootstrap4をローカルでテスト

利用したテーマ http://rawgit.com/start-angular/SB-Admin-BS4-Angular-4/master/dist/dashboard Angular4 + Bootstrap4のthemeをデプロイ 以下のリンクからテーマをダウンロードする。 http://rawgit.com/start-angular/SB-Admin-BS4-Angular-4/master/dis…

Angular4 + Django1.11 vol.12

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Fix Broken Images 以下の動画を元に、defaultのimagepathなどを、S3のurlに修正する。 https://www.codingforentrepreneurs.com/projects/angular-django/fix-broken-images/?…

Angular4 + Django1.11 vol.11

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Backend Image Path heroku上のbackendのimageのpathを設定する。 Video modelにimage_pathを追記する。 class Video(models.Model): name = models.CharField(max_length=220)…

Angular4 + Django1.11 vol.10

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Go Live with Heroku, Django, & Angular heroku へのdeployの準備をする。 settings.pyのコードの修正をする。 # settingsフォルダを作成して、その中に、settingsファイルを…

Angular4 + Django1.11 vol.9

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Catch All 404 + 500 Server Page 404 error, 500 error のときのページの処理を、angularのrouterを使って実装する。 HomeComponentのrouterの設定をpathMatch fullに設定する…

Angular4 + Django1.11 vol.8

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ https://angular.io/docs/ts/latest/guide/server-communication.html http://qiita.com/kura07/items/c9fa858870ad56dfec12 Handle Angular Http Error angular公式チュートリ…

Angular4 + Django1.11 vol.7

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ http://qiita.com/kura07/items/c9fa858870ad56dfec12 Handling 404 with Object Lookups 指定したurlが無いときの、404 errorのページを設定する。 video-detail.component.ts…

Angular4 + Django1.11 vol.6

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ http://www.django-rest-framework.org/api-guide/generic-views/#listapiview http://qiita.com/kura07/items/c9fa858870ad56dfec12 Better Backend Queries featuredのquery…

Angular4 + Django1.11 vol.5

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ http://www.django-rest-framework.org/api-guide/generic-views/#listapiview http://qiita.com/kura07/items/c9fa858870ad56dfec12 Integrate Django API with Angular video…

Angular4 + Django1.11 vol.3

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ https://www.codingforentrepreneurs.com/blog/random-string-generator-in-python/ https://www.codingforentrepreneurs.com/blog/a-unique-slug-generator-for-django/ Video…

Angular4 + Django1.11 vol.2

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ ng build to Django Static $ ng build --prod で、production versionのbuildを実行する。(結果、bundle.jsが作成される) buildしたファイルの出力先をdjangoのstaciファイ…

Angular4 + Django1.11 vol.1

参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Getting Started Angular4+Django djangular4というフォルダを作成する。さらに、djangular4/client, djangular4/backend というサイトをそれぞれ作成する。 clientフォルダに…

Angular4入門_Vol.20

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ ngBuild and Deploy to Heroku packageが完成したら、$ ng build --prod で、deploy用に、bundle.jsを作成する。prodオプションは、minファイルにするためか。bundle.jsには、t…

Angular4入門_Vol.19

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html https://angular.io/docs/ts/latest/guide/router.html#!#basics-router-links Router Link &…

Angular4入門_Vol.18

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Video Item Model video classを作成するために、video.tsファイルを作成する。これはdjangoで言うと、modelsを使うようなものか。 export class VideoItem { slug: string; na…

Angular4入門_Vol.17

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Search Video List search methodを、videos.service.tsに追記する。methodの処理の方法は、get methodと似てるので、中身をコピペして再利用する。 search(query){ return thi…

Angular4入門_Vol.16

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Video Service app/videos フォルダを作成する $ ng g service videosで、serviceの雛形を作成する。 videos.service.tsと、videos.service.spec.tsを、app/videosフォルダに移…

Angular4入門_Vol.15

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Passing Data to Components search.component.ts にコードを追記する。 import { Component, OnInit, Input } from '@angular/core'; //Input をimportする。 import { Router…

Angular4入門_Vol.14

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Search Detail search.component.tsにrouterをつける。 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; // import Router @C…

Angular4入門_Vol.13

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ ngForm Basics navbarのformにngFormを使う準備をする。まず通常のformで実装するときのコードを確認する。search.component.htmlに追記する。 <form class="navbar-form navbar-left" method="get" action="/search/"> <div class="form-group"> </div></form>

Angular4入門_Vol.12

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Two Way Data Binding search機能を実装する。$ ng g component searchでsearch componentを作成する。 search.component.tsの、selectorを、searchに変更する。 また、app.com…

Angular4入門_Vol.11

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Http & Featured home.component.tsのimageのlinkもvideos.JSONデータに組み込む。 [ { "name": "テスト1", "slug": "item-1", "embed": "kzjMI00A1f8", "image": "assets/imag…

Angular4入門_Vol.10

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Http Requests videoListの中身を、assets/json/videos.jsonファイルに移す。json形式に修正する。 [ { "name": "Item 1", "slug": "item-1", "embed": "kzjMI00A1f8" }, { "na…

Angular4入門_Vol.9

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Angular Click Events home.component.html にclickeventを追記する。 <a class='' href="/videos/video-1" (click)='preventNormal($event)'> home.component.tsにpreventNormalを定義する。 import { Component, OnInit } from '@angular/core'; @</a>…

Angular4入門_Vol.8

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ http://getbootstrap.com/ https://www.npmjs.com/package/ngx-bootstrap http://valor-software.com/ngx-bootstrap/#/ ngx-bootstrap carousel home componentを作成する。$ng…

Angular4入門_Vol.7

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ http://getbootstrap.com/ https://www.npmjs.com/package/ngx-bootstrap http://valor-software.com/ngx-bootstrap/#/ Bootstrap for Angular - ngx-bootstrap ngx-bootstrap…

Angular4入門_Vol.6

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/guide/pipes.html Pipes & Custom Pipes Pipesを使ってみる。機能みるために、todayDateという変数を定義しておく。 ... todayDate; // vid…

Angular4入門_Vol.5

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Safely Embed a Video youtubeのembed(埋め込み)linkを挿入してみる。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'video-list', template…

Angular4入門_Vol.4

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Dynamic Routing of Components video-detail.component.tsにコードを追記する。 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angu…

Angular4入門_Vol.3

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Mapping Urls with Router Moudle routermoduleを使って、urls のmappingをする。 まず、src/app/app.routing.tsファイルを作成する。 import { NgModule } from '@angular/cor…

Angular4入門_Vol.2

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ 6 - ngFor & ngIf ngForのテストをするために、video-list.component.tsを修正する。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'video-lis…

Angular4入門_No.1

参考サイト https://www.codingforentrepreneurs.com/projects/try-angular-v4/ Getting Started with Angular v4 $ng new srvupコマンドを実行すると、新しいangularのproject、srvupが作成される。angularに必要なnode.jsのpackageをinstallするので、ちょ…

Angular4入門 ~setup編~

参考サイト https://www.codingforentrepreneurs.com/projects/setup-angular/how-setup-angular/?play=true https://www.codingforentrepreneurs.com/blog/angular-setup-guide/ How to Setup Angular Install Angluar CLI via npm: npm install -g @angula…

Angularのための、TypeScript入門 その5

参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ Package.json - npm init package.jsonを作成する(djangoでいうところの、requirements.tx…

Angularのための、TypeScript入門 その4

参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ Typescript - Classes - Part 3 main.tsをsrc/内に移動させる。 archiveというフォルダを作成して、不要になったmain.tsなどを移動させておく。(なぜ削除しないか…

Angularのための、TypeScript入門 その3

参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ Declaring Variables - let vs var let と varの違い //letの場合 function f(input: boolean){ let a = 100 if (input) { let b = a + 100012 return b; } return…

Angularのための、TypeScript入門 その2

Typescript - Classes - Part 1 参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ 概要 typescriptのclassをゼロから作ってみる。 class SweetSweetBasil { constructor(name:string){ // constructorは、インスタ…

Angularのための、TypeScript入門 その1

Typescript for Angular 参考サイト https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ install node.js 公式ホームページからinstallする npmをアップグ…

Angular2 The Tour of Heroes tutorial に挑戦してみる 7

HTTP https://angular.io/docs/ts/latest/tutorial/toh-pt6.html javascriptの基礎 http://qiita.com/ukiuni@github/items/5f3d8620187905aea3d4 Convert the service and components to use Angular’s HTTP service. Get the hero data from a server. Let …