未熟学生エンジニアブログ

プログラミング・Web開発をする大学院生のブログ

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

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

「ホクマ」とは

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

hufurima.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 webアプリですが、webサーバとメールサーバも自前で建てた点がちょっとしたポイントです

どう言う時に使われる?

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

古本屋との違い

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

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

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

北大生限定って本当に?制限とかあるの

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

その他の狙い

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

手伝ってくれた人に感謝

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

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

hufurima.com

twitter.com

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

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

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

注意

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

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

  • inline, inline-block, blockの3つのうちどれ
  • 今書いたコードが問題か、その親要素が問題か
    • その要素のさらに親要素は上の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は0、左右の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. 前後の重なり

よく参考にするサイト

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

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/',
  },

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

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

f:id:swiftfe:20180923115956j:plain

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

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

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

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

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

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

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

github.com

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

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

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

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

2018年M1のエンジニアサマーインターン挑戦結果

【だいぶ心が荒んでいた時期に書いたブログ記事を修正しました。】

挑戦した企業

  • [x] pixiv summer bootcamp エンジニア(github->面接 落)
  • [x] DMM エンジニア(スキルチェックシート->面接->落)
  • [x] DeNA ゲーム・プロダクト開発(書類->面接(1次) -> 落)
  • [o] Nagisa 2日間(サポーターズプロフィール->面接->合格)
  • [x] コロプラBuild up(書類 -> 技術テスト -> 面接 ->結果待ち)
  • [o] CA社 KyotoHack(サポーターズプロフィール8/9->面接8/13->合格)

自分のスキル/経歴については以下を参考にしてください。

swiftfe0.hatenablog.com

情報系M1の自分は何ができる/やりたいのか?プログラミング技術関連でやってきたことをまとめた

この記事は「まとめ」までを読むには2分くらいで読めます。そこまで読めば自分のスキルの大体はわかります。全部読もうとすると15分くらいかかります。

目次

はじめに

現在の自分のスキルについてまとめておきます。この微妙なスキルをつける過程を知りたい人・僕(tetsufe)がどんな人か知りたいという方はこの記事を読んでいただければと思います。

現在のスキルセット

スマホアプリ

  • iOS(Swift3,4)
    • 開発経験は2年半程度。一通り書けると信じたい。得意。アプリもリリース済み。
  • Android(Java)を一応作れる

サーバーサイド・インフラ

  • Django(Python)
    • 得意。開発経験は2年程度。
  • Rails(Ruby)
    • 趣味で半年程度、アルバイトで3ヶ月ほど
  • AWS(S3をちょっと)
  • CentOS7でHTTPサーバとメールサーバ
  • Docker(docker-composeを使って一通り操作できる)
  • DB(postgres・MySQL・sqlite3)の簡単なCRUD操作

フロントサイド

  • HTML・CSS・JSを調べながらゆっくり時間をかければ書ける

その他

  • Git
    • pull requestベースでレビューを活用した開発
    • 最近、cherry-pickとかrebaseとかも使えるようになった
  • プログラミングサークルの設立/運営
    • プログラミングを教えるのが好きです

まとめ

  • 大学4年間かけて一からプログラミングを覚えた
  • iOSで英単語学習アプリをApp Storeにリリース
  • Djangoでフリマサイト「北大フリマ(仮)」を開発中
  • プログラミングサークルを設立・運営
  • 割と幅広くやっている(Webフロントエンド・バックエンド・ネイティブアプリ・Docker・Git)
  • 今後は、「誰かに勇気や自信、あるいは希望を与える」ために、「 キャラクターや物語を通じて」、「自分の思想やセンスを世間に問う」作品を作っていきたい

SNSアカウント

github.com

qiita.com

twitter.com

自分はどんな人間か

自分はどんな人間か?それは難しい問いだと思います。その中でも他人に見える自分というのは一つの答えです。では、他人にどんな自分を見せられるのか?今自分にできることをまとめようと思いました。

といっても、自分の性格みたいなのをここで語るのもあれなので(こちらの方が自分を表すには重要ですが)、プログラミング関連のみ語ろうと思います。

なぜ語るのか

ここ数年、色々なチャンスに恵まれたこともあり、いろんな価値観や技術、人に触れる機会がありました。そして就職も近づいてきました。

その過程で自分のこれからを考える必要があると感じ、今までやってきたことを整理する必要があると考えたからです。また、自分のこれからの成長に期待し、将来の自分と現時点での自分のできることと比較ができるように記録しておきたいと思っているからでもあります。

1. 自分は何をしてきたのか

ここでは自分のプログラミング歴について話します。

1-1. プログラミングをやろうとした動機(高校・大学1年)

何をしてきたのか、の前に「なぜ」それをしてきたのか、を語ることは大事だと思ったので語ります。この話は高校時代の話になります。

高校時代は一切プログラムを書いたことはありませんでした。正直プロダクトには興味がありましたが、プログラミングをやりたいとかはあんまり思っていませんでした。しかしプロダクトを作りたいというのはありました。といっても企画だけやって自分でつくらないというのは自分で作った感がないので、プログラミングやアニメーションなどができるようになりたいと思っていました。その頃は結構スロットにハマっていたので、スロットを作りたいとか考えていました。(その時代、2011年〜のスロットはただリールとストップボタン、開始レバーがあるだけではなく、大きな液晶画面があってそこでキャラクターが動いたりして大当たりを告知するという感じで、ラオウケンシロウがバトルしたり、萌えキャラが踊ったりして、しかも曲も流れる。ツインエンジェル3の演出・曲は当時結構感動してよくニコ生配信とかを見てました)

高校3年の時、進路選択の時期がやってきました。進路選択というか、大学への願書提出ですね。ここでどの大学、というよりはどの「学部」に願書を提出するかがきまるわけです。そのとき自分は数ⅢCや物理・化学をやらずに国語や日本史・倫理政経をやっていました。つまり文系でした。では、文系学部を受験したいのか?というと、それは自分のやりたいこととはちょっと違うとなったわけです。

そこで一年次の成績で二年次から正式に学部に配属されるシステムの北海道大学に進学しました。文系受験でも理系受験でも、成績次第でどの学部にもいけるという制度だったので、そのまま二年次に情報系学部に進みました。

それほどプログラミングに強烈に興味があったわけではなかった自分にとって、情報系学部に進んだ、ということは割と重要なことでした。その義務感に近いもののおかげで、やっとプログラミングをしようと思えたわけなので。

実は大学に入ってからも、情報系学部に進むことが(事実上)確定するまでは全くプログラミングをしていませんでした。なので、自分がプログラムを初めて書いたのは大学1年(18歳)の2月くらいでした。

ちなみに最初に読んだ本はこれらの本でした。1、3冊目は結構ちゃんと読みました。2冊目は途中で挫折しました。なんか大学に入って勉強が嫌いになったことを再確認させてくれた本でした。C実践プログラミング は結構解説が詳しくてかつ実践のデバッグ方法なども書かれていて、今もその方法を他の言語でも使っているのかもしれないと感じさせるほど、謎の説得力を持った本でした。

Cプログラミング入門以前

Cプログラミング入門以前

C実践プログラミング 第3版

C実践プログラミング 第3版

新・解きながら学ぶC言語

新・解きながら学ぶC言語

1-2. プログラミング初心者時代(大学2年)

触った程度

入門書程度やったこと

  • C言語(c98?89?忘れました)
  • Swift2

さて、そんな感じで2年次に進み、プログラミングをまともにやり始めたわけですが、最初はC言語をやりました。でも、何も面白くなかったです。入門書レベルの文法をやって、ポインタは授業でちょっとやったけど理解してるかは微妙という感じでした。並行してJavaScriptでちょっとゲームを作ったりしました。

振り返ってみると、この年はプログラミングをとりあえずやり始め、挫折し、そして自分が何をつくってみたいか探すような時期でした。この年はとりあえずプログラムがまだ一からは書けないので入門書をやってましたね。

他にも夏休みはCocos2dというライブラリをつかってゲームを作ろうとして挫折したり、秋頃にRuby on Railsでサイトを作ろうとして挫折したり(Rails Tutorialの環境構築で嫌になった)、冬にはSwift2の入門書を読んでiOSアプリを作ったりしていました。この辺はもう情報が古くなっているので参考にした本の情報は載せません。

結局しっくりきたのはiOSアプリでした。このときCやC++を触るのは諦めました。なんとなく苦手意識ができてしまいました。(2年次のC言語プログラミング 講義を落単したのは割とトラウマでしたね。4年次で取り返してからは笑い話ですが)

1-3. 初のプロダクト開発とApp Storeへのリリース(大学3年)

触った程度

  • Git(適当に使ってた)

入門書程度やったこと

継続してちょっとやっていたこと

  • C言語(タイピングゲーム開発&講義)

割としっかりやったもの

  • Swift2, Swift3(オリジナルアプリsの開発)
  • アプリ開発&リリース

インターン

  • WingArc1st社(5日間)

振り返ると、大学3年は結構大事な年でしたね。プログラムが一から書けるようになった年でした。なんでもできるような、何もできないようなそんな気持ちでどんどんコードを書いていきました。

春から夏にかけてSwift2でオリジナルiOSアプリを何個か作りました。

夏〜秋はサーバーサイドがやりたいということで、2年生のとき挫折したRails Tutorial(日本語版)に挑み、なんとか無理やり終わらせました。Unityも本だけ買ったりしましたね笑

railstutorial.jp

Rails Tutorialを終わらせてからは、アダルト違法サイトから定期購読できる(リンクの自動取得)APIを作ったり。Webスクレイピング面白いなとか思ったりしてました。

なぜかJavaをやったりもしてました。後にWingArc1st社で5日間東京でインターンもさせていただいたのですが、その時の条件として「Javaのプログラム経験」があったのですが、夏に「すっきりわかるJava入門」をやっていなかったら諦めていたと思うので、最初はPythonのような新しくてとっつきやすい言語をやるべきという意見もあるけど、いろんな基本言語をやっておくと精神的ハードルを下げるという点で役に立つと思います。JavaやCはプログラミングやソフトフェア開発理論書のサンプルコードとしても使われているので、やっておくとかなり良いと思います。逆にPythonデザインパターンとか、多分あんまりないと思う。

スッキリわかるJava入門 第2版 (スッキリシリーズ)

スッキリわかるJava入門 第2版 (スッキリシリーズ)

オブジェクト指向のこころ (SOFTWARE PATTERNS SERIES)

オブジェクト指向のこころ (SOFTWARE PATTERNS SERIES)

増補改訂版Java言語で学ぶデザインパターン入門

増補改訂版Java言語で学ぶデザインパターン入門

iOSアプリの制作

また、並行して、夏から本格的なiOSアプリ「フレーズ英単語1800-センター対策編」を作り始めました。実際には8月くらいから企画・ペーパープロトタイプを書き始め、3月にApp Storeにリリースという感じでした。プログラミング だけでなく、英単語の情報などの打ち込みも全て自分で行ったので、すごくいい経験になりました。良いコードを書くことの重要性・再利用可能性に対する意識の大切さ、そしてプロダクト開発の難しさや妥協点などを知ることができました。

iOSアプリをスクラッチで開発してリリースまでいったということ、Rails Tutorialのような重厚なチュートリアルをこなして、オリジナルAPIを作って実践もしてみるということは割と自分の自信になりました。

オリジナルの何かを作るということは自分の自信になります。そして自信は開発速度をUPさせるということがわかったという点でかなり大事な年になりました。

ちなみに情報蒐集用にTwitterを初めてみたりしました。

twitter.com

フォローした上級エンジニアから刺激と絶望感を受けました。機械学習に割と興味のあった際に見つけた @NardTreeさんには結構影響を受けてアイコンも萌えキャラにして、イラストのリツイートをするスタイルになりました。(ちなみにイラストはリツイート、後から見返したい技術記事はいいねという感じにしてます。それはTwitterの埋め込みタイムラインにはリツイートだけが乗るので、なんとなくタイムラインが彩られてイメージがよくなると思ったからです。当然萌えイラスト嫌いな人には悪印象だと思います笑 ちなみにリアルではあまりアニメゲームの話はしません。リアルとネット上では萌えキャラの与える印象が違うと思っているからです。これはTwitterがバレた時余計キモいというリスクもありますが。どうでもいいことばかり長々書いてすいません。)

1-4. なぜプログラミングをやっているのか再度問い始めた(大学4年)

触った程度

  • js(必要な機能があれば調べて実装)

継続してちょっとやっていたこと

  • Python(研究)
  • Swift2, Swift3(オリジナルアプリsの開発)
  • Git(コミットの粒度とかメッセージ文面を気にしだした)

割としっかりやったもの

その他

  • プログラミングサークルの立ち上げ
  • Qiita記事をいくつか書いた

この年は、なぜプログラミングをやっているのか再度問い始めた年でした。

iOSアプリの改良と葛藤

それまで作っていたiOS向け英単語学習アプリ「フレーズ英単語1800」は、本来はノベルゲーム(≒エロゲ)で英語を覚える形式で作ろうと思っていましたが、妥協して普通の英単語学習アプリになってしまっていました。何を作りたいのかよくわからず、なぜプログラミングをしているのかわからないままにやってるかんじでした。

しかし、実際に作りたかったのはむしろノベルゲームだったはず。しかし就職もあり、エンジニアとして活躍するために技術を身に付けたいという気持ちもあり・・・「内容 aka 理想」か「技術 aka 現実」か、どちらを取るかという葛藤がありました。そして実際には「技術」を選択するわけですが、割と消極的な選択だったと思っています。また、謎に液タブを勝ったりしたので、イラストを書く環境だけは整ったのですが、、、

さて、そんなこんなでiOS向け英単語学習アプリ「フレーズ英単語1800」の改良はしていたのですが、基本的にコンテンツ的な改良(キャラ絵の改善など)ではなく、機能的な改良ばかりになり、11月くらいからは完全に開発が止まりました。あ、これを読んだりはしましたね。

Web開発への興味

その代わりに、この年はWeb技術を身につけようと頑張りました。機械学習と連携させようという狙いで、Python製WebフレームワークDjangoを勉強し始め、Railsは捨ててDjangoで色々Webサービスをつくりました。

そして冬からは「北大フリマ」というフリマWebサービス開発プロジェクトを立ち上げ、今現在(2018年7月)も開発が続いています。(複数人開発のプロジェクトです。)

hufurima.com

主にHTML・CSS・JS・Python・サーバ(HTTP/メール)・Githubチーム開発のスキルがどんどん身についています!初心者にもコミットしてもらえるように、ドキュメントの整備も頑張っています。

また、詳しくは語りませんが、研究のプログラムを書いたりもしました。これは主に「自然言語処理系」のプログラムです。

プログラミングサークルの立ち上げ

そして、時系列変になってしまいますが、4月には「プログラミングサークルの立ち上げ」もやりました。これは最初完全に一人で始まりましたが、仲間が増えてかなりよい試みでした。最初の年は全然人が集まらず畳もうかとも思いましたが、2年目の今年はさらにメンバーが増え、楽しくやらせてもらってます。

  • プログラミング仲間が増えた
  • バイトも紹介してもらえた(AI TOKYO LABで検索)
  • サークル運営を初めてまともにやった
  • チーム開発をやり始めた
  • プログラミング教育を始めた

本当にいい経験させてもらっています。基本的に適当な性格なこともあって、やる気のある後輩たちに引っ張ってもらってます。

twitter.com

なぜプログラミングをするのか

そんな感じで、公開中のiOSアプリの改良、Webフリマサイトの開発、サークルの立ち上げなど色々とやったのですが、「なぜプログラミングをやっているのか?」という問いは残り続けたままでした。(今現在(2018年7月)もそうです)

どうやら、僕は「プロダクトを作って、自分の思想やセンスを世間に問いたい」という欲があるようです。その思想やセンスを自分の力で形にしたいというだけで、プログラミング技術の習得に関しては2番目くらいにやりたいことでした。これは好き嫌いの問題です。

実際には、エンジニア界隈をネットで見ていると自分には到底かなわないような方々がいっぱいいますし、なかなか自分が有名になれそうな気がしないというのもありますが・・・

では、「自分の思想やセンス」とはなんなのか?というと、また難しく、なかなか答えが出せてないです。でも、最近では、「誰かに勇気や自信、あるいは希望を与えたい」ということがあって、その結果「自分の思想やセンスを世間に問いたい」んじゃないかと自己分析しています。

英単語学習アプリは、自信を与えるためにやっていたはず。実際に、別にテストでいい点を取るためにということではなく、自分の理想の進路に近づける大学に挑戦するための学力的な自信をつけてほしいから作っていました。また、キャラクターや物語を通して(未実装ですが)「自分の思想やセンスを世間に問いたい」というところがありました。

フリマWebアプリは、「技術的な勉強・チーム開発経験」と「自分の思想やセンスを世間に問いたい」というところが大きいので、勇気や自信、というのとは少し違うというか、むしろ自分自身に勇気や自信、あるいは希望を与えたいのかもしれません。

2. これから、何がしたいのか

端的にまとめると、先に書いた

「誰かに勇気や自信、あるいは希望を与える」ために、「 キャラクターや物語を通じて」、「自分の思想やセンスを世間に問う」作品を作っていきたいんだと思います。

具体的には、

  • フリマWebサービス「北大フリマ」
  • iOS向け英単語学習用アプリ「フレーズ英単語1800-センター対策編」にノベルゲーム要素の実装
  • 自分のWebサイト https://tetsufe.github.io のデザインブラッシュアップ
  • 後輩に対してのプログラミング教育

をやっていきたいと思います。そのためにエンジニアリング能力も高めていきたいです。

P.S.

家族もしくはリア友の方は、もし見ても僕に感想とかは言わないでください。