「Webシステム開発」の記事 - Crieit

QnQ開発日誌開発したWebサービスは俺の日記帳になった

2021-07-26T02:59:19+09:00

こんにちは。二次元掲示板、「QnQ」の開発日誌でございます。

前回の記事「開発中のWebサービスは友人との交換日記と化した – 或る阿呆の記」では友人との交換日記と言ったが、最近は友人も忙しいのか書き込み頻度がめっきり減ってしまい、最近は書き込みの多分9割くらいが僕の独り言と思われ、交換日記どころかもはや「俺の日記帳」みたいになってしまった。まぁTwitterのタイムラインを汚さずに、いいたいことをネットの虚空に向かってペラペラとしゃべっているとでも言えばよいだろうか。

長らくそんな状態だったのだが、本当に「みんなの日記帳」的な方向に開発が進みそうだ。

俺の日記帳

ここまでに大きな変化もあり、発起人である友人は元々の目論見が外れたということで、ユースケースに悩んでいるようだった。まぁ悩んでいるのは、僕が散々「このサービスは結局なんなんだ」とつっついたせいもあるかもしれない。

というと肝心なところを人任せかという感じだが、それは彼が発起人でありプロジェクトでいえばリーダーに相当するからであって、別に責任を押し付けているわけではない。実際、僕も僕なりにサービスの可能性は模索していて、冒頭に書いたとおりもはや書き込みの9割……多分言い過ぎじゃなくそれくらいが僕の独り言みたいな状態になっているほどだ。

そして僕の現在における結論、というよりは現状が、「俺の日記帳」なのである。

具体的には、普段の開発や勉強の軌跡を綴ったり、YouTubeでやっているアニメ美味しんぼの実況をしたり、気になるニュースについて徒然と語ったり、といった具合である。

まぁ正直、Twitterのタイムラインを汚さずに好き勝手言えていいな、程度の感じである。ここから記事化したのもあるので、まったくもって全部無駄というわけではない。

二次元掲示板の使い道

現状のUXから、このサービスの本質を一言で言えば、「二次元掲示板」になるだろう。時系列、あるいは人気順などで書き込みを並べる通常の掲示板と違って、このサービスは書き込みの流れを二次元的に表現している。

個人的にはこのUIだけで面白いものだと思うし、本当を言えばいろいろな人たちの雑談や議論に使われてほしいと思う。二次元掲示板は、常に文脈が強烈に意識されるため、単発の言いっぱなしになりづらいのである。これはTwitterなどで実りのない応酬にしんどみを感じている人たちなんかには特に有効だと思われる。

ただまぁ、そのためには人を集める必要があるのだがそれも難しく、結局ソロユースでの使い道ばかりになってしまった、というのが実際のところだ。これはこれで個人的には可能性があるものだとは思ってはいるので、とりあえず当面はソロでぼちぼちやっていくつもりだ。

と、いう決意を固めていたわけではなかったのだが、今日の話し合いでもまずはソロで地道に使っていくのが現実的かもね、という話になってしまったので、晴れてチームとしても方向性が「俺の日記帳」ならぬ「みんなの日記帳」サービスになってしまったかもしれない。

僕もそうするより他ないんじゃないの、なんて言いながら、正直言うと本当にそれでいいのかなぁ、とか思ったりする気持ちはないでもない。かといって他にアイディアがあるわけでもない。

サービスを使ってもらうってのは難しいなぁなんて思いながら、つくづくTwitterとかnoteはすげぇなぁと、感心するばかりだ。

開発中のWebサービスは友人との交換日記と化した

2021-05-16T18:36:44+09:00

友人が発起人になって、一緒に開発したWebサービスがある。

QnQ

これはまぁ、一言で言うと二次元チャットみたいな感じ。二次元チャットってなにそれ意味分かんないと思われるが、Twitterのツイートツリーが分岐する様子が可視化されたもの、といえば少しイメージがわくだろうか。たとえば以下のような感じだ。

二次元チャット

ブログとnoteの使い分け | QnQ

僕がnoteを本格的に書き始めたのはここ10日ばかりのことだが、もともとブログをやっていた僕は、その使い分けをどうしたものかと考えていた。で、それについて考えた軌跡である。僕の考えがツリー上に展開されているのがわかるだろうか。

これは僕の独り言状態だが、ログインしていれば誰でもコメントをつけることが可能だ（上記のURLについては、既にクローズしているのでコメントはつけられない）。で、見切れているが友人もコメントしてくれている。

多分今までにないフレームワークで、けっこう面白いと思う。

ちなみに、当初かなり意識高い系で売ろうとしていた。友人がnoteに公開記事を書いている。

質問に質問で返されるドM向けQ&Qサービスを公開｜adnyer｜note

ちなみに僕も自分のブログに紹介記事を書いた。

質問に質問で返されるドM向けQ&Qサービス、QnQを公開・開発中です – 或る阿呆の記

タイトルは似ているが、内容は僕と友人の性格的な違いがけっこう出ている。

さて、このサービスだが、公開して半年ほど経過するものの、たいへんなことに現在定着したユーザーは0である。マジで。使ってくれた人もいるが、定着した人はいなかった。

その理由については色々思うところありつつ、せっかく作ったので僕と友人は使っている。その結果、長い時間をかけて作られたこのサービスは現在、僕と友人の交換日記状サービスになっている。交換日記ならまだマシで、僕の独り言コーナーになっていることもよくある。

それでも開発を続けているのは、実際面白いサービスだと思っているのと、まぁ数少ない友人との繋がりだから、みたいなのもある。後はまぁ、自分でサービスを開発して運用しています、というのは今後転職する時にも使えるだろう、というのもある（今の職場にはそれなりに満足しているので、転職予定はない）。

とはいえ、さすがに僕と友人の交換日記状態が延々と続くのは余りにも悲しいし虚しい。使ってもらえないのはサービスとしての魅力がないからなんだが、僕にはどうしても本質的に面白さのあるサービスだと思えてならない。自分の子供だから可愛く感じるんだと言われればそうかもしれないんだが……。

どうにも諦めるには惜しい気がするので、もうちょっとちゃんと作り直し、都度宣伝もしていきたいと思っている。

noteは始めたばかりだが、SNSとして非常に参考になるところがあるので、色々考えて反映し、なんとか使ってもらえるような、魅力あるサービスにしていきたい。定期的に開発日誌をつけていくつもりだ。がんばろう。

リーマンが5日間でWebアプリを開発してリリースした話

2019-01-30T23:17:47+09:00

こんにちは。「平成年表」というWebサービスを5日間で開発してリリースしました。サラリーマンとして仕事してた割には短期間でリリースできたなぁと思ってます。ちょっとだけ自分語り？させていただければと思います。

開発期間

1/23（水）～1/27（日）
1/27（日）の17時ころにリリースしましたとTwitterで報告しました。（ほぼ使われてないけど…）

利用技術

vue.js　＋　firebase（hosting, authentication, Storage, firestore, functions）

それぞれの日の過ごし方

1/22（火）まで

日中は仕事
夜は平成年表とは別のWebアプリの開発をやってた。

1/23（水）

朝の時点では、まだ「平成年表」は思いついていない笑
9時半くらいに出社して、普通に仕事を開始。ちなみに私はWeb関連の企画職なので、同僚とチャットしながら企画のネタを検討。
同僚とのチャットがひと段落してぼーっと考えてた時に「平成年表」のアイディアを思いつく。
18時に退社（定時は19時なので早退ｗ）。仕事中は早く作りたくてウズウズしていた。
帰りの電車の中で必要機能について検討する。リリースは1週間でいけるだろうと判断し、平成年表に開発を集中することを決意。
19時くらいから24時くらいまで開発。この日はTwitterログインと共通ヘッダーを作った気がする。

1/24（木）

この日も仕事。～19時まで勤務。
帰宅後、開発着手は21時くらい開始。24時くらいまで開発する。
この日は平成年表の年表登録フォームと年表の参照画面を作った。

1/25（金）

この日も仕事。～19時まで勤務。
帰宅後、開発着手は21時くらい開始。24時くらいまで開発する。
この日は平成年表の年表登録の参照画面の修正と一覧画面を作る。
サイト内の全体的なリンクの設置などもやる。
たしかドメインもこの日に取得。firebaseのhostingにドメインの設定を施す。

1/26（土）

休日。朝から開発。待ってました！！
ということで、AM9時くらいから24時くらいまで間に休憩3時間くらいでぶっ通しで開発する
コメント投稿機能、コメント数を集計するFunctions、コメント数順ソート
この日でほぼほぼ機能の開発とデザインの修正は完成していた。

1/27（日）

この日も休日。やっぱり朝から開発。土日さいこー！！
AM9時くらいから開発開始。
この日はメインの開発というよりは規約作ったり、お問い合わせフォームとしてのGoogleフォームの設定したりとかをメインで実施
公開ドメインでのテスト中にtwitter画像が表示されない問題に直面。かなり窮地に追い込まれる。
（平成年表はSSRやっていないかったのだ…）
QiitaでCloudFunctionsを使ってSNS用のmetaタグ返す記事を発見。SSRせずに乗り切る。
17時くらいに満足し、リリースしましたツイートする。

振り返ってみて

サラリーマンしつつ開発するのけっこう体力がいりました。平日はなんせ時間がない。なので、できるだけ未着手の開発部分に手を出していく（出来ているところの修正、調整は後回し）ことを意識して、全体が何となくできている状態が早くできることを目指しました。
あと、技術的に不安がある部分はとにかく先にやりました。今回でいうとTwitterログイン、Twitter投稿（ツイッターカード）、年表登録フォームのデザインでした。なので初日、2日目に手を付けました。経験がないことに着手するのって体力がいると思うのですが、情熱が強い初期に持ってくことで乗り越えやすくなると思います笑

Twitter投稿（ツイッターカード）については1/27（日）の時点で表示されない問題にぶち当たります。ここは本当に反省点なのですが、最初に確認したときはmetaタグを手打ちして確認してたんですよね。ちゃんとVueで描画するとこから確認すべきでした。

こんな感じです！！

今注目のAIアプリを簡単に作れる、「AIメーカー」のAPIを公開しました！

2018-09-23T05:58:30+09:00

こんにちは、2z（Twitter： @2zn01 ）です。

先日、今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！

■AIメーカー
https://aimaker.io/

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！①AIに覚えさせたいタグを入力②タグから自動で画像データを収集③AIがデータから学習の３ステップで誰でも簡単にAIを作れます！動画では手相占いのAIに挑戦！みんなもAIを作って遊んでみてね！https://t.co/66DFU7GRZ2 pic.twitter.com/ie1LmioyA1
— 2z＠AIメーカー (@2zn01) 2018年7月19日

そのときにまとめた記事でこんなことを言ってました。

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を作ってみた
https://qiita.com/2zn01/items/0d3147c9d9d804ad9880

・オープンなAIを目指したい

百科事典ならwikipedia、地図ならOpen Street Mapのように、みんなが作ったAIをオープンに公開し、みんなでAIを便利に活用できる、そんな場所があったら面白いし、便利じゃないかと考えました！
・みんなのAIプラットフォームへ

AIをクローズドなものとして囲い込むのではなく、もっとオープンにみんなで共有すればもっと便利さを享受できると考えました。

そして、こんなAIが欲しいというのがあったら、みんなで協力してアイディアを出して、みんなで学習データを集め、AIを作ってみるのも良さそうです。

学習が完了したAIはみんなで活用します！みんなハッピー！

作ったAIをオープンにみんなで共有し、みんなで活用する「みんなのAI」プラットフォームを目指しますと。

API公開しました

ようやくですが、AIを作るだけでなく、AIメーカーで作成したAIをwebサービスやアプリに組み込めるようにAPIを公開しました！

AIメーカーのAPIは自分が作ったAIはもちろんですが、他の方が作った公開されているAIもAPIとしてみんなで活用できます。

APIの呼び出し方法

HTTPリクエスト

POST https://aimaker.io/image/classification/api

クエリパラメータ

パラメータ	型	説明
id	integer	モデルのIDを指定してください。
apikey	string	APIキーを指定してください。
file	binary	画像ファイルを指定してください (jpg, png, 10MB以内)

モデルID、APIキーについては、AIメーカーの各モデル画面の「APIを使う！」をご覧ください。
https://aimaker.io/app/image-classification/id/1

各モデルは以下URLのみんなのAIから検索頂けます。
https://aimaker.io/app/search

CURLでAPIを実行する場合

curl -X POST -F id=$id -F apikey=$apikey -F "file=@/path/to/image/sample.png" "https://aimaker.io/image/classification/api"

成功時のレスポンス

JSON形式


{
    "state": 1,
    "url": "https://aimaker.io/sample.png",
    "labels": {
        "0": {
            "score": 0.997,
            "label": "ラベル0"
        },
        "1": {
            "score": 0.003,
            "label": "ラベル1"
        }
    }
}

失敗時のレスポンス

JSON形式


{
    "state": 0,
    "messages": [
        "不正なアクセスです。"
    ]
}

APIの活用例

あくまで一例ですが、以下のような活用が可能かと思います。

webサービスに画像認識を組み込む
アプリに画像認識を組み込む
LINE BOTなどで画像認識Botを作る

AIメーカーとそのAPIを使うことで、自分で画像認識モデルを作る手間を省いてシステムに組み込めるので、ぜひご活用ください。

最後に

AIメーカーを使って、AIで遊んでみてください！

■AIメーカー
https://aimaker.io/

みんなのAIは以下のURLから検索頂けます。
https://aimaker.io/app/search

「AIメーカー」はまだまだ構想の一部しかできていないので、僕も頑張ってこれからもっと機能を追加していきたいと思っています。
「みんなのAIプラットフォーム」となれることを目指します！

AIメーカーに少しでも興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします！

Twitter： @2zn01
note： @2zn01

AIメーカーでは、以下のようなことができます。

・画像認識

今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！①AIに覚えさせたいタグを入力②タグから自動で画像データを収集③AIがデータから学習の３ステップで誰でも簡単にAIを作れます！動画では手相占いのAIに挑戦！みんなもAIを作って遊んでみてね！https://t.co/66DFU7GRZ2 pic.twitter.com/ie1LmioyA1
— 2z＠AIメーカー (@2zn01) 2018年7月19日

・文字起こし

みんな～！「AIメーカー」で文字起こし機能をリリースしたよー！以下の方法で簡単に文字起こしを試せるので、ぜひ使ってみて～！！??YouTubeから文字起こし??画像、音声、動画から文字起こし???録音で文字起こしAIをうまく使って少しでも面倒な作業から解放だぁ～！https://t.co/qo13Wo6Yli pic.twitter.com/gsRigVROnK
— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) 2018年8月18日

・月の絵文字でモザイクアート

【お知らせ】月の絵文字でモザイクアートが作れる機能を作りました！画像をアップロードすると、それをもとに月の絵文字を使った絵を描いてくれるので、ぜひ遊んでみてね～！https://t.co/zt3vzPNZS0 #AIメーカー #月で絵を描く pic.twitter.com/bowo1hlpXV
— 2z＠AIメーカー開発者 (@2zn01) 2018年9月14日

2005～2009年あたりのWeb開発がどんなのだったか

2018-09-18T06:28:14+09:00

現在Web開発といえばバックエンドであればRuby, PHP, Python, Node, Elixir等、フロントであればReact, Vue, Angular等を自由に選び、インフラもHeroku, Firebaseやその他サーバーレス構成で無料運用など選んで使え、バラエティに富んだ方法で自分の個性にあったものを使い楽しく行うことができる。

でも、2005～2009年頃はそうではなかった。ふと思い出したので色々調べつつ色々書き出してみる。（個人の知識をベースにした内容のため、知らない部分を含めると間違っている部分もあるかもしれない。また各年の記述はWikipediaでざっと調べたので違ってる可能性もあるかも知れない）

プログラミング言語

確かWeb界隈で主に使われていたのはJava, PHP, Perl, Ruby, JavaScriptだったと思う。会社での業務でどうだったかは知らないが、レンタルサーバーで使えるということでとにかくサーバーサイドはPHPとPerlの人口の割合がかなり多かったのではないかと思う。フロントで必要だったのでJavaScriptは当然よく使われていた。

PHP

このころは一応PHP5も出ていたようだが、調べてみるとリリースされたばかりの過渡期だったようで、PHP4もまだかなり使われていた。当時のさくらインターネットのニュース等を見てみるとまだまだ新しいバージョンを使えるようにしていて現役っぽい感じがする。

さくらのレンタルサーバ PHP 4.4.2-dev(開発版) 提供のお知らせ

バージョンの違い問題

前述の通り、PHPのバージョンの過渡期であり、どこを見ても違うバージョンが動いていた。この頃は当然Dockerもないので、とにかくローカルやサーバーでPHPのバージョンが違って動かなかったりという感じで混乱しまくっていた気がする。

フレームワーク乱立問題

PHPは色々なフレームワークが作られていた。Mojavi, Zend, CodeIgniter等。

特にCakePHP1が革新的で、この頃はかなり高いシェアを誇っていたのではないかと思う。僕自身スクリーンキャストを見た時の興奮は計り知れない。あっという間にWebアプリケーションが作れてしまうのだから。この頃はまだPHP4用と5用のモデルクラスに分かれていて、内部で振り分けられていたりした。その後CakePHPとCodeIgniterだけが残って行ったように思う。

じゃあ何が問題なのかというと、この頃は各個人、各社の間で独自のオレオレフレームワークを作る事が大流行してしまっていた。単に遊びで作るだけなら良いのだが、普通に業務でも使われていたりした。仕様もよくわからないし、そもそもCakePHP等と比べると何も便利ですらないしものすごくコード量も増えるので、本当に大変だった。

僕自身ちいたんというフレームワークを作って一般公開していたりした（結構使ってくれたりWeb上で解説したりしてくれる人がいた）。もちろんそれを仕事でも小さい案件で使ったりしたので、ちょっと前に修正依頼が来た時に非常に後悔した覚えがある。

PHPの歴史上大量の技術的負債を発生させた時期だったと思う。

Perl

これもCGIの動くレンタルサーバーでは使えるのがデフォルトだったので、非常によく使われていたのではないかと思う。とくにはてなやmixiが実際に業務でもガンガンに使っていたのでそれが人気に拍車をかけていたと思う。なんとなくPerlを使いこなせる人はかっこいい、みたいな印象があった気がする。

サーバーの構築を説明しているサイトなどでも、Apacheの設定方法を解説しているページではとりあえずperlを動かして動作確認する説明が入っていたりした。

Ruby

ある時からRuby on Railsがめちゃくちゃ流行りだしていた気がする。ナウいし名前もカッコいいしGemも使えるという現在のモダンな思想に一番近いものだったので。

ただレンタルサーバーでは使えないので、恐らく個人で色々サービスを作る人達や、自分でサーバーを構築できる時の業務などでどんどん使われ始めていったのではないかと思う。

JavaScript

Node.jsは当然この時期には無いのでフロントのみに用いられていた。Ajaxという言葉がむちゃくちゃ流行っていた。

jQueryがまだ出始めだった時期で、でもその便利さから一気に流行っていった気がする。

それまでは主にprototype.jsというライブラリが使われていた。たしかほとんどidベースでしか要素を取ってこれなかったのではなかったかなと思う。僕の昔の開発物にも残っていたりするので非常に困る。特にjQueryと同様$を使っているのが。当時も名前をどうしても覚えられず今もうまく検索できず見つけられないのだが、scriptなんとかciousという色々すごいことができる拡張ライブラリもあった。

当然Webpackなどもないので、他のjsファイルをロードしたい場合にはscriptタグを動的に追加するみたいなことをしていた気がする。

ちなみに当時はまだガラケーがよく使われていたが、JavaScriptが動かないので使えなかった。

あとjQuery.mobileっていうSPAが当時既に存在していたの知ってるだろうか。あれも設定不足でリンクの挙動とかが変わっちゃったりして結構色々な人を苦しめていた気がする。

Python

僕は使っていなかったので謎。でもPythonで作られているライブラリなどは時々見かけた気がするので、結構使われていたのかもしれない。（特に海外で？）

調べてみるとDjangoも一応2005年にリリースされていたらしい。

インフラ

当時は今みたいなクラウドサーバーとか、Herokuみたいに簡単にデプロイできるサービスとか、サーバーレスなんてものはなかった。

レンタルサーバー

多分今よりレンタルサーバーが使われる機会が多かったのではないかと思う。ロリポップ、エックスサーバー等。特にさくらの共用レンタルサーバーとかが使われることが多かったのでは？　さくらはssh接続が使えたので便利だった（エックスサーバーも当時から可能だった？）

専用サーバー

それ以外には専用サーバーになってしまうので、初期費用別で毎月１万円近くかかってしまうこともあったが、サービスを運営している人は個人でもそういうのを使っていた人は多いのでは。運営者のブログとか見ると専用サーバーを使っているとかちょこちょこあった気がする。

VPS

あとはVPSも出てきていたので専用サーバーよりは安くなっていったと思う。ただ、パフォーマンスが良くなかったり調子が悪かったりして結構文句の声も上がっていた気がする。

AWS

調べてみると2006年くらいにEC2も出てきてたらしい。確かにどこかの時期でAWSを使っているという人やネットでも情報が出始めたりしていた。結局個人ではやはり高くて僕は手を出せなかった気がするが。

当時はAmazonといえば本を売っているサービスだったので、なんでそんな会社がサーバーのサービスをやっているのか不思議に思っていたが、今考えればあれだけ流行っていたサービスを運営している会社であれば何も不思議ではなかった。当時からアソシエイトやAPIなど、技術的なことに関しては先進的だった気がする。やはり歴史が長いので現在も一強なのは頷ける。

ブラウザ

PC

Chromeは2008年にリリースされたため、それまでは存在しなかった。それまではIE、Firefox、Safari、Operaあたりが主に使われていた。IEがかなりシェアが高く、Firefoxもめちゃくちゃ多かった気がする。SafariやOperaはどうだったんだろう？

何にしろ開発中に、SafariやOperaだとちゃんと動かないんですが、みたいな報告はあった。

Chromeが出てからは、とにかく速いということで一気にChromeユーザーが増えていった気がする。

携帯

まだガラケーがメインだったと思う。日本でのiPhone発売が2008年らしい。

JavaScriptは動かないし、HTMLやCSSもまともに動かなかったり、GPS等を使うのに特殊な方法が必要だったり、そもそもau、SoftBank（この頃vodafone?)、DoCoMoで挙動が違うのでそれぞれ実装しなきゃいけなかった。

Flashも動的に動かすためにはプログラムで直接中身を動的に書き換えたりするとかで、本当にガラケーはWeb開発界隈的には最悪な環境だった。スマホとPCだけ気にすればいい今の時代はかなり恵まれている。

デザイン

僕はデザイナーじゃないので詳しいことはわからないが、一応色々触った範囲で覚えていることを書いておく。ちなみにこのあたりはちょっと前にかなり流行った下記の記事の方が参考になる。

若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA

CSS

とにかく単なるCSS。WebpackもないのでSCSS等は無い。と言いたいところだが調べてみるとScssはFirst appearedが2006年になっている。多分Gemとかでは早くから使われていたのかもしれない。

とはいえできることは少なかった。角丸もないし、Flexboxも、box-shadowも、transitionのようなアニメーション系も。beforeとかafterとかも？　とにかくそういうのは全部divとかtableで画像を組み合わせてやっていた。

余白を作るために1pxの画像を使っていたため、どのプロジェクトにもそういう画像が置いてあった。でもよく考えたらなんでなんだろう。paddingやmarginはあったと思うが…。

IE問題

Flexboxがいつから出たのかは忘れたが、とりあえず当時はなかったので全部floatを使ってレイアウトは実装されていた。いや、正しくはまだdivではなくtableをネストしまくるデザインが多かったので、過渡期ではあった。

何にしろfloatによるデザインが進んでいたのだが、IEが自己中心的な仕様でHTMLとCSSを解釈していたため、IEとFirefoxで表示が変わってしまうという問題が多発し、どちらにも対応するために変な決まった実装方法でないとダメ、みたいな感じになっていた。逆に面倒だからもうtableのままでいいや、みたいな人も結構いたのではないだろうか。

多分Chromeの出現から、どんどんIEの異常性の認知が進んでいったのではないだろうか。結構IEが正しいのになんでFirefoxは、という間違った情報も飛び交っていた気がする。

Flash

当時、HTML5もCSS3もcanvasも無かったので、みんなWeb上のリッチコンテンツとしてFlashを使っていた（DOM操作のものもあった）。全部コードで書けるエンジニア向けのFlexというのもあった。

Flash職人みたいな人たちがたくさんいて、毎年2chで紅白みたいなのをやっていた。

エディタ

AtomやVisual Studio Code等は無い。僕はさくらエディタを使っていた。一応Eclipseとか有料の物含めIDE的なものはあったと思うが、正直これぞ、というものはなかった。秀丸も使っていた人がまだ多かったのでは。

そんな中2008年にSublime Textができたらしいので、流行ったのは納得がいく。

Vimmerは多分ずっとVimを使っていたのだろう。僕もmacユーザーだったら恐らくVimしか使っていなかったと思う。

バージョン管理

Subversionが主に使われていたと思う。一応2005年にGitもリリースされていたようだが、GitHubが2008年らしいので恐らく日本でGitが流行りだしたのはそのへんではないだろうか。

ちょっと前にも使う機会があったが、全ての処理がリモートでまともなブランチ運用ができず、ローカルで失敗してもやり直せばOK、みたいなのもないので正直仕事として使うのは無理があったように思う。本当に今はGitがメインになりいい時代になった。

サービス等

Twitter

2006年からとのこと。多分それからすぐOAuth認証が実装されたわけではないと思うので、今みたいな簡単なソーシャルログイン実装等はできなかったのだろう。

mixi

2008～2009年頃にmixiアプリが実装された。多分国内初のソーシャルアプリプラットホームで、個人的にかなり熱かった。ぼくもここで法人化してネココレース、本格小説といった売れないアプリを出したりした。

これからどんどんmobageやGREEでも始まり、ガチャをメインとしたカードゲームやキャラ集めソーシャルゲームが流行っていった。開発に携わった方も多いのではないだろうか。

情報収集系

何だったんだろう！？　全く思い出せない。はてなブックマークもまだ出てなかったか、出てすぐなので今みたいなエントリー一覧は無かったのでは？

クラウドソーシング

ランサーズは2008年くらいに登場していたようだが、それまでは恐らく@SOHOやさぶみっとのマッチングサービスが主流だったのではないだろうか。現在のランサーズやクラウドワークスとは違い、サービス内で費用のやり取りがなかったため、フリーランスは直接顧客を見つけることができメリットが大きかった。（その分サービス運営側のメリットが少なすぎたのではないかと思うが）

まとめ

発展途上のものが無いわけではないが、今は本当にいい時代。

個人的に技術界隈のものはほとんどがファッションと同じだと思っている。プログラミング言語も、フレームワークも、その他環境も、初心者or熟練者であるかも、広くいろいろ学びたいor一つの事にのめり込みたいかさえも。

みんな仲良くいがみ合わず、他者の興味のあるファッションを尊重しつつ、好きなものを使って楽しくWeb開発していこう。

あと正直この記事書いてる事自体が楽しかったので、他にも昔のアプリ業界とか、昔のIoT業界とか、昔の機械学習業界とか、書ける人がいたら是非書いてほしい。

「AIメーカー」で月の絵文字によるモザイクアートを作ってみた

2018-09-15T10:20:20+09:00

止まるんじゃねぇぞ...

【お知らせ】月の絵文字でモザイクアートが作れる機能を作りました！画像をアップロードすると、それをもとに月の絵文字を使った絵を描いてくれるので、ぜひ遊んでみてね～！https://t.co/zt3vzPNZS0 #AIメーカー #月で絵を描く pic.twitter.com/bowo1hlpXV
— 2z＠AIメーカー (@2zn01) 2018年9月14日

はじめに

こんにちは、2z（Twitter： @2zn01 ）です。
はじめてのCrieit記事です。

誰でも気軽にAIを使える＆作れる！みんなのAIプラットフォーム「AIメーカー」を開発しています！

■AIメーカー
https://aimaker.io/

これまでにリリースした機能は以下をご覧ください

AIメーカーでオープンイノベーションを！！みんなのAIプラットフォームとして自分の考えている構想、実現したいことをまとめましたので、ぜひご覧ください！（あと、1いいねで600いいね??）on @Qiita https://t.co/73fNAWyBtz #AIメーカー
— 2z＠AIメーカー (@2zn01) 2018年8月11日

昨日リリースした「AIメーカー」の文字起こし機能について、Qiitaの記事にまとめました。ぜひ読んでみてください！https://t.co/m9D6JBMgu5 #AIメーカーでは今後、画像生成、音楽生成、自然言語処理など様々な分野への対応に挑戦予定です！応援リツイート、いいねなど、よろしくお願いします！
— 2z＠AIメーカー (@2zn01) 2018年8月19日

今回作ったもの

月の絵文字でモザイクアートが作れる機能を作りました！
画像をアップロードすると、それをもとに月の絵文字を使った絵を描いてくれます。

以下のURLからお試し頂けます。
https://aimaker.io/mosaic-art/

【お知らせ】月の絵文字でモザイクアートが作れる機能を作りました！画像をアップロードすると、それをもとに月の絵文字を使った絵を描いてくれるので、ぜひ遊んでみてね～！https://t.co/zt3vzPNZS0 #AIメーカー #月で絵を描く pic.twitter.com/bowo1hlpXV
— 2z＠AIメーカー (@2zn01) 2018年9月14日

開発のきっかけ

以下の記事を見て、すごい！面白い！と思ったのがきっかけです。

■月で絵を描きたいだと？それならpythonに任せなさい
https://qiita.com/wataoka/items/261fc12c956a517049d8

さらにこれをweb上でユーザが好きに画像をアップロードして、月の絵文字のモザイクアートを作れるようにしたら面白いなかと思い、作り始めました。

上記のQiitaの記事で画像を月の絵文字へ置き換える機能は既に紹介されていましたので、僕がやったのはwebシステムに組み込んだだけになります。
とはいえ、開発には6時間ほどかかりました。

仕組み

画像を月の絵文字に置き換える仕組みについては、以下の記事をご覧ください。

■月で絵を描きたいだと？それならpythonに任せなさい
https://qiita.com/wataoka/items/261fc12c956a517049d8

あとは、出来上がった絵文字をブラウザに表示し、html2canvasのJSライブラリを使って画像化してるだけになります。

この月な～んだ？ https://t.co/NGXQiIxNU3 #月で絵を描く
— 2z＠AIメーカー (@2zn01) 2018年9月13日

最後に

今のお気持ち... https://t.co/ZapVEJOi1E #月で絵を描く
— 2z＠AIメーカー (@2zn01) 2018年9月14日

というのは冗談で(笑)

ぜひ色んな画像を月の絵文字のモザイクアートにして遊んでみてください！
https://aimaker.io/mosaic-art/

Windowsで快適なWebシステム開発を行えるか検証中

2018-07-30T06:37:43+09:00

僕はここ数年Linux MintというUbuntuベースのOSでWebシステム開発と日常の趣味活動の全てをまかなっていました。

PCの劣化に伴い新しいPCを購入したのですが、せっかくなのでWindows10 Proそのままでどこまで不便なくやっていけるか試してみました。

特に気になっていたところ

快適なシェル生活が可能か
Dockerは問題なく使えるか
ファイルの改行コードや属性など

シェル

Linuxの場合シェルはデフォルトでBashのため、あらゆることを何も深く考えずにスムーズに使うことができました。Windowsでもなるべく快適に使っていきたいところです。

シェルを使い分ける

Windows10の場合は下記のシェルが利用できます。

デフォルトのPowerShell
Git Bash（Gitインストール時にインストールされる）
Windows Subsystem for LinuxのBash

PowerShell

PowerShellは現在はWindowsのデフォルトのシェルになっています。使い方を見てみると、何やらよく分からない長い名前のコマンドがたくさん用意されているようです。例えばフォルダの移動はSet-Locationなど。

ただ、様々なコマンドにエイリアスが用意されていて、Linuxと同じコマンドも結構あります。例えばls, cd, cat等は普通に使えます。

他にもTabキーでパスを保管できたり、Ctrl+rでBashのようにコマンド履歴から検索したりすることができ、わりと使い勝手は悪くないです。あとは下記のURLにもあるように、設定を行えばGitの補完などもできるようになったりするようです。

Git - PowershellでGitを使う

僕も入れてみましたが、多分公式のGitHubの説明どおりに入れた方が良いと思います。色々変なやり方をするとエラーが出まくります。

dahlbyk/posh-git: A PowerShell environment for Git

インストールしてうまく動かなかったらPSModulePathという環境変数に、インストールされた自分のドキュメントフォルダ以下のWindowsPowerShell\Modulesのパスを入れておきましょう。

Windows Subsystem for Linux

通称WSLです。WindowsでUbuntu等のLinux環境を動作させることができます。Ubuntuを入れればUbuntuと全く同じコマンドを使うことができます。apt等も使用できます。

PowerShell上でwslと実行すれば開くことができますし、レジストリの設定をすればエクスプローラでォルダを右クリックして実行することなどもできます。WindowsにあるソフトウェアよりLinuxのソフトウェアを直で使った方が使い勝手が良い、という場合にかなり便利です。

Git Bash

Git BashはWindowsでGitをインストールすると同時にインストールされているものです。Windows上で気軽にBashを使うことができ非常に便利です。

Bashなら前述したWSLのBashを使えばいいのでは？　と思うかもしれませんが、WSLの方は完全に環境が独立してしまっているため、使いづらいところがあったりします。Git BashはWindowsの環境を共有していますので、Windowsのプログラムも実行できますし、パスや設定等もWindowsのものを共有していますし、何気に結構便利です。

このようにPowerShell, WSL, Git Bashを適切に使い分けていくとなかなか快適なシェル生活を過ごすことができます。

ソフトウェアなど

Windowsで使えるソフトウェア

Windowsだとやはりソフトウェアが充実しているので、何も考えずに色々使えるので安心です。Linux Mintの時はGitを操作する時はGitとTigとVisual Studio CodeのGit操作をそれぞれ使い分けていましたが、Windowsだと普通にSourceTreeが使えるので安心です。（ただ、何気にLinux MIntの時もその組み合わせだとむちゃくちゃ快適ではあったため特にSourceTreeを使う必要性は感じませんでした）

あとはWeb開発に関係ないですがちょっとしたゲームやソフトウェアをあまり深く考えずインストールできるというのはやはり安心できるところです。

Docker

Windows10もPro版であればDockerが使えます。時々うまく動かなくなったり回線が繋がらなくなったりする時があるのでLinuxの時ほど安定しているとは言い難いですが、特に不便はなく使えています。

以前Nortonを数年分買っていてまだ使えたためとりあえず入れていますが、DockerへのSamba接続を許可しないとvolumeが共有できなかったり、というところはあるのでちょっと気をつける必要があります。

Pro版でない人も、最近だとWSLの方でDockerが使える、といった情報があるようです。

言語env系

rbenvとかpyenvとかはWSLに入れました。Windowsだと対応していなかったりするため、直でUbuntu側に入れて使った方が良さそうでした。

あとはnvmなども入れています。一度Windowsに入れていたのですが、インストールするパッケージによってはビルド時にVisual Studioをインストールしていないとビルドできないものなどがあり、そんな重いものはインストールしたくなかったのでWSL側に入れました。

ただ、WSLに入れてしまうとエディタ連携などができないため、サーバーサイド系の言語はとりあえずWindows側にも最新のバージョンのものを入れておく、等が必要だったりします。そのため容量には少し気をつけなければなりません。Dockerだけでなんとかするよ、という人は何もインストールしなくて良いのかもしれませんが、ちょっとあれこれ全部満たすには面倒そうな気がしました。

Visual Studio Code

VSCodeはOS関係なく使えるので別に何も問題はないのですが、Windowsだとデフォルトの改行コードの設定がCRLFになっています。LFに設定を変えておきましょう。

Git

Gitも属性周りがちょっと怖いので、下記などを設定しておきましょう。

git config core.filemode false

Windowsメニューのランチャー

Windowsキーを押すとWindowsメニューが出てきますが、そこでそのまま文字入力をはじめると、実行したいアプリケーション等を適当に検索してそのまま実行すること等ができます。デフォルトでここまでできるとはあまりにも快適でびっくりしました。これはかなりプラス評価でした。

まとめ

色々書きましたが、とにかくシェルをいかに使っていくかがWindowsでの快適なWeb開発生活をおくれるかどうかの鍵になってくると思います。PowerShellだけだったら多分Windowsを使うという選択肢はなかったと思います。今のところLinuxの時とさほど変わらない快適度は保っていると思います（まだ新しいPCの方が高速なのでそれだけでも非常に快適）。

とはいえこれからもまた色々問題は出てくるかもしれません。実際に使い始めて数日はnpmでビルド失敗エラーが出たりDockerのvolumeが連携されなかったりで挫けそうになっていました。また色々と試していきます。

WEBサービスを作りたい人への最初の１歩の勉強方法アドバイス

2018-04-09T15:41:27+09:00

発端

先日プログラミング等でWEBサービスを作りたいのだがどうすればよいか、という問い合わせが来た。

Twitterの奥深く、普段誰も訪れないような僕のアカウントのところまでどうやってたどり着いたかは謎だったが、一応色々考えつつどうやって進めたり勉強したりすればよいかを回答してみた。せっかくなのでその回答を当記事としてまとめてみた。

前提

WEBサービスの開発を全くやったことのない方が対象
デザインの方をメインでやりつつ開発したいらしい
僕はWEBエンジニアなのでデザイナーではない。ただ、一人で開発することが多く一応フルスタックエンジニアとしてやっているので、デザインやフロントの最低限のことくらいは分かるのではないかと思うのでそれくらいの人によるアドバイス。
細かい話をしすぎても役に立たなかったり、初心者ということで意味が分からなくて混乱してやる気を失ってもだめなので、最初の１歩というところに特化
上記全部にあてはまる人のみなので対象となる人は少ないかも
ブログなのでなるべく分かりやすくするため推敲済
全て僕の想像なので、最終的には各々自分で決めるべき

返答

ベースとなる考え方

勉強だけよりは、何かを作りながら、わからない所を調べていく方が実践的な勉強になる
でも最近は開発に必要な基礎を勉強できるサービスも増えているので、完全にゼロで迷いながら進むよりも最初だけはそのあたりを参考にしてみた方が効率が良いかもしれない

最近周りでProgateがめちゃくちゃ流行っているように思う。プログラミングを勉強している人はみんなProgateをやっているんじゃないかと思うくらいProgateという文字をしょっちゅう見る。

ちらっと調べてみたが、無料プランで結構試せるみたいだし、とりあえず最初の勉強の仕方に悩んだらまずProgateの無料プランを試してみてから考えても良いんじゃないかという気がする。なので参考にProgateは教えておいた。

ただ、特にがっつりおすすめしているわけではない。

というのも、僕自身が古い人間で、当時はわからないことがあったら検索しつつ試行錯誤して時間をかけて、迷いながらも熱中しつつ結果として勝手に学んでいて色々出来るようになったので、その方法が一番実践的ではあると思う。

ただし、あくまでそれは自分の好きな形なので、世の中すべての人にそんな非効率かもしれない方法をおすすめするわけにはいかない。最初から正しいか間違ってるかわからない方法で時間をかけて試行錯誤させてしまうのはとても無駄で可哀想。

そのため０からでもなんとなく概要が分かる、そんなところとしてProgateを教えた。無料コースならそんなに時間もかからないと思うので、実際にやってみてその後の進め方はまた考える形で良いと思う。
それに、「Progateで○ヶ月勉強してサービスリリースしました」みたいな人を最近良く見かける。ちゃんと学習意欲がある人はそれで作れるっぽい。

ただ、あまりハマってやりすぎるのは良くない。Progateをやっている人たちの中には、何も開発せずに無意味に何周もしてるという人もいる。それはもう覚えたことを活かすことでなく、勉強することがメインになってしまっている。それで満足であれば問題ないが、自分で開発したい、というところが目標であれば決して良いことではない。

なので最初に書いたとおり、まずはざっと概要を教えてくれるところで勉強してみて、あとは実際に何かを作りながら技術を伸ばすのがベストな形だと思う。

実際に勉強する内容と優先度

上から順に優先度が高いものとなる。

HTML&CSS

WEBサービスを作るなら必須のため特筆するところはない。

JavaScript

普通のWEBエンジニアとして開発したいということであれば違うが、今回はデザインをメインでやりたいということだったのでJavaScriptを次点とした。
ブラウザ上で色々動かしたりするのに使うので、最近はWEBデザインをやるならほぼ必須だろうと思う。（とはいえガッツリプログラムを書けなきゃいけないというわけでもないので、とりあえずは概要を知っておくだけでも良いと思う）

ただ、最近はFirebase等もあり、プログラム言語としてはこれだけでもデザイナーさんがWEBサービス全部作れてしまったりもするのですごい。多少深く勉強しても良いと思う。

jQuery

たまたま今回JavaScriptを２番めにしたので、その流れで３番めになっているだけ。
とはいえデザイナーさんでjQueryを使っている人はまだ多いのではないかとも思う。
プログラムを組むというよりは、既にあるライブラリを導入したり改造したりがメインとは思う。

PHP

レンタルサーバーなどで簡単にWEBサービスのプログラムを組むことができる、一番簡単なもの。
（ユーザーや投稿データを保存したりするのに使う）

今回の話がデザイナーでなくエンジニアということであれば、JavaScriptの代わりにこちらが一番だったと思う。
ちゃんとよく分かってなくてもリリースできるので。
（ただしエンジニアの場合であれば個人的にはちゃんと勉強して色々理解したうえでリリースして欲しいのでフレームワークとか使ってほしい）

Ruby, Ruby on Rails

Rubyは役割としてはPHPと同じだが、よくあるレンタルサーバーでは使えない。
でもRuby on Railsというフレームワークのセットで非常に開発しやすくなるので、一人でシステムを高速で作る場合に非常に人気があり、
スタートアップの開発などでも非常によく使われている印象がある。
(PHPの場合はLaravel, CakePHP等のフレームワークがある）

ただ、WEBデザインメインだとフレームワークまで使う必要があるのか？　という感じ。
敷居も高く勉強に時間もかかるので、優先的にやるのはおすすめしない。

とはいえ、サーバー側も必要且つリリース環境の用意も可能だったらとりあえずこれで良さそう。
PHPのフレームワークに比べ、ワンセットになっている感が恐らく初心者には分かりやすいと思う。

優先度まとめ

何にしろまずはHTML&CSS優先的に。そして、その後ちらっとJavaScript。
あとはどういったサービスを作るかによって変わってくるのでその段階で何を覚えるか決める。
勉強するぞ、という段階では決めづらい。

初期の開発と運用のためのおまけの補足

何かサービスを作っても基本的には誰も人が来ないので、どうやって人を集めるかはよく考えておく必要がある。
例えばTwitterを使った方法で基本的なものでは下記のようなものがある。

開発中の独り言をつぶやくと、アドバイスがもらえたり、徐々にいつの間にか広まったりしてサービス開始時に有利になりやすい
開発してリリース後、サービスを利用したりテストしてくれたりする人が増え、成長しやすい
もしフォロワーさんの興味、年代など、共通な属性が見られる場合、そのへんをターゲットにしたサービスにすることでヒットを狙いやすい

ただしフォロワーが多い人向けなので、フォロワーが少ない人は別の方法を模索するか、リリースに向けて増やしておく必要がある。
（大量購入などは無意味なのでちゃんと普通に増やす。仲の良いフォロワーさんが少ない場合もあまり意味ない）

まとめ

とりあえず最初の一歩に特化して書いた。実際にきちんと勉強できるか、リリースしてうまくいくかは全て本人次第。
基本的にはうまくいかないので、ひたすら継続し、体験したことからあらゆることを学習していくことが重要。

「Webシステム開発」の記事 - Crieit

QnQ開発日誌 開発したWebサービスは俺の日記帳になった

開発中のWebサービスは友人との交換日記と化した

リーマンが5日間でWebアプリを開発してリリースした話

今注目のAIアプリを簡単に作れる、「AIメーカー」のAPIを公開しました！

2005～2009年あたりのWeb開発がどんなのだったか

「AIメーカー」で月の絵文字によるモザイクアートを作ってみた

Windowsで快適なWebシステム開発を行えるか検証中

WEBサービスを作りたい人への最初の１歩の勉強方法アドバイス

QnQ開発日誌開発したWebサービスは俺の日記帳になった