1 前提知識
- Railsの経験（同じような形式の言語違いのものを使ったことはあった）
- ２週間もあればできるようなものしか作ったことがなかった
2 Djangoを始めた（Django Girls Tutorial）
- 初心者でも安心、Webの仕組みやコマンドラインの説明まである
- MVC, Djangoの基本、サイト公開までの流れができる
- ブログサイトを作れる
- しかもwindows, linux, macの全てに対応
3 いろんなDjangoサイトを適当に作った
- どれも２週間程度でできるものばかり
- チャットができてチャットの記録をデータベースに記録するサイト
- 画像処理のプログラムをサーバ上で動かすサイト
4 「ホクマ」を作り始める
- 4 1 大雑把に企画を決める
  - 4 1 1 必要な要素を考える
  - 4 1 2 サービスの流れを考える
  - 4 1 3 類似サービスがないか調べる
- 4 2 実際に何を書くか考える
  - 4 2 1 大雑把なモデル設計（この頃はモデル設計という言葉は知らなかった）
  - 4 2 2 似たサービスを真似しよう
- 4 3 自分の中でパターンを掴む
  - 4 3 1 最初の１ページ目を書く
  - 4 3 2 何か一つのモデルでCRUDを書く
  - 4 3 2 データベースとの連携を試す
- 4 4 一連の流れを実装する
  - 4 4 1 CSSは無視
  - 4 4 2 複数モデルのCRUDとページ遷移
- 4 5 本番環境でいつでも公開できるようにする
  - 4 5 1 早めに本番環境を用意する
  - 4 5 2 とりあえず公開できればよい
5 細かい機能を作っていく
- 5 1 ググり力
- 5 2 デバッグに関して
6 開発を続けていくために
- 6 1 自動化
- 6 2 協力を求める・GitHubでの共同開発
- 6 3 モチベーションの維持について
- 6 4 コーディング規約
7 開発ツールについて
- 7 1 エディタ・IDE
  - 7 1 1 テンションが上がるエディタか、効率の良いエディタか
- 7 2 GitとGitHubやBitBucketなど
8 Djangoで知っておくべき機能集
- ログイン処理
- デコレータ
- template組み込みフィルタ
- などなど

ついで: 僕のプログラミング歴について

以下の過去投稿にあります

swiftfe0.hatenablog.com

2018-10-06

北大生向けフリマWebサービス「ホクマ」をリリースしました！

ホクマ

10/1に「ホクマ」というWebサービスを公開しました。

「ホクマ」とは

「ホクマ」とは、北大生限定で使えるフリマWebサービスです。

＊ホクマは2020年9月にサービスを終了しました。

https://hufurima.comhufurima.com

できること

メルカリさんのように、Web上で自由に商品を出品・購入できます。ただし、受け取りは郵送ではなく手渡しになります。

出品

f:id:swiftfe:20181005171210p:plain

検索

f:id:swiftfe:20181005171201p:plain

購入

f:id:swiftfe:20181005171154p:plain

チャット（交渉・連絡）

f:id:swiftfe:20181005171216p:plain

評価

f:id:swiftfe:20181005171226p:plain

技術構成

Django
Postgres
Nginx
Docker
ConohaVPS(CentOS)
HTTPS(Let'a encrypt)
postfix, dovecot(自前メールサーバ)

普通のDjango webアプリですが、webサーバとメールサーバも自前で建てた点がちょっとしたポイントです

使うべき人

主に、上級生がいらなくなった教科書等を売り、下級生が買うという使い方を想定しています。が、他にもいろんな使い方があると思います

古本屋との違い

古本屋で売るとかなり安い値段になってしまいますが、直接生徒同士でのやりとりができれば、高く売ることができます。

他のフリマサービスとの違い

「ホクマ」はメルカリさんなどの日本・アメリカ全国を対象にするのではなく、「北大生」だけを対象にしたサービスです。北大生は北大に集まるので、「直接会って商品を渡す」ことで「手数料０」を売りにしています。また、北大生限定サービスなので、北大生として協力して作り上げていくサービスになれればと考えています。

北大生限定

会員登録に制限があります。会員登録の際に使えるメールアドレスは北大アドレス（@eis.hokudai.ac.jp）になっていて、届いたメールのリンクから本登録ができるようになっているので、北大生以外は出品・購入ができなくなっています。

その他の狙い

所属するサークル「北大IT勉強会」でのサービス開発・リリースのロールモデルになれればいいなと思っています。この「ホクマ」を見て、協力することで他のメンバー（特に後輩部員）がどんどん面白い作品を作って世に出していくようになってくれればいいなと考えています

謝辞

一部機能はサークル部員に手伝ってもらいました。手伝ってもらえなかったら10/1に間に合わなかったです。ほんとに感謝です。どちらかというとプレッシャーになったのが一番良かったのですが…笑

ぜひ使ってください！フィードバックもお待ちしてます！

https://hufurima.comhufurima.com

twitter.com

2018-10-05

cssの位置指定をだいたい網羅する

web開発 css

cssでなかなか思った位置に配置できない問題

1. 横方向の中央揃え
1. 縦方向の中央揃え
1. 左端じゃなくて、微妙に位置を動かしたい
1. 前後の重なり（背景など）

注意

この記事では単体の要素の位置指定だけを取り扱います。２カラムレイアウトなどは取り扱いません。後半は結構丸投げです

その前に：うまくいかない時に考えるべきこと

inline, inline-block, blockの３つのうちどれ
- 丸投げします【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
今書いたコードが問題か、その親要素が問題か
- その要素のさらに親要素は上のinline, blockなどうちどれか？
今のシチュエーションとその方法は合っているか
- cssにはいろんな位置指定の方法がある。別の方法でいけるかもしれない
その要素の高さ or 幅は100%か
- inline要素は高さ・幅が小さい。中央揃えになっていても気づかない時がある
- デベロッパーツールで余白も含めて幅をちゃんと確認しよう

1. 横方向の中央揃え

text-align: center
margin: auto
flexbox

対象になるhtml

<div class="wrapper">
    <img src="URL" width=600 height=400>
    <p>この要素を左右中央に寄せたい</p>
</div>

text-align: center

text-align: centerは、これを適用した要素の中にある要素を横方向に中欧揃えします。ただし、横幅が100%の場合は中欧揃えになっても見た目が変わらないので注意しましょう。 100%になっているかどうかは、ブラウザのデベロッパーツールを使って確認するとよいでしょう

.wrapper {
    text-align: center;
}

margin: auto

divなどのブロック要素の場合、text-alignでは横方向に中欧揃えにならないことがあります。そんなときはmargin: autoを使います。これを使うとブロック要素でも中欧揃えになります

.wrapper {
    margin: 0 auto /* 上下のmarginは０、左右のmarginがauto */
}

flexbox

これはあまりわかっていないのですが、特に縦方向の中欧揃えと組み合わせるときにコードが簡潔になるようです。対応していないブラウザがあるのか、使い方がわからない人が多いのか、まだ普及度は低そうな印象です

.wrapper {
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
}

2. 縦方向の中央揃え

vertical-align: middle と table-cell（or inline-block）の組み合わせ
position:absolute; left: 50%; width: 100%;

vertical-align: middle

インライン要素であれば、vertical-align: middleが使えます

対象になるhtml

<div class="wrapper">
    <img src="URL" width=600 height=400>
    <p>この要素を上下中央に寄せたい（ならないことも）</p>
</div>

.wrapper {
    vertical-align: middle
}

vertical-align と table-cell（or inline-block）の組み合わせ

ブロック要素単位で縦方向に中欧揃えしたい場合は、display: tableとtable-cellを使いましょう http://kimizuka.hatenablog.com/entry/2014/03/16/233158

html, body {
    width: 100%; height: 100%;
}

section {
    display: table;
}

div {
    display: table-cell
    vertical-align: middle;
}

position:absolute; left: xx%; top: xx% width: xx%;height: xx%;

- この方法は正確に中央揃えできるわけではないです。うまく大きさとtopを揃えたりして場所を調節しましょう。

<div class="wrapper">
    <img src="URL" width=600 height=400>
    <p>この要素を上下左右中央に寄せたい</p>
</div>

  .wrapper p {
    position: absolute; top: 30%; left: 0; width: 100%; height: 100%; 
  }

3. 左端じゃなくて、微妙に位置を動かしたい

ここによくまとまっています https://saruwakakun.com/html-css/basic/relative-absolute-fixed

4. 前後の重なり

position:absoluteとz-indexを使う
- https://saruwakakun.com/html-css/basic/z-index

よく参考にするサイト

サルワカ https://saruwakakun.com/
- 実例がわかりやすいし、網羅的で体系的なのが嬉しい。辞書を引くと近くの単語も知れるみたいな感じ

2018-09-29

Nuxt.jsサイトをTravis CI経由でGitHub pagesにデプロイする

やりたいこと

Nuxt.jsを使って作ったサイトをGithub Pagesで公開したい
レポジトリ名が「ユーザ名.github.io」以外のレポジトリでgithub pagesを使いたい
- 最終的なルートURLはhttps://ユーザ名.github.io/レポジトリ名
masterにpushしたとき、Travis CIで自動デプロイしたい

Nuxt製サイトを作る

普通にNuxt製サイトを作りましょう

設定ファイルを書く

設定ファイルだけをいじります

package.json

{
  "name": "名前",
  "version": "1.0.0",
  "description": " A Nuxt.js Github.io site",
  "author": "ユーザ名",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^1.0.0",
    //"vue-carousel": "^0.14.0",
    //"vue-scrollto": "^2.13.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

nuxt.config.js

module.exports = {

  /*
  ** Headers of the page
  */
  head: {
    title: 'タイトル',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: ' A Nuxt.js Github.io site' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  router: {base: '/レポジトリ名/'},
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {

    // vendor: ['vue-carousel', 'vue-scrollto'],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
      publicPath: '/レポジトリ名/_nuxt/',
  },

    plugins:
    [
      { src: '~/plugins/vue-carousel.js', ssr: false },
      '~/plugins/vue-scrollto.js',
    ]

}
if (process.env.DEPLOY_ENV === 'LOCAL') {
    module.exports['router']={base: '/'}
}

.travis.yml

language: node_js
node_js:
- "8"

cache:
  directories:
  - "node_modules"

branches:
  only:
  - master

install:
- npm install
- npm run generate

script:
- echo "Skipping tests"

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_ACCESS_TOKEN #travisの環境変数GITHUB_ACCESS_TOKENにgithubのトークンを登録してください
  target-branch: gh-pages
  local-dir: dist
  on:
    branch: master

注意：ローカルで動かすときは $ DEPLOY_ENV=LOCAL nom run dev のように、環境変数を渡して起動してください。

重要な点

基本的には、nuxt.config.jsだけがちょっと特殊です。重要なところだけ抜き出します。

   // 略

 router: {base: '/レポジトリ名/'},

  // 略

 build: {
      // 略
      publicPath: '/レポジトリ名/_nuxt/',
  },

まず、今回はレポジトリ名が「ユーザ名.github.io」以外のレポジトリでgithub pagesを使いたいので、最終的なルートURLはhttps://ユーザ名.github.io/レポジトリ名となります。つまり、ルートディレクトリが / ではなく、/レポジトリ名 となるのです。この場合、デフォルトの設定だと、パスが解決できなくなります。

具体的には、index,.html, jsファイルなどが見つけられなくなります。なので、以下のように設定を変更します。これで、https://ユーザ名.github.io/レポジトリ名にアクセスしても普通にアクセスできます。

router: {base: '/レポジトリ名/'},

また、これだけだとjs, 画像ファイル等には依然としてアクセスできません。以下のように設定を変更します

 build: {
      // 略
      publicPath: '/レポジトリ名/_nuxt/',
  },

これで画像ファイル等にもアクセスできるようになります！

2018-09-23

Nuxt.jsでgithub pagesを書いてみる part1

f:id:swiftfe:20180923115956j:plain

Nuxt.jsとは、Vue.jsをSSRするためのフレームワーク（？）らしいです。

CA社のKyotoHackというインターン（ハッカソン」）に参加した時に初めて使ったNuxt.jsでしたが、なんとなく好きになりました。

プログラミング言語とかフレームワークになんとなく惹かれるということは今まで全くなかったのですが・・

モダンな感じ（使われ始めたのがここ２、３年くらいらしい？）、自分が緑色が好き（Vue.js, Nuxt.jsのロゴが緑と黒色で、サイトのイメージも濃いめの緑が基本色に感じる）ということや、公式ドキュメントもなんとなく綺麗だということが理由かもしれません。

また、KyotoHackで親切に教えていただいたメンターさんがかっこよかったとか、あのKyotohackの雰囲気を思い出すからというのもあるのかもしれません。

NuxtでGitHub pages（ポートフォリオ公開サイト）を作りたくなった

Nuxtが好きになってなんとなく書きたいと思ったので、今までのGitHub pagesを書きかえることにしました。

github.com

README.mdにnuxt.jsプロジェクト作成からGitHub pagesへのデプロイまでをまとめてあるので、よければ参考にしてください

できたらシリーズものにしたいです。楽しいサイトを楽しく作っていきたいです。

2018-08-21

今更ながらReactに入門し始めた

API+フロント&モバイルという構成がやっぱり強いと最近知った。分かってはいたけどそう強く感じてきた。自分のつけるべきスキルとしてはこれ以上ない組み合わせと思う。 flutter&firebaseとかで作るのはありかもしれない。作りたいものをじっくりと作っていきたい。それを固めるまではとりあえずバイトに集中してスキルアップしていく方向が一番かもしれない。研究も再開することになる。最近というかここ半年くらいサボりすぎた。