tag:crieit.net,2005:https://crieit.net/boards/web1week-202003/feed Crieitで「（3/9～3/15）１週間でWebサービスを作るイベント - お題「Home」」ボードに投稿された最近の投稿 2020-09-05T00:25:45+09:00 https://crieit.net/boards/web1week-202003/feed tag:crieit.net,2005:PublicArticle/ef3619a438d6284bef5b81e0c872659c 2020-09-05T00:25:45+09:00 2020-09-05T00:25:45+09:00 https://crieit.net/boards/web1week-202003/ef3619a438d6284bef5b81e0c872659c <p><a href="https://crieit.now.sh/upload_images/a8e3fc874211b357a62600aa3edb81cc5f525ab638d21.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/a8e3fc874211b357a62600aa3edb81cc5f525ab638d21.png?mw=700" alt="image" /></a><br /> JavaScriptで作ったゲームですにゃ。ハノイの塔と逆シューティング（避けゲー）をくっつけたら、こうなりましたにゃ。<br /> ※ここのルールとか、まだよくわかってませんにゃ。だめっぽい感じだったら、申し訳にゃいんですけど管理人さん消しちゃってくださいにゃ。<br /> <a target="_blank" rel="nofollow noopener" href="http://bigchan.sakura.ne.jp/web1week/hikkos-1e.html">（ＩＥ版）</a><a target="_blank" rel="nofollow noopener" href="http://bigchan.sakura.ne.jp/web1week/hikkos-1c.html">（Ｃｈｒｏｍｅ版）</a></p> びっぐにゃん tag:crieit.net,2005:PublicArticle/30DaysSongChallenge-30 2020-05-25T00:11:14+09:00 2020-05-25T00:20:32+09:00 https://crieit.net/boards/web1week-202003/30DaysSongChallenge-30 <p><a href="https://crieit.now.sh/upload_images/f162cd1a86585700cf6f2bce825a39465eca8ee67a2e9.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f162cd1a86585700cf6f2bce825a39465eca8ee67a2e9.png?mw=700" alt="実際に生成したカレンダー" /></a></p> <p>(この記事は後ほど更新予定です。。)</p> <p>30日間チャレンジとは ↓ の TED にて Matt Cutts さんがプレゼンされた何らかの良い習慣を身につけたり、自分に自信をつけるのに役立つものとして紹介していたものです。<br /> <a target="_blank" rel="nofollow noopener" href="https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days/transcript?language=ja">https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days/transcript?language=ja</a></p> <p>最近 Twitter のタイムラインで #30DaysSongChallenge というのに挑戦しているのですが、音楽以外にも映画、漫画、VTuber、ゲーム、何でもそういった 30日間チャレンジ出来るものがあると良いかもと思いました。</p> <p>そこで、今回はテーマが Like だったので自分の好きを広めるサービスとして 30日間チャレンジのコンセプトを少し変更して 30日間自分の好きなものを紹介してくためのカレンダーが作れるサービスを作ってみました。</p> <p>ちなみに Firebase にデプロイしようとしたけど失敗しているので、<br /> 一時的に Netlify にデプロイしています。。↓<br /> <a target="_blank" rel="nofollow noopener" href="https://challenge-calender.netlify.app/">https://challenge-calender.netlify.app/</a></p> <p>本来は作成した 30日間カレンダーを Firestore に保存して、トップページに一覧で表示することを考えていたのですが、間に合いませんでした。。</p> <p>技術的な内容やソースコードについては整理でき次第、本記事に反映させていきます。</p> nikaera tag:crieit.net,2005:PublicArticle/8a0ac4f8b82d4a8219b516b1971e05bf 2020-04-23T19:11:27+09:00 2020-05-04T07:09:44+09:00 https://crieit.net/boards/web1week-202003/8a0ac4f8b82d4a8219b516b1971e05bf <p>とっくにイベントおわっとりますが、アップしたかったので失礼します。</p> <p><a href="https://crieit.now.sh/upload_images/d3a2d6ef69562ed32fa481d0762485ed5ea16d1a217b6.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d3a2d6ef69562ed32fa481d0762485ed5ea16d1a217b6.jpg?mw=700" alt="image" /></a></p> <p>これでCrieit＆Codepenデビューだ、、！　<br /> 今回のでCodePenにjQuery設定できるのも知れました。</p> <p class="codepen" data-height="610" data-theme-id="light" data-default-tab="html,result" data-user="kenshow6" data-slug-hash="NWGdXrW" style="height: 610px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MINIBINGO"> <span>See the Pen <a target="_blank" rel="nofollow noopener" href="https://codepen.io/kenshow6/pen/NWGdXrW"> MINIBINGO</a> by オレンジみかん (<a target="_blank" rel="nofollow noopener" href="https://codepen.io/kenshow6">@kenshow6</a>) on <a target="_blank" rel="nofollow noopener" href="https://codepen.io">CodePen</a>.</span> </p> <p>見れてるかな、、？<br /> こちらでEmbedも知れた＾＾</p> <p>同じ数字がでるのはご愛敬ｗ<br /> もしよければ教えてください。自分が理解できるか不安はありますが、、</p> オレンジみかん tag:crieit.net,2005:PublicArticle/9e4947ee141866658ea5d983f7297584 2020-03-16T01:32:33+09:00 2020-03-16T02:05:14+09:00 https://crieit.net/boards/web1week-202003/9e4947ee141866658ea5d983f7297584 <p><a href="https://crieit.now.sh/upload_images/534e091001488b8038fe5c1d8ce835055e6e5e3327332.PNG" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/534e091001488b8038fe5c1d8ce835055e6e5e3327332.PNG?mw=700" alt="Image_top.PNG" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="http://eta.html.xdomain.jp/foodstuff_list.html#">公開ページ</a></p> <p>家にある食材を管理するサービスです。</p> <p>「冷凍庫」「冷蔵庫」「常温」に分けて食材を登録することができます。</p> <p>現状は最低限の機能しかありませんが、今後どんどん修正して使いやすくしていく予定です。<br /> もしよかったら使ってみてください。</p> <hr /> <h3>【使い方】</h3> <p><strong>・食材の追加</strong><br /> ＋ボタンを押し、表示された入力欄に新規登録したい食材の情報を入力します。<br /> 登録ボタンを押下すると、入力した内容の食材が追加されます。</p> <p><strong>・食材の削除</strong><br /> 使用した食材、間違えて登録した食材は削除できます。<br /> 消したい食材情報の右横にある✖︎ボタンを押すと、削除できます。</p> <p><strong>・今日切れ、期限切れ食材アラート機能</strong><br /> 食材の期限を登録しておくはことで、期限切れ・今日切れの食材がある場合にページ上部に「今日切れの食材があります」というボタンが表示されます。<br /> クリックすると期限切れ・今日切れの食材一覧が表示されるページへ移動します。</p> <hr /> エンリコ@育児×エンジニア tag:crieit.net,2005:PublicArticle/9ff43897909f52978add209332309c32 2020-03-15T23:53:21+09:00 2020-03-15T23:53:21+09:00 https://crieit.net/boards/web1week-202003/9ff43897909f52978add209332309c32 <p><a href="https://crieit.now.sh/upload_images/4cc72ef4782360f5ec29e69b524532c25e6e3c4c7f0fb.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/4cc72ef4782360f5ec29e69b524532c25e6e3c4c7f0fb.png?mw=700" alt="timer-screenshots.png" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://shinchoku-timer.web.app/">公開ページはこちら</a></p> <p>家に帰る途中、「帰ったら絵を描くぞ！」とか「今日こそコード書くぞ！」とか思うことってありませんか？そういうのって大抵帰るとやらないんですが。<br /> そんな自分への戒めの意味も込めて、この「帰ったらやる」の気持ちを保存できるサービスを作ってみました。</p> <h2>使い方</h2> <ol> <li><p>オフィスのお昼休み、家に帰る途中、授業中、ふと「帰ったら〇〇したいな...」の気持ちが湧いたら、「やること登録」に記入します。<br /> <a href="https://crieit.now.sh/upload_images/88ccd14069042161e54a66a6635914ea5e6e3c92ed626.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/88ccd14069042161e54a66a6635914ea5e6e3c92ed626.png?mw=700" alt="localhost_8080_(iPhone X) (2).png" /></a></p></li> <li><p>帰宅後、「やること一覧」から登録したやることを選択します。</p></li> <li><p>タイマー画面が開くので、「はじめる」をタップして指定した時間みっちり取り組みます。<br /> （一時停止ボタンは<strong>あえて</strong>設置していません）<br /> <a href="https://crieit.now.sh/upload_images/5aedbf3cc634fe1b8df7b8029f68386d5e6e3cf6cfd51.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5aedbf3cc634fe1b8df7b8029f68386d5e6e3cf6cfd51.png?mw=700" alt="localhost_8080_(iPhone X) (3).png" /></a></p></li> <li><p>終わったら記録します。<br /> <a href="https://crieit.now.sh/upload_images/a66bd85893be1252cc76be4b532b029c5e6e3d99e55f1.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/a66bd85893be1252cc76be4b532b029c5e6e3d99e55f1.png?mw=700" alt="shinchoku-timer.web.app_tasks_-M2TXFuuteQwiyetNPoo(iPhone X) (1).png" /></a></p></li> <li>記録した「やること」は「過去の記録」で後から見返すことができます。</li> </ol> <h2>推しポイント</h2> <ul> <li>一枚の画像も使っていないため超軽量</li> <li>機能が少ないのでUIが分かりやすい（間違えようがない）</li> </ul> <h2>技術的な話</h2> <p>普段はRailsで開発しておりナウい構成は殆ど触れたことがなかったのですが、今回思い切ってFirebase + Vue.jsというナウナウな構成を試してみました。<br /> 期限も1週間と短く、知識が無い状態では完全に賭けだったのですが、驚くほどスムーズに開発できてびっくりしました。<br /> 何より「無駄がない」というのをひしひしと感じます。これは一度体験したら戻ってこれないというのも頷けます。</p> <h2>今後</h2> <p>このアプリ、お世辞にもまだ完成とは言えない代物です。</p> <ul> <li>使い方を押しても何も出てこない</li> <li>ページ遷移してからコンテンツロードまでの0.5秒くらい表示がおかしくなる</li> <li>「タスクを作成しますか？」みたいなダイアログが一切ない</li> <li>Twitterでシェアとか付けたいよね</li> <li>完了したタスクの統計とかやりたいよね（今月は何分頑張ったみたいな）</li> <li>家に帰ったら「やれ！！！」って通知してほしいよね</li> </ul> <p>みたいな改善点はたくさんあるので、これらを改善してからもう一度Twitterで公開してみようかな...と思っております。<br /> 折角作ったのにweb1week終わってポイ、だと悲しいですし。</p> <p>もししばらくして、もう一度このアプリを見かけるようなことがあれば、ちょっとだけ見てみてもらえたら嬉しいです。</p> <h2>最後に</h2> <p>今回、web1weekに参加させていただいたおかげで、FirebaseやVue.jsといった今まで触れてこなかった技術に触れることができ、また一つのアプリを完成することができ、何より引きこもり生活でなまった体を開発モードにできたのはとても有り難いことでした。<br /> イベントを開催していただいただらさん、そして参加者の皆さん、本当にありがとうございました。</p> ふりかけ tag:crieit.net,2005:PublicArticle/6da8da7004abdb2cce6de01a55f82985 2020-03-15T23:50:27+09:00 2020-03-16T13:02:37+09:00 https://crieit.net/boards/web1week-202003/6da8da7004abdb2cce6de01a55f82985 <h1>ホムポジ診断とは</h1> <p>ホムポジ診断は、キーボード先生の簡単な質問に回答するだけで、<br /> あなたに最適なホームポジションと出会えるサービスです。<br /> 快適なタイピングライフの一助となることでしょう。</p> <p>診断希望者はこちら <a target="_blank" rel="nofollow noopener" href="https://home-position-diagnosis.web.app">ホムポジ診断</a></p> <p><a href="https://crieit.now.sh/upload_images/ff9bd57c8f62c936a854834acf3defb35e6e3ef0c7391.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ff9bd57c8f62c936a854834acf3defb35e6e3ef0c7391.png?mw=700" alt="thumbnail.png" /></a></p> <h1>あとがき</h1> <h2>自己紹介</h2> <p>ずみこうと申します🐢</p> <p>新卒でSES会社に入って、もう直ぐ3年目になります。<br /> 普段は、バックエンドエンジニアとして、<br /> PHP成分強めで開発に勤しんでます💻</p> <h2>作ったもの</h2> <p>今回作ったホムポジ診断は、言わずもがなですがネタアプリです。<br /> 診断と称していますが、</p> <ul> <li>はりぼての質問</li> <li>ランダム表示の診断結果</li> </ul> <p>の2つで構成されています🔥</p> <h2>使った技術</h2> <ul> <li>Vue.js</li> <li>Firebase <ul> <li>Hosting</li> <li>Cloud Functions</li> </ul></li> </ul> <h2>感想</h2> <p>とにかく間に合ってよかったです...</p> <p>ホムポジ診断が、個人開発の処女作となりました👀<br /> 大したことできてませんが、個人で作ったものを世に出すというのは良いものですね！</p> <h2>さいごに</h2> <p>だらさん、素敵な企画をありがとうございました🐢</p> ずみこう tag:crieit.net,2005:PublicArticle/ee8c05c2179e34305894c8aca5226a81 2020-03-15T23:47:38+09:00 2020-03-16T12:31:46+09:00 https://crieit.net/boards/web1week-202003/ee8c05c2179e34305894c8aca5226a81 <h1>「片付け、掃除、洗濯……日々繰り返し行う家事のタスク管理を行うツール」を作りました</h1> <p>『おうちタスク』というアプリを作ってみました(^o^)</p> <p>公開ページ： <a target="_blank" rel="nofollow noopener" href="https://ouchi-task.toranos.org/">https://ouchi-task.toranos.org/</a><br /> リポジトリ： <a target="_blank" rel="nofollow noopener" href="https://github.com/tigrig29/ouchi-task">https://github.com/tigrig29/ouchi-task</a></p> <h2>概要</h2> <ul> <li>「１日１回」行う家事、「２週に１回」行う家事、「１年に１回」行う家事……とそれぞれグループ分けして家事を管理</li> <li>基本はふつーの todo アプリ</li> <li>ちょっと違うところは、グループ設定で行える「１日１回」みたいなリセット期間に応じて、<strong>タスクの完了状態がリセットされる</strong>ところ</li> </ul> <p><a href="https://crieit.now.sh/upload_images/63ef4c7eeabe0f69d11200afb15646b15e6e3ff030c0a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/63ef4c7eeabe0f69d11200afb15646b15e6e3ff030c0a.png?mw=700" alt="image.png" /></a></p> <p><a href="https://crieit.now.sh/upload_images/63ef4c7eeabe0f69d11200afb15646b15e6e3ffbcb761.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/63ef4c7eeabe0f69d11200afb15646b15e6e3ffbcb761.png?mw=700" alt="image.png" /></a></p> <h3>使い方</h3> <ol> <li>『グループを追加』で、グループを追加（ここで、上記リセット期間も設定可能）</li> <li>各グループに『タスクを追加』でタスク（家事の内容）を追加</li> <li>タスク名の下に表示されている「○」をクリックするとタスク完了（「○」はチェックマークに変わる）</li> </ol> <h3>さいごに</h3> <p>全然デザインができていないので、使いづらいことこの上ないとは思いますが……使ってみていただければ幸いです！</p> <p>※今後、ちょっとずつ改善していく予定です！</p> tigrig29 tag:crieit.net,2005:PublicArticle/ff735b2ea9df14e5ba6b89e7e7ee4f73 2020-03-15T23:45:14+09:00 2020-03-16T02:20:25+09:00 https://crieit.net/boards/web1week-202003/ff735b2ea9df14e5ba6b89e7e7ee4f73 <p><a target="_blank" rel="nofollow noopener" href="https://sharemotion-c0b74.firebaseapp.com/emotions">https://sharemotion-c0b74.firebaseapp.com/emotions</a></p> <p><a href="https://crieit.now.sh/upload_images/5bb059297aacc542a890c4160d778e495e6e3b402d27a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5bb059297aacc542a890c4160d778e495e6e3b402d27a.png?mw=700" alt="スクリーンショット 2020-03-15 23.26.27.png" /></a></p> <p><strong>概要</strong><br /> vue.jsとfirebaseを繋いで好きなもの、ことを投稿するサービスを作りました。<br /> 以前にudemyのnuxt簡易的講座の中でfirebaseという存在を知り。<br /> すげえ簡単にデータベース準備しないで投稿とかできるんだなーって感心し、アウトプット練習したいと考えていたところ、<br /> 1週間で作るこのイベントが目に止まり、やろう！と決めたのでした。</p> <p><strong>機能</strong><br /> ログイン不要で題名、内容、投稿者名、ツイッターアカウントを登録するのみ！です。<br /> ツイッター名を登録した場合はそのままリンクできたり、同じタイトルでの検索もできるようにしているので、好きなものつながりでツイッターのアカウントをフォローする、なんかつながりが増えるといいなと思ってます。</p> <p><strong>お題「Home」について</strong><br /> 自分の好きなものをシェアするアプリを練習したい、、、みたいなのはうっすら考えてたんですがお題を聞いて、<br /> 「好きなもの」＝「自分の意識、心がしょっちゅうゆく場所」＝「家みたいなものじゃない？」<br /> というこじつけで作りました。w</p> <p>が、最初からうっすら作りたいものを決めてたことで、アイディアの幅が広がらなさすぎたなあと、他の皆さんのアプリを見て思いました。<br /> みなさん面白いアイディアばっかですね。。</p> <p><strong>使った技術やら諸々</strong><br /> Vue.js / vue-router / vuetfy / firebase です。<br /> 初めてアウトプットする機能ということもあり、探り探りであんまり作り込めなかったのがちょっと反省です。<br /> あと、vuetfyはbbtstrap的に簡単にいい感じのデザイン表現できるのでもう少し読み込んでみたいなあと思います。</p> <p><del>※現段階でPC専用です。レスポンシブ化してないことに今気づいた！</del><br /> 3/16 am 2:00レスポンシブ調整しました！</p> <p><strong>最後に</strong><br /> 期間を決めて一気に作る、という経験はなかなかメリハリがあって面白かったです！<br /> ありがとうございました！</p> ひよこ橋 tag:crieit.net,2005:PublicArticle/Web-web1week 2020-03-15T23:34:50+09:00 2020-05-18T13:09:40+09:00 https://crieit.net/boards/web1week-202003/Web-web1week <p><a href="https://crieit.now.sh/upload_images/6c7ad80bc179e7750495e5e121f1f3ad5e6e3c69aaf38.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6c7ad80bc179e7750495e5e121f1f3ad5e6e3c69aaf38.png?mw=700" alt="blog.png" /></a></p> <p>「きたく報」というアプリを作りました！</p> <p>[追記 2020/5/18]<br /> Androidアプリをリリースしました。(実は3/31にリリース済みです)<br /> ちょいちょいやり残しはあるので、要望あればPlayストアのレビューなどに書いていただければと思います！</p> <p>Playストア<br /> <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/details?id=jp.techd.kitakuho&hl=ja">https://play.google.com/store/apps/details?id=jp.techd.kitakuho&hl=ja</a></p> <p>ブラウザ(現在地のバックグラウンド自動更新なし)<br /> <a target="_blank" rel="nofollow noopener" href="https://kitakuho.web.app/">https://kitakuho.web.app/</a></p> <p>まとめ [編集 2020/5/18]</p> <ol> <li><p>帰り道に「いまどこにいるか」を自動で相手に通知する <del>(予定の)</del> <del>Web</del> Androidアプリをつくりました <del>(※残念ながら作りきれずに、相手との共有や通知は一切できません)</del></p></li> <li><p>「いまでた」ボタンを押すと、自動で位置情報 を記録し、設定した駅の近辺(半径200m以内)になると通過したことが記録されます。</p></li> <li><p><del>困ったことに、ページを表示してない状態では位置情報の更新ができないので、電車に乗りながらたまにページ開いてください…！（バックグラウンドで位置情報を自動更新するようなアプリ版作ります</del>）バックグラウンドで位置情報を更新する <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/details?id=jp.techd.kitakuho&hl=ja">Androidアプリ</a>を作りました！</p></li> </ol> すずき | Takahiro Suzuki tag:crieit.net,2005:PublicArticle/3718951e682a296a23513672ccdd3320 2020-03-15T23:21:30+09:00 2020-03-15T23:28:20+09:00 https://crieit.net/boards/web1week-202003/3718951e682a296a23513672ccdd3320 <h1>おうちの画像をクリップするサービス「おうちクリップ（β）」を作成しました。</h1> <p><a href="https://crieit.now.sh/upload_images/ed73706f249731072e67c375544084fe5e6e3b7d6b28c.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ed73706f249731072e67c375544084fe5e6e3b7d6b28c.jpg?mw=700" alt="無題.jpg" /></a><br /> <a target="_blank" rel="nofollow noopener" href="http://www.gattsu09.site/">http://www.gattsu09.site/</a></p> <p>お題が「Home」ということで、おうちの写真やこだわりの家具等を共有して、他ユーザの画像に気に入ったものがあればクリップできるサービスになります。（本当はスマホ対応したかったのですが、時間不足でβ版という位置づけにしています。）</p> <p>作った背景としては、ちょうど今年の７月に家を立てる予定（契約は済み）をしていまして、まさにHomeについてあれこれ考えている昨今です。</p> <p>その中で、おうちは建売ではなくて半オーダーメイドなので、家の外観から内装まで不動産屋さんを中心に色々希望を聞かれまくるのですが、なかなかイメージがつかないんですよね…。</p> <p>それで、気になった家具とか、いい感じの家とかを撮ってスマホ内に保存しているのですが、そういうのをシェアして同じような悩みの方々の助けになれば…、あわよくば使っていただいたユーザさんの画像からお気に入りの家具候補とかみつかればいいなぁという思いで作成しました。</p> <p>一つお遊びとして、タグに「開発環境」と入力の上投稿していただくと、サービスのトップ画面に表示されるようにしています。皆さんの開発環境をシェアしていただけると嬉しいです。</p> <p>人生で２つ目のWebサービス開発となり、予想はしていましたが、正直１週間という期間は短すぎですね…。その中で色々クオリティの高いサービスを皆さん作っていて凄いなぁと思いました。</p> yuu tag:crieit.net,2005:PublicArticle/aa37a33b19e2161d30c029aeee2e9c27 2020-03-15T22:52:01+09:00 2020-03-15T22:57:04+09:00 https://crieit.net/boards/web1week-202003/aa37a33b19e2161d30c029aeee2e9c27 <h1>偉い人の言葉を眺める</h1> <p><a href="https://crieit.now.sh/upload_images/700bf984d8394c6442e1282440fdd55d5e6e33a62adcf.JPG" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/700bf984d8394c6442e1282440fdd55d5e6e33a62adcf.JPG?mw=700" alt="キャプチャ.JPG" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://codepen.io/p100ecat/pen/YzXLzxz">codepen</a></p> <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js" data-user="p100ecat" data-slug-hash="YzXLzxz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="YzXLzxz"> <span>See the Pen <a target="_blank" rel="nofollow noopener" href="https://codepen.io/p100ecat/pen/YzXLzxz"> YzXLzxz</a> by E-CAT (<a target="_blank" rel="nofollow noopener" href="https://codepen.io/p100ecat">@p100ecat</a>) on <a target="_blank" rel="nofollow noopener" href="https://codepen.io">CodePen</a>.</span> </p> <p>家で作業中、インターネットの誘惑に負ける。<br /> どうせ負けるなら偉い人のお言葉を聞いて意識高めよう。<br /> みたいな感じです。</p> <h2>経緯など</h2> <p>WEB関連、右も左も分からない状態だったのでHello Worldをしたくてつくりました。</p> <p>テレワークだけど家での仕事は集中できない。<br /> そんな人のために、ちゃんと（？）仕事が出来るよう喝が入るようなものを作ろうと思いました。<br /> （私、テレワークしませんが）</p> <p>偉い人の言葉はこちらのを使わせていただきました。<br /> <a target="_blank" rel="nofollow noopener" href="https://atsume.goo.ne.jp/HxLFhNn4N7Zb">偉人の名言100</a></p> <p>サンプルとてもありがたかったです。</p> E-CAT tag:crieit.net,2005:PublicArticle/Home-Bell 2020-03-15T22:44:31+09:00 2020-03-15T22:44:31+09:00 https://crieit.net/boards/web1week-202003/Home-Bell <h1>家のベルをただ押すだけのボタン</h1> <p>いいねボタンを無理やりお題のhomeに寄せました。</p> <p>React + Redux + Firebase</p> <hr /> <p>サイトはこちらになります<br /> <a target="_blank" rel="nofollow noopener" href="https://chomeko-test-app.firebaseapp.com/">Bell</a></p> <hr /> <p><a href="https://crieit.now.sh/upload_images/f037a46aa63afe92c122153c1785b1a65e6e2cd368282.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f037a46aa63afe92c122153c1785b1a65e6e2cd368282.png?mw=700" alt="スクリーンショット 2020-03-15 22.19.43.png" /></a></p> <h2>説明</h2> <p><strong>呼び出すボタンを押すとカウントされます。</strong></p> <p><a href="https://crieit.now.sh/upload_images/35fe08aa65cdc99707f6102c8d8242ee5e6e2de45820e.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/35fe08aa65cdc99707f6102c8d8242ee5e6e2de45820e.png?mw=700" alt="スクリーンショット 2020-03-15 22.29.58.png" /></a></p> <p><strong>もう一度押すことでカウントを戻します。</strong></p> <p><a href="https://crieit.now.sh/upload_images/e205c2338ad4f227e9eeece0e417388a5e6e2e2e08d20.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/e205c2338ad4f227e9eeece0e417388a5e6e2e2e08d20.png?mw=700" alt="スクリーンショット 2020-03-15 22.31.12.png" /></a></p> <h2>感想</h2> <p>いいねボタンを無理やりお題のHomeに寄せましたw<br /> Reactを勉強し始めて１ヶ月目の初学者です。<br /> 今回練習としていいねボタンを作って見たかったので参加させていただきました。<br /> 今回はreact-persitを使ってloca lstorageに状態を保持させて、<br /> firebaseでカウントの合計値をdatabaseにデータを保存しています。</p> <p>時間があまり取れない中の挑戦だったので、荒いところが多々ありますが、<br /> すごく勉強になりました！</p> <p>よかったら押して見てください！</p> <h3>github</h3> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/chomeko/Bell">github Bell</a></p> ちょめこ.react学習中 tag:crieit.net,2005:PublicArticle/661fc53a1809d108713c0ebcb2e0ab17 2020-03-15T22:28:28+09:00 2020-03-15T22:49:43+09:00 https://crieit.net/boards/web1week-202003/661fc53a1809d108713c0ebcb2e0ab17 <p>立体ホームラン競争というミニゲームを作りました！</p> <h1>はじめに</h1> <p>最近 PS4 の <a target="_blank" rel="nofollow noopener" href="http://ryu-ga-gotoku.com/hokuto-ga-gotoku/">北斗が如く</a>というゲームでトロコン目指すために、<br /> デスバッティングというミニゲーム的なやつを遊んでいました。</p> <p>web1week は参加したいけどアイデアが全く沸かない状態だったので、<br /> 本当は参加を見送ろうとしていました。。</p> <p>そんなとき、北斗が如くの <a target="_blank" rel="nofollow noopener" href="http://ryu-ga-gotoku.com/hokuto-ga-gotoku/adventure/detail.html?target=detail03">デスバッティング</a> にインスパイアされ、<br /> "ホーム" ランというこじつけテーマでなら参加出来そうかも！と思い立ちました。</p> <p>そこで急遽土曜日の 14時頃から着手して、<br /> 今日なんとかギリギリでミニゲームを作成することが出来ました。。</p> <p>それがこちらです↓<br /> <a target="_blank" rel="nofollow noopener" href="https://rittai-homerun.netlify.com/">https://rittai-homerun.netlify.com/</a></p> <p><a href="https://crieit.now.sh/upload_images/56a096edb0efac733029ddbd828161be5e6e24c546dca.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/56a096edb0efac733029ddbd828161be5e6e24c546dca.png?mw=700" alt="スクリーンショット 2020-03-15 21.50.17.png" /></a></p> <h1>採用した技術</h1> <p>今回は、React の <a target="_blank" rel="nofollow noopener" href="https://ja.reactjs.org/docs/hooks-intro.html">hooks</a> と <a target="_blank" rel="nofollow noopener" href="https://www.babylonjs.com/">Babylon.js</a> + <a target="_blank" rel="nofollow noopener" href="https://www.typescriptlang.org/">TypeScript</a> の勉強も兼ねて、<br /> それらの組み合わせで開発してみようと挑戦してみました。</p> <p>ソースコードは GitHub にアップしておきました↓<br /> <a target="_blank" rel="nofollow noopener" href="https://github.com/nikaera/homerun_derby">https://github.com/nikaera/homerun_derby</a></p> <p>また、今回初めてホスティングに <a target="_blank" rel="nofollow noopener" href="https://www.netlify.com/">Netlify</a> を使ってみました。</p> <p>何も考えずに適当に create-react-app で作ったプロジェクトを、<br /> GitHub 連携して紐付けるだけで何の設定もすることなく、<br /> 問題なくビルドからデプロイまで行われて感動しました。</p> <p>(今後も積極的に活用していきたい感)</p> <h1>工夫した点</h1> <p>実質 web2days だったこともあり、とにかく時間がない中、<br /> クオリティが低くなりすぎないようにはどうすれば考えました。</p> <p>結果、<br /> ゲームの世界観を昔懐かしい感じにしてシンプルな感じにまとめておけば、<br /> 実際はサンプルみたいなゲームなんだけども品質気にしないで<br /> 遊んでもらえるんじゃないかと思い色々な部分をドット感で演出してみました。</p> <p>Babylon.js で作ったゲーム内でもポストプロセスを用いてドット感を出しています。</p> <p>個人的には大分ちゃんと作った感が増したと考えているのですが、<br /> どうでしょうか。。？</p> <p>また、<br /> 今回はフリー素材をいくつか利用させていただき今回のゲームは開発しました。</p> <p>ゲーム上のスペシャルサンクスにも載せさせていただきましたが、<br /> 改めてここでも感謝させていただきます m(_ _)m</p> <ul> <li>音素材: <a target="_blank" rel="nofollow noopener" href="https://on-jin.com/sound/spo.php?bunr=%E9%87%8E%E7%90%83&kate=%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%84">音人さま</a></li> <li>フォント: <a target="_blank" rel="nofollow noopener" href="http://itouhiro.hatenablog.com/entry/20130602/font">itouhiroさま</a></li> <li>ファビコン: <a target="_blank" rel="nofollow noopener" href="https://hpgpixer.jp/image_icons/sports/icon_baseball_batter.html">PixelGaroさま</a></li> </ul> <h1>まとめ</h1> <p>非常に楽しかったので定期的に web1week 開催されて欲しいと思いました。<br /> 個人的に最近 WebXR がホットなので、webxr1week とか開催されたら、<br /> また是非参加したいなと思いました。</p> <p>最後に、このような機会をご用意いただいた<br /> <a href="https://crieit.net/users/dala00">だら@Crieit開発者</a> さんありがとうございました！！</p> nikaera tag:crieit.net,2005:PublicArticle/92084ef9e6b1245217ea5efc7877a6b8 2020-03-15T22:14:39+09:00 2020-03-15T22:14:39+09:00 https://crieit.net/boards/web1week-202003/92084ef9e6b1245217ea5efc7877a6b8 <p>お題が Home というところで、家庭で気軽にできる20問早とき計算アプリを作ってみました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://relaxed-payne-f881e8.netlify.com/">計算20</a></p> <p>普段は別分野で仕事をしていて、今回 Web アプリ系の技術を初めて学ばせていただきました。<br /> 新しいことばかりで、1週間とても楽しかったです！</p> <p>作業時間の関係で見た目が全然ダメですが、これは今後の課題にできたらと……。<br /> このイベントが終わったあとも、見た目の部分を追加実装したり、気になっている Electron を利用してデスクトップアプリ化などできたらと思ってます。</p> <p>今回このようなイベントを開催していただき、ありがとうございます！<br /> 新技術を学ぶ、とても良い機会でした。</p> <p><a href="https://crieit.now.sh/upload_images/ff16697ad1260a195f5580b081add87f5e6e289e85288.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ff16697ad1260a195f5580b081add87f5e6e289e85288.png?mw=700" alt="upload.png" /></a></p> Su_do tag:crieit.net,2005:PublicArticle/Simple-Shopping-List-Web 2020-03-15T21:49:36+09:00 2020-03-15T21:49:36+09:00 https://crieit.net/boards/web1week-202003/Simple-Shopping-List-Web <p><a href="https://crieit.now.sh/upload_images/4407b803fcd53e3cce66c4c15abc19925e6e1a2717c2c.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/4407b803fcd53e3cce66c4c15abc19925e6e1a2717c2c.png?mw=700" alt="ogp.png" /></a></p> <h2>作ったもの</h2> <p>「<a target="_blank" rel="nofollow noopener" href="https://simpletodo-f1a7d.web.app/">Simple Shopping List</a>」<br /> こんなことができるWebアプリです！<br /> * お買い物リスト／ToDoリストを簡単に作成できる<br /> * 作ったリストはURLを知ってる人だけアクセスできる<br /> * 同時にリストの更新ができる<br /> * ログイン・ユーザー登録は不要なので、とにかく簡単にはじめられる</p> <h2>作ろうと思った理由</h2> <p>スーパーへの買い物を担当しているのですが、妻から毎回手書きのメモを渡されます。しかし、<strong>手書きメモにある食品をすべて買えたことってほとんどない！！</strong><br /> 私が単にダメ男という理由もあるのですが、なぜ購入漏れが発生するか考えてみると、<br /> * リストの消し込みができない<br /> * リストを売り場順にソートできない</p> <p>この辺が理由なんじゃないかな？と考えました。<br /> これって、手書きではなく、まさにアプリ向けじゃないか？と思っていつか作りたいなと思ってたのですが、今回のイベントでお題がHomeということで、開発に至りました。</p> <h2>こだわったポイント</h2> <h3>「入力の簡単さ」</h3> <p>お買い物リストや、単純なToDoリストですが、買いたい商品名など単純なテキストのみのリストになるかなと思います。なので、タップ数をとにかく少なく、テキストエディタにダーッと書けばリストになるといったUIを目指しました。</p> <ul> <li>タップ数を減らす</li> <li>改行でリストが自動で作成される</li> </ul> <p>こんな感じになりました！！<br /> <a href="https://crieit.now.sh/upload_images/311a4f4438ed9d7e317afbf79b45a2715e6e1eeaeee67.gif" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/311a4f4438ed9d7e317afbf79b45a2715e6e1eeaeee67.gif?mw=700" alt="aaab.gif" /></a></p> <p>スマホでも動きます！ぜひスマホで試してほしい。</p> <h3>「作ったリストの共有・同時更新」</h3> <p>1つのリストを複数人で共有して、同時に更新できます！<br /> リストはURL限定公開です。リストにアクセスできるのはURLを知っている人のみ。<br /> 更新した内容はリアルタイムで一緒にリストを見ている人に反映されます！</p> <h2>使った技術</h2> <ul> <li>Vue.js</li> <li>firebase<br /> firebase便利！</li> </ul> <h2>イベントへの感想</h2> <p>何とか間に合ってよかった...<br /> 今回のアプリも開発していると、色々と作りたい機能や拘りたいデザイン調整とかが出てきて、これでは1週間では無理だ！みたいな気分になってたりしてました。いつものことですが笑。今回のイベントは1週間と非常に厳しい制約と、それを当然のようにクリアしてくる（なんなら数日でリリースされてる）参加者さんに背中を押され、リリースに向けた最小構成に機能をまとめるみたいな考えに向かうことができました。<br /> みんなすごい...</p> かつお