桐生あんずのゆるい技術めもスマートフォン用の表示で見る桐生あんずのゆるい技術めもプログラミングのことでゆるくメモしておく用です。この広告は、90日以上更新していないブログに表示しています。2018-07-06布教箱(初めて作ったWebサービス)のリファクタリングを始めた去年プログラミングを勉強してから初めて作ったWebサービスの「布教箱」のリファクタリングを始めている。fukyobako.herokuapp.com最初はインデントがガタガタだったりCSSで謎の書き方をしていたりなど、初心者丸出しのコードが散見されてウワーこれは酷いとずっと思っていたんだけど、じわじわと修正を始めたら結構面白い作業なことに気付き始めた。一気に修正するのはキツいのでまずはログイン周りのviewを少しずつ整えていくためのブランチを切ってここ2日程度(といっても合計5,6時間ぐらいだが)作業していた。Awesomeを使ってTwitterの鳥のアイコンを横に並ばせて大きいボタンを作ってみた。deviseの日本語化*1を行って日本語表記にして統一感を出してみた。以前のデザインはこれです。以前よりかは少しマシになった気がするけど、以前としてbootstrap感が強く、サービスのデザインの統一感はまだ出せていない気がする。あとイメージキャラクターの布教ちゃんの画像の位置も前回よりは違和感がなくなったかもだけど、もうちょっとやり方がある気がする。あと、最近の個人開発者の新規サービスを見ていると、メールアドレスによるアカウント登録機能を作らず、Twitter登録だけのサービスが多いと感じることがある。それによって、簡易に登録が可能であるというアピールにも繋がってサービスの触りやすさの視覚的なアピールになっている気もする。この際Twitterでログインだけにしても良い気はする。中には、アクセストークンを簡単に渡したくない人もいるはずなのですごく迷う。他の個人開発者のサービスをもう少し見て回って決めようと思う。・背景画像を消してトップページにログインしてない際に出てくる新規登録orログインへの遷移リンク周りのCSSをちゃんとした見た目にした去年プログラミングを始めたてに作っていた頃、サイトのデザインが地味で心配になってきてなんかとりあえず色がついている背景画像*2を使ってイメージを変えたつもりだったのだが、デザイン系の本を読んだり、他の個人開発サービスの配色デザインを見ていると、それは逆に悪手でもっとシンプルな色合いにして良いのではと思い、背景を白に戻した。1%;を加えて余白を作ってみた。1.5emで文字の余白も多少幅広くしている。デザイン周りはこれ以上やるとキリがないので一旦打ち止めにした。Forbidden」が出てくるようになったためそれらに関する修正したローカル環境でTwitter認証ログインをしてみようとしたら、上記のメッセージが出てきたため、「あれ?」となり調べていた。したら、まさに同じ問題にぶつかっている人がいたのでこれを参考にして修正した。Appsに登録していたコールバックURLのままだと弾かれてしまうのが原因の模様でした。上記の記事と同じ流れで修正したところ、再びログインできるようになりました。・sprocketsのバージョンを上げてherokuにpushできるようにしたTwitterのログインもできるようになったので、よしpushしよう〜と思ったらherokuにpushできない問題が発生。流れてきたエラーログを大まかに読み取ると「Sprocketsのバージョンが今のままだと脆弱性が見られるからバージョンアップしてね」ということでした。heroku公式にも記事が出ていました。https://devcenter.heroku.com/changelog-items/1437今後やりたいこととか感じたこととか・去年との成長具合が分かるので面白い今年の1月からアルバイトでRailsのサービスを触らせてもらっていることもあって、気になることがたくさん出てきたり、穴があるところがすぐに分かったり、修正の仕方が一人でもすぐ分かったりと一応成長していたんだな...という実感がちょっと出たのでよかった。ChatはWebサービスというよりかはチャットゲームというノリでviewの数も少なくてある程度簡素な作りだけれど、布教箱はある程度Webサービスの構造をしているので色々直すところがあって面白い。最初に作ったというのもあって見返すと恥ずかしい点が多々あり、リファクタリングすることについ億劫になってしまう気持ちがあった。やり始めてみたら以前より詰まる箇所が減り、思ったよりも楽しく作業できた。Webサービス自体を触ることはやっぱり好きなのだと思うし、少しずつリファクタリングを進めていきたい。Storageで画像投稿機能を作ってみる、いいね機能のリファクタリング、トップ画面等を修正して使いやすくする、Twitter公式アカウントを作ってサービスに投稿されたものをbotを作ってランダム紹介できるようにしてみるといったことをやってみたい。考えれば考えるほど無限に思い浮かぶので、1個ずつ地道にやっていこうと思う...。あとjavascript頑張る。課題が盛りだくさんだけれど、毎日草を生やしてじわじわと頑張っていこうと思います。23:46布教箱(初めて作ったWebサービス)のリファクタリングを始めたTweet広告を非表示にするもっと読むコメントを書く2018-07-03ラズパイ入門計画1桐生あんずです。プログラミングをやり始めてから約1年ぐらいが経過していますが、その間「ラズベリーパイ」という単語をちょくちょく聞いています。最初は「なんなんだ、そんな美味しそうな名前は?」*1というぐらいの気持ちだったのですが、いわゆる電子工作をするための機器で、温度感知でエアコンを自動につけてくれたり人感センサーで明かりを付けてくれるなど、実際の生活に役立つことにも使えるみたい。専門雑誌を読んでいると、ぬいぐるみの中に部品を埋め込んで、目を光らせたりおしゃべりさせたりすることもできるなど、なんか無限に面白そうなことがある予感。やってみたい気持ちがどんどん上昇していく。2Bから3に乗り換えるとのことで、ありがたいことに2Bの方を譲っていただきました。そのようにして、とりあえず入手まではたどり着きました。その次に、どうやって動かすんだろう〜と先ほど思い立ってググっていたのですが、この記事シリーズが面白くて最新まで読んでしまいました。グル・MicroSDカード・USB電源アダプタとマイクロUSBケーブル・モニターえっなんか普通にパソコンと同じ感じの部品が必要になってくるんですね。思って読み進めたらラズパイって超小型PCなんですね。興味はある癖に無知すぎている。マウスとキーボードとモニターに関しては今家にあるもので代用できそう。グルはもらった機器に付属していた。電源アダプタは手持ちのやつが2.1Aだったので一応クリアしてそう。Micro-Bのケーブルは20cmぐらいのものしかないので買わないとダメそう。MicroSDカードも家にあるかもだけど使えるか謎なので買った方が良いと思う。現時点の目標としてはそれらの機材の準備をすることと、準備ができたらOSのインストール等をやってみることっぽい。いうわけでまずはそこからです。Amazonで必要なものを注文することから始めます。22:57ラズパイ入門計画1Tweet広告を非表示にするもっと読むコメントを書く2018-07-03ゆるい感じなことを書くために始めます桐生あんずです。普段は以下のブログで活動しているのですが、ありがたいことに読者数も100人以上に増え、合計PV数もこの1年で74000以上になりました。kiryuanzu.hatenablog.comただ、見られることが多くなってくると、自分の性格上、どんどんと自意識が膨らみ、毎回の記事に力が入ってきて「このレベルの話をブログに書いても大丈夫だろうか」「これを書いても面白いんだろうか」みたいなめんどくさいことを考えるようになってきました。(そもそもそんなことを意識しなかったら良い話なんだけど、性格上ついつい脳裏をよぎるんですよね)ブックマークや閲覧数がたくさんもらえるのはそれはそれで嬉しいのですが、自分の場合、それらの振る舞いを意識しすぎるようになってしまうので、このまま本当はもっと書くべき常日頃のアウトプットを無意識に制限するのはもったいないなと思うので何かしら対策を練ってみることにしました。今自分にとって大事なのはバズる回数を増やすことではなく基礎的な技術力の向上だと思うので...。いうわけで、なんかもうちょっとゆるく技術的なメモを残せる場を作ろうと思い、2個目のブログを作ってみました。Qiitaとかでも良さそうとは思ったのですが、やっぱりはてなブログが好きなのでこっちを選んじゃいました。本ブログの方に関しても、プログラミングについて書くことはやめずに引き続き何かイベントごとがあった際のことや面白いと思ったことはどんどん書いていこうと思います。いうわけでよろしくお願いします。最後に最近興味があること、ここで書こうかなと思っていることを羅列して終わります。Textを使って特定の言葉に反応してモーションバイブレーターを動かす実装をやってみたい)・今やってる初心者Webサービス開発の勉強会についてふと思ったことなど(1回1回のちゃんとしたまとめは本ブログで更新していこうと思います)できるだけここ数ヶ月中に達成できそうなことだけを具体的に書いてみたけど、言ったきりで終わりにしないようにしたい...。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。