tag:crieit.net,2005:https://crieit.net/users/takada_o365biz/feed Crieitでユーザー高田弘介による最近の投稿 2019-12-14T07:00:08+09:00 https://crieit.net/users/takada_o365biz/feed tag:crieit.net,2005:PublicArticle/15605 2019-12-14T07:00:08+09:00 2019-12-14T07:00:08+09:00 https://crieit.net/posts/f9ebd420c41c1270c5dbfe042703d173 <p>クソアプリ紹介記事を開いていただき本当にありがとうございます。高田と申します。</p> <h1 id="どんなクソアプリなの？"><a href="#%E3%81%A9%E3%82%93%E3%81%AA%E3%82%AF%E3%82%BD%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AA%E3%81%AE%EF%BC%9F">どんなクソアプリなの？</a></h1> <p>ズバリ。「福笑い」でございます。<br /> <a target="_blank" rel="nofollow noopener" href="https://portrait.piggy3.com/ja/index.html">https://portrait.piggy3.com/ja/index.html</a></p> <h1 id="遊び方"><a href="#%E9%81%8A%E3%81%B3%E6%96%B9">遊び方</a></h1> <h2 id="１．サイトにアクセスする"><a href="#%EF%BC%91%EF%BC%8E%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B">１．サイトにアクセスする</a></h2> <p>トップ画面が開いたらやることは１つ。「似顔絵を作成する」を押しましょう。<br /> <a href="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d14de1b0a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d14de1b0a.png?mw=700" alt="image.png" /></a></p> <blockquote> <p>【 クソポイント】<br /> ・ログイン機能の実装で挫折<br /> ・なのに英語対応（英語力はクソ）<br /> ・さらに独自ドメイン取得</p> </blockquote> <h2 id="２．遊びたい絵を選択"><a href="#%EF%BC%92%EF%BC%8E%E9%81%8A%E3%81%B3%E3%81%9F%E3%81%84%E7%B5%B5%E3%82%92%E9%81%B8%E6%8A%9E">２．遊びたい絵を選択</a></h2> <p>これは！と感じた絵を選びましょう。<br /> <a href="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d2436e6d6.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d2436e6d6.png?mw=700" alt="image.png" /></a></p> <blockquote> <p>【クソポイント】<br /> ・素材の追加で挫折<br /> ・このためだけに契約したPhotoshopに月々980円を払い続けている<br /> ・もうすぐお正月だから素材を充実させたい気持ちもアリ</p> </blockquote> <h2 id="３．自由にパーツを配置"><a href="#%EF%BC%93%EF%BC%8E%E8%87%AA%E7%94%B1%E3%81%AB%E3%83%91%E3%83%BC%E3%83%84%E3%82%92%E9%85%8D%E7%BD%AE">３．自由にパーツを配置</a></h2> <p>ここだ！と感じた場所にパーツをドラッグ。「位置を確定して次へ」を押すと次のパーツの配置に進みます。この繰り返し。<br /> <a href="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d3c589639.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d3c589639.png?mw=700" alt="image.png" /></a></p> <blockquote> <p>【クソポイント】<br /> ・操作が直感的ではない<br /> ・「位置を確定して次へ」ボタンいらなかったかも…ドラッグして離したら自動で次のパーツに進むようにすれば良かった<br /> ・でも修正する気ナシ</p> </blockquote> <h2 id="４．タイトルを設定"><a href="#%EF%BC%94%EF%BC%8E%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E8%A8%AD%E5%AE%9A">４．タイトルを設定</a></h2> <p>これだ！というタイトルを付けてあげましょう。あえて未設定も可。心の準備ができたら「確定」を押します。<br /> <a href="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d4d910868.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d4d910868.png?mw=700" alt="image.png" /></a></p> <blockquote> <p>【クソポイント】<br /> 完成した絵を確認する前にタイトル付けを強要</p> </blockquote> <h2 id="５．完成！"><a href="#%EF%BC%95%EF%BC%8E%E5%AE%8C%E6%88%90%EF%BC%81">５．完成！</a></h2> <p>おめでとうございます！完成した作品のURLをコピーしてSNSにシェアしましょう！<br /> <a href="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d5b39ba39.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/333bc7f5384be08dc752e6a9220f45725de7d5b39ba39.png?mw=700" alt="image.png" /></a></p> <blockquote> <p>【クソポイント】<br /> ・SNSのシェアボタンではなくURLコピペスタイル</p> </blockquote> <h1 id="最後に作者の自己紹介"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB%E4%BD%9C%E8%80%85%E3%81%AE%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B">最後に作者の自己紹介</a></h1> <p>ここまでお読みいただき本当にありがとうございます。</p> <p>お仕事ではOffice 365などのクラウドサービス導入支援・利活用サービス提供を生業としております。最近は営業寄りの活動が中心になっており仕事上では技術に触れる機会が激減中です。</p> <p>本クソアプリはAWSのサーバーレスに興味があり趣味の範疇で手を出してみた結果です。Web開発で飯を食う目標は持っていませんが、自分でやってみることで本格的なサービスを開発しているエンジニアの皆様の凄さをより理解できるようになりました。なにより、モノづくりの過程であれこれと勉強している時間が本当に楽しかったです（ある程度形になると飽きっぽさが出てしまいます…）。Udemyの動画教材でAWSを契約するところから学んだのですが、ついつい楽しくて徹夜をしてしまったこともあり。仕事の合間に短期集中で１か月くらいの期間で作成しました。</p> <p>最後の最後にクソアプリの構成だけ載せておきます。</p> <div class="table-responsive"><table> <thead> <tr> <th>AWSサービス名</th> <th>役割</th> </tr> </thead> <tbody> <tr> <td>Lambda</td> <td>・サーバー側処理の実行（Pythonを使用）</td> </tr> <tr> <td>S3</td> <td>・htmlやjsなどの静的コンテンツ配置・Lambdaで生成した画像データ保管</td> </tr> <tr> <td>DynamoDB</td> <td>・システム用レコード管理・ユーザー作成の画像データに紐づくプロパティ情報保管</td> </tr> <tr> <td>API Gateway</td> <td>・Lambdaの処理をREST APIとして提供するための設定</td> </tr> <tr> <td>CloudFront</td> <td>・キャッシュ管理（CDN）・S3/API Gatewayのコンテンツにユーザーがアクセスするためのマッピング設定</td> </tr> <tr> <td>Route53</td> <td>・ドメイン管理・S3/API GatewayをCloudFrontにマッピングするための定義</td> </tr> </tbody> </table></div> 高田弘介