magmaslime Blog

趣味のWebサービスについて書きます

Splamoments! 開発記録 Part4:ツイートを動的に表示するMay 22, 2019

この記事では、Splamoments!の開発記録を書いていきます。前回の記事では、Rails の View コンポーネントを改造し、ツイートを表示できるようにしました。今回は、Rails の Controller コンポーネントを改造し、ツイートを動的に表示できるようにします。View のコードをシンプルにするController を改造する前に、View のコードを改造してツイートを表示するコードをシンプルにします。前回の記事では、ツイートを表示するために、Twitter のページから埋め込みコードを入手し、それをそのまま View に貼っていました。このままでもツイートは表示できますが、以下のコードだけでもツイートを表示する事ができます。(widget.js…

続きを読む

Splamoments! 開発記録 Part3:Railsでツイートを表示するMay 18, 2019

この記事では、Splamoments!の開発記録を書いていきます。前回の記事では、Rails のインストールについて書きました。今回は、Rails の View コンポーネントを改造し、ツイートを表示できるようにします。ホーム画面用の Controller と View を生成まずはツイートを表示する画面を作っていきます。 以下のコマンドを実行し、Controller と View を生成しましょう。 は Controller の名前を指し、その後のは Controller 内のメソッド(かつ View) の名前を指しています。Controller、View は Web システムのアーキテクチャである MVC モデルにおけるコンポーネントの名前です。MVC モデルについては知りたい方は、Qiita…

続きを読む

Splamoments! 開発記録 Part2:RailsのインストールMay 14, 2019

この記事では、Splamoments!の開発記録を書いていきます。今回は、Splamoments!の構築のうち、Rails のインストールについて書きます。参考にした文献プロを目指す人のための Ruby 入門Ruby 自体を触るのが初めてだったので、これで学習しましたRuby on Rails 5 アプリケーションプログラミングリファレンスとして困った時に読みましたRuby on Rails チュートリアルRails を利用したサイト作りを実践的に学べました本記事の範囲本記事では、図の中央の Ruby on Rails について書いていきます。今回は特にインストールについて紹介します。開発環境本記事では、以下の環境を前提にしています。macOS HighSierra バージョン 10.13Ruby on Rails バージョン 5.1.6Ruby バージョン 2.4.1Rails…

続きを読む

コスパ.today 開発記録 Part1:概要May 07, 2019

この記事では、コスパ.todayの開発記録を書いていきます。今回は、コスパ.today の概要について紹介します。コスパ.today とはコスパ.today は、Amazon や楽天市場などのショッピングサイトから、今日もっともコスパの良い商品をランキングしたサイトです。例えば水であれば、1 リットルあたりの値段がもっとも安い順にランキングしています。2019 年 5 月現在は 1 日 2 回、朝と夕方に情報を更新し、なるべく最新の情報が保たれるようにしています。また、ペットボトルのサイズでフィルタができるようにしてあり、欲しいサイズのペットボトルのランキングを見ることもできます。コスパ.today の目的コスパ.today…

続きを読む

Splamoments! 開発記録 Part1:概要May 04, 2019

この記事では、Splamoments!の開発記録を書いていきます。今回は、Splamoments!の概要について紹介します。Splamoments!とはSplamoments! は、Twitter に投稿されたスプラトゥーン 2(Splatoon2)の動画を集めた Web サイトです。Nintendo Switch から投稿された、ハッシュタグ「#Splatoon2」「#スプラトゥーン 2」「#Nintendo_Switch」が付けられたツイートを集めています。Nintendo Switch には 30 秒の録画機能がついているので、うまくできたプレイや面白かったシーンを録画して Twitter…

続きを読む

このブログの作り方(Gatsby.js + Netlify) Part3/3:雛形を修正するMay 01, 2019

Part2 の記事の続きです。この記事では、雛形のプログラムを修正して公開する手順について書きます。に登録して、で生成したサイトを作成する(オプション)ドメインを取得するからプログラムをローカルにダウンロードしてくる ← 今回の記事ローカルで雛形のプログラムを修正してブログを作成して、にプッシュする ← 今回の記事Web 上のサイトが更新されていることを確認する ← 今回の記事からプログラムをローカルにダウンロードしてくるまずはからプログラムをダウンロードします。Part1 の記事で Github と連携したと思うので、そのアカウントに新しくリポジトリが作成されていると思います。そのリポジトリを、GitHub…

続きを読む

このブログの作り方(Gatsby.js + Netlify) Part2/3:ドメインを取得するApril 29, 2019

Part1 の記事の続きです。この記事では、独自ドメインを取得する手順について書きます。に登録して、で生成したサイトを作成する(オプション)ドメインを取得する ← 今回の記事からプログラムをローカルにダウンロードしてくるローカルで雛形のプログラムを修正してブログを作成して、にプッシュするWeb 上のサイトが更新されていることを確認するドメイン名を決めるはじめに、ドメイン名を決めます。 信頼できる(される)ドメインといえば「com」「net」「jp」などがありますが、ドメインハックするのも面白いです。ドメインハックも含めてどんなドメインが空いているかは、「Domainr…

続きを読む

このブログの作り方(Gatsby.js + Netlify) Part1/3:サイトを作成するApril 24, 2019

趣味で作っている Web サービスの記録を残そうと思い、ブログを開設しました。 この記事では、ブログを作ったやり方について書こうと思います。ちなみに筆者はプログラムは書いていますが、Web サービス開発は初心者なので、同じような状況の方を想定して書きます。利用したサービス・ツールについてこのブログは、によってブログを生成し、を利用して Web 上に公開しています。簡単に書くと以下の図のような感じです。で生成したブログラムでブログを更新し、にプッシュすると、が検知して Web…

続きを読む