Win10HomeでDockerを使いたい!
タイトル通りですWindowsのHomeなエディションでDockerを使おうとすると以前はなかなかつらかったと聞くのだけどWSL2というものが導入されて手軽感が増したとか。とは言えご家庭向けなマシンスペックのらくだ🐫環境ですのでどこまで耐えうるのかという問題もありつつチャレンジ!WSL2を導入する自動更新でのWindows10の最新バージョンは2020...
タイトル通りですWindowsのHomeなエディションでDockerを使おうとすると以前はなかなかつらかったと聞くのだけどWSL2というものが導入されて手軽感が増したとか。とは言えご家庭向けなマシンスペックのらくだ🐫環境ですのでどこまで耐えうるのかという問題もありつつチャレンジ!WSL2を導入する自動更新でのWindows10の最新バージョンは2020...
14.3 ステータスフィードステータスフィードを実装する!→フォローされているユーザーのマイクロポストとログイン中のユーザーのマイクロポストを合わせて表示する見本はこちら→RoRT本文参照14.3.1 動機と計画現在のユーザーによってフォローされているユーザーに対応するユーザーidを持つマイクロポストを取り出し、同時に現在のユーザー自身のマイクロポスト...
14.2 [Follow] のWebインターフェイスフォロー/フォロー解除の基本的なインターフェイスを実装しフォローしているユーザーとフォロワーにそれぞれ表示用のページを作成する!14.2.1 フォローのサンプルデータrails db:seedを使ってDBにサンプルデータを登録する先にサンプルデータを自動作成できるようにしておくことによりWEBページの...
14章では他のユーザーをフォロー及びフォロー解除できる仕組みとフォローしているユーザーの投稿をステータスフィールドに表示する機能を追加していく。 ユーザー間の関係をどうモデリングするか学ぶ モデリングに対応するWebインターフェイスを実装 ステータスフィールドの完成版を実装という流れ。チュートリアルの中で最も難易度が高い手法をいくつか使っているとの事で...
※毎回書いたほうがいい気がするので書いておきます※平文の部分をちょこちょこI18nで日本語化しているのですがその部分に関しては特に記述していなくてもたまにコードが違ったりしています。t(‘.hogehoge’)って部分ですどうぞお気になさらず。13.4 マイクロポストの画像投稿マイクロポストの基本的な操作は実装できたが応用として画像付きのマイクロポスト...
※毎回書いたほうがいい気がするので書いておきます※平文の部分をちょこちょこI18nで日本語化しているのですがその部分に関しては特に記述していなくてもたまにコードが違ったりしています。t(‘.hogehoge’)って部分ですどうぞお気になさらず。13.3 マイクロポストを操作するモデリングとテンプレートが完成したのでweb経由でマイクロポストを操作できる...
13.2 マイクロポストを表示するマイクロポストの表示予定図はこんな感じRoRT本文参照ですここでは、Twitterのような独立したマイクロポストのindexページは作らずに、図 13.4のモックアップに示したように、ユーザーのshowページで直接マイクロポストを表示させることにします。ユーザープロフィールにマイクロポストを表示させるため、最初に極めて...
ユーザーが短いメッセージを投稿できる機能を作っていく→「マイクロポストリソース」を追加していくMicropostデータモデルを作成し、Userモデルとhas_manyおよびbelongs_toメソッドを使って関連付けを行い、さらに、結果を処理し表示するために必要なフォームとその部品を作成します (13.4で画像のアップロードも実装します)。因みに(?)...
12.4 本番環境でのメール送信 (再掲)本番環境のセットアップは11章で終わってるのでマージしてデプロイ随時コミットはしているのでテストしてgit statusしてコミット忘れないかチェックしてブランチのままpushしてGitHubでプルリクしてマージして戻ってプルするいつもの流れHerokuへデプロイ$ rails test$ git push$ ...
※毎回書いたほうがいい気がするので書いておきます※平文の部分をちょこちょこI18nで日本語化しているのですがその部分に関しては特に記述していなくてもたまにコードが違ったりしています。t(‘.hogehoge’)って部分ですどうぞお気になさらず。12.3 パスワードを再設定するpasswordResetsコントローラのeditアクションを実装していくテス...
※毎回書いたほうがいい気がするので書いておきます※平文の部分をI18nでちょこちょこ日本語化しているのですがその部分に関しては特に記述していなくてもたまにコードが違ったりしています。t(‘.hogehoge’)って部分ですどうぞお気になさらず。12.2 パスワード再設定のメール送信パスワードの再設定に関するメールの部分を作っていく11章でUserメイラ...
12章でやることパスワードを忘れた時に再設定できるようにする仕組みを作る見本は本文参照の事11章ですでにパスワード再設定用のメーラーが生成されているので、そこにリソースとデータモデルを追加してパスワードの再設定を実装していく。全体の流れはこちら ユーザーがパスワードの再設定をリクエストすると、ユーザーが送信したメールアドレスをキーにしてデータベースから...
11.4 本番環境でのメール送信開発環境でのアカウント有効化の流れが整ったので、本番環境でも実際にメールを送信できるようにする。開発環境では日本語が混ざるとメールが文字化けしてたけど、本番環境では行けるらしいので期待してる!SendGridSendGridというHerokuのアドオンを利用してアカウント検証をする本番環境からメール送信するために、「Se...
11.3 アカウントを有効化するメールが生成できるようになったのでAccountActivationsコントローラのeditアクションを書いていく。テストも書いて、しっかりテストできていたらUserモデルにコードを移していく (リファクタリング)authenticated?メソッドの抽象化有効化トークンとメールはそれぞれparams[:id]とpara...
gitプログラムかいつからかどこかおかしくなった時に場所を特定するためのコマンド[blogcard url=”https://qiita.com/usamik26/items/cce867b3b139ea5568a6”]AWScloud9の再起動(インスタンスの再起動)[blogcard url=”https://qiita.com/yonabe710...
11.2 アカウント有効化のメール送信準備ができたので、アカウント有効化メールに必要なコードを追加していくこのメソッドではAction Mailerライブラリを使ってUserのメイラーを追加します。このメイラーはUsersコントローラのcreateアクションで有効化リンクをメール送信するために使います。Action MailerライブラリとなはんぞRa...
11章でやることアカウントを有効化するためのメール認証システムを作る! ユーザーの初期状態は「有効化されていない」(unactivated) にしておく。 ユーザー登録が行われたときに、有効化トークンと、それに対応する有効化ダイジェストを生成する。 有効化ダイジェストはデータベースに保存しておき、有効化トークンはメールアドレスと一緒に、ユーザーに送信す...
10.4 ユーザーを削除するRESTに準拠した正統なアプリケーションとなる為に、最後の一つ、destroy機能を実装していく!削除権限を持つ管理 (admin)ユーザーのクラスを作成し→ユーザーを削除するためのリンクを追加し→destroyアクションを実装する見本はこちら→RoRT本文10.4.1 管理ユーザー論理値をとるadmin属性をUserモデル...
10.3 すべてのユーザーを表示するindexアクションを追加してユーザー一覧を表示させる→データベースにサンプルデータを追加する方法→ページネーション(pagination=ページ分割)の方法見本はこちら → RoRT本文10.3.1 ユーザーの一覧ページユーザーindexページはログインユーザーしか表示できないようにするindexアクションのリダイ...
10.2 認可ウェブアプリケーションの文脈では、認証 (authentication) はサイトのユーザーを識別することであり、認可 (authorization) はそのユーザーが実行可能な操作を管理することです。現状ではログインしていないユーザーでもどのユーザー情報でも編集できてしまうためユーザーにログインを要求し、自分以外のユーザー情報を変更でき...
10章でやることユーザーの更新・表示・削除→未実装のedit、update、index、destroyアクションを加えてRESTアクションを完成させる ユーザーが自身でプロフィールを更新できるようにする ログイン済の場合ユーザー一覧を表示できるようにする 管理ユーザーを作成し、管理ユーザーのみユーザーを削除できるようにする10.1 ユーザーを更新するユ...
9.3 [Remember me] のテスト動作をテストで確認できるようにしておくことが重要です!!→ユーザーを永続化するコードのメイン部分は未だ全くテストされていないのであった9.3.1 [Remember me] ボックスをテストするlog_in_asヘルパーメソッドを定義ユーザーが記憶されるためにはログインが必要なのでテスト内でユーザーがログイン...
[Remember me] チェックボックス[remember me] チェックボックスでログインの保持を選択できるようにする見本はRoRT本文チェックボックスを追加するチェックボックスはヘルパーメソッドを使って作成できるただし、下記のようにラベルの内側に配置する必要がある!<%= f.label :remember_me, class: "ch...
9章でやる事(任意で)ユーザーのログイン情報を記憶しておけるようにする→remember me機能永続cookieを使ってremember me機能を実現9.1 Remember me 機能ブラウザを閉じた後でもログイン状態を有効にする[remember me] 機能を実装していくこの機能を使うと、ユーザーが明示的にログアウトを実行しない限り、ログイン...
2019年をざっくり振り返る年末ごろですね私今年新しいこと何もしてない!って凹んでたりしたんですがよく考えたらそんなことなかった!新しいこともしてた!!なので、ざっくり振り返ってみました。2019年冬年明けはProgateさんでRoRコースをやってましたRubyコースと違って、目に見えて動くものを作るので楽しかった思い出。そこから勢いでRoRT1週目を...
8.3 ログアウトログインが出来たらログアウトも出来たい!!セッションを破棄するdestroyアクションも、引き続き同じ要領で作成することにします。ただし、ログインの場合 (リスト 8.15とリスト 8.25) と異なり、ログアウト処理は1か所で行えるので、destroyアクションに直接ログアウト処理を書くことにします。ログインの場合と異なり~→登録済...
8.2 ログイン有効な値の送信があった場合にログインできるようにする!→cookieを使った一時セッションでログイン→ブラウザを閉じると自動的に期限切れになるようにするセッションを実装するには、様々なコントローラやビューでおびただしい数のメソッドを定義する必要があります。(中略)Sessionsコントローラ (8.1.1) を生成した時点で既にセッショ...
8章でやる事→ユーザーがログインやログアウトを出来る様にするここでいうログインの基本的な仕組みとは、ブラウザがログインしている状態を保持し、ユーザーによってブラウザが閉じられたら状態を破棄するといった仕組み (認証システム (Authentification System))です。この認証システムの基盤が出来上がったら、ログイン済みのユーザー (cur...
7.5 プロのデプロイ実際に動かせるアプリのデプロイ!準備として現時点までをmasterブランチにマージしておく7.5.1 本番環境でのSSL本章で開発したユーザー登録フォームで送信すると、名前やメールアドレス、パスワードといったデータがネットワーク越しに流されていきます。実は、このようなネットワークに流れるデータは途中で捕捉できるため、扱いには注意が...
7.4 ユーザー登録成功新規ユーザーのデータが有効な場合、データベースに保存できるようにする7.4.1 登録フォームの完成users_controller.rbにコードを追加↓createアクションに対応するテンプレートを作るのではなく新しく作成されたユーザーの詳細画面にリダイレクトするように設定 def create @user = User...
調べたもののメモです随時更新I18n入門的な事[blogcard url=”https://rakuda3desu.net/out-of-rakudas-rails-tutorial-i18n/”]フラッシュメッセージの日本語化(controllerのリテラルを日本語化)フォルダとファイルを作成(最初にmodelsフォルダを作って仕分けをしたのでcon...
番外編では本編からちょっと外れた話なんかを書いていきますエラーメッセージを日本語化したい!だって英語で言われてもわからないじゃん?(?なので本文でバリデーションエラーのメッセージ云々が出てきたところでチャレンジしていきたいと思います。作業用に、現状から新しくブランチ(i18n)を切ります(add-i18nとかのが良かったかもね?)(生やす場所ももっと考...
https://じゃないとそろそろ不便っぽい何やらグーグルさんの規約も変わってきていたりせっかくブログやってるならGoogle AdSense導入したいわーだったりでサイトのSSL化に踏み切りました(そんな大げさな……)大したことはやっていないんですが、ど素人ならではのハマりポイントもあったので、記録を兼ねて記事にしてみますね🐫敗因因みに先に大失敗ポイ...
7.3 ユーザー登録失敗無効なデータ送信を受け付けた際にエラー一覧が表示されるようにする7.3.1 正しいフォーム特に、/usersへのPOSTリクエストはcreateアクションに送られます。私たちはここで、createアクションでフォーム送信を受け取り、User.newを使って新しいユーザーオブジェクトを作成し、ユーザーを保存 (または保存に失敗) ...
7.2 ユーザー登録フォームユーザー登録フォームを作成していく見本はRailsチュートリアル本文参照7.2.1 form_forを使用するユーザー登録ページで重要な点は、ユーザー登録に欠かせない情報を入力するためのformです。Railsでform_forヘルパーメソッドを使います。このメソッドはActive Recordのオブジェクトを取り込み、その...
7章でやる事ユーザー登録機能を追加する→HTML フォームを使ってWebアプリケーションに登録情報を送信→ユーザーを新規作成して情報をデータベースに保存→作成されたユーザーの新しいプロフィールを表示できるようにする準備7.1 ユーザーを表示するユーザーの名前とプロフィール写真を表示する為のページを作る。Railsチュートリアル本文に見本がありますブラン...
番外編では本編からちょっと外れた話なんかを書いていきますパスワードのバリデーションをアレンジするチュートリアル本編でUserモデルのバリデーションの話が出てきましたせっかく(?)なので、パスワードのバリデーションをアレンジしていこうと思います本文では「最小6文字」だけだったけど「最大13文字」→「英・数・記号を各1文字以上」→「英大文字・英小文字・数・...
6.3 セキュアなパスワードを追加するセキュアなパスワード!超大切!!パスワードをそのままの形ではなく、ハッシュ化してDBに保存するユーザーの認証は、パスワードの送信、ハッシュ化、データベース内のハッシュ化された値との比較、という手順で進んでいきます。比較の結果が一致すれば、送信されたパスワードは正しいと認識され、そのユーザーは認証されます。ここで、生...
6.2 ユーザーを検証するValidation(検証)機能を実装する6.2.1 有効性を検証するrequire 'test_helper'class UserTest < ActiveSupport::TestCase def setup #各テストが実行される直前で実行される @user = User.new(name: "Exa...
6章でやる事ユーザー用のデータモデルの作成と、データを保存する手段の確保→ユーザー登録を出来る様にする6.1 UserモデルRailsでは、データモデルとして扱うデフォルトのデータ構造のことをモデル (Model) と呼びます (1.3.3で言うMVCのMのことです)railsの標準のデータ構造→modelこんな雰囲気でいいのかな?railsではデータ...
5.4 ユーザー登録: 最初のステップユーザー登録ページを作っていく5.4.1 Usersコントローラ新規ユーザー用の登録ページを作る→Usersコントローラを作成→newアクションを引数にしてgenerateを実行(2.1でやったRESTアーキテクチャの規約に合わせる)スタブとはなんぞスタブ→使い残し、半券、切り株などの意味未完成の機能の代用になるも...
5.3 レイアウトのリンク’#’でダミーリンクにしていた部分を書き換えていく。Aboutの様に直接パスを指定するのではなくRailsの慣習に倣った形式で記述していく→<%= link_to “About”, about_path %>埋め込みRuby Link_toヘルパー 表示される文字(第一引数),リンクのパス(第2引数)about_p...
5.2 Sassとアセットパイプライン5.2.1 アセットパイプラインアセットパイプラインとは、JavaScriptやCSSのアセットを最小化 (スペースや改行を詰めるなど=minify) または圧縮して連結するものアセットパイプラインを理解するための3つの主要な機能を理解する↓そもそもアセット(asset)とは何ぞJavaScript・CSS・画像フ...
5章でやる事BootstrapSass静的ページをレイアウトに追加ログイン機能のはじめの一歩HTML/CSSについては分かってる部分はあまり深堀しない感じで5.1 構造を追加するサイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開発していくモックアップ(=ワイヤーフレーム)を参照しながらviewを整えていく作業ブランチの作成 →$ g...
4.4 Rubyにおけるクラス4.4.1 コンストラクタリテラルコンストラクタとは何ぞリテラル → コードに直接書かれた文字や数字コンストラクタ → インスタンスを作成した時に自動的に実行されるメソッドうーん。これは雰囲気でふわっと掴んでれば良さそう感?(?>> s = "foobar" #""は文字列(Stringクラス)のオブジェクト...
4.3 他のデータ構造4.3.1 配列と範囲演算子配列とは何ぞ配列 (array) は、特定の順序を持つ要素のリストです。sqlitメソッドで文字列を自然に配列へと変換できる>> "foo bar baz".split #空白部分で区切られて配列に分割される=> ["foo", "bar", "baz"] ...
4.2 文字列とメソッドirbの設定$ nano ~/.irbrcエディタが開くので本文のコードをコピペCtrl-X → Y → Enterコンソールを起動する(rails-flavored-ruby) $ rails consoleRunning via Spring preloader in process 4544Loading developm...
Railsで重要なRubyの知識。的な事。あ、せっかく3章でテストを勉強したことですし本文にテスト結果の表示がある場合、合わせて表示させていきます4.1 動機Rubyの知識があった方が理解も深まるし作業効率も上がるのだ。的な事。ブランチを作る(master) $ git checkout -b rails-flavored-rubySwitched t...
3.5 最後に本文ではmasterブランチにcheckoutしてマージなんですがせっかく(?)なのでプルリクエスト→Pullの流れをセルフでやってみようと思います一人でやってると使い所がない感じなのでプルリクエストの練習として。$ git add -A$ git commit -m "Finish static pages"$ git pushGitH...
3.4 少しだけ動的なページHome、Help、Aboutそれぞれのページタイトルが表示されるようにしていく準備として元々用意されているレイアウトのファイルを一時的に無効に#ファイルの移動(&リネーム)#app/views/layoutsにあるapplication.html.erbを ルート直下に移動&ファイル名をlayout_fileに$ mv a...
3.3 テストから始めるテストのタイミングのガイドライン アプリケーションのコードよりも明らかにテストコードの方が短くシンプルになる (=簡単に書ける) のであれば、「先に」書く 動作の仕様がまだ固まりきっていない場合、アプリケーションのコードを先に書き、期待する動作を「後で」書く セキュリティが重要な課題またはセキュリティ周りのエラーが発生した場合、...
3.6.1 minitest reporters2019.05.24 らくだ🐫にもできるRailsチュートリアル|3.3から移動masterブランチから移動する前にテスト結果を見易くするために3.6.1に書いてあるこちらの設定をしておきます(ブランチを移動しているようでしたらmasterブランチにcheckoutしておいてください)ENV['RAILS...
とうとうここからが本番!って感じですよね。とは言えまだまだ、本番の入り口。がんばれ🐫3.1 セットアップ先ずはサンプルデータがあるとの事なのでフォークしておくことにしました完成版と言う事なので途中でどのくらい参考になるかはわからないけどもで、Bitbucketでフォークってどうやるのかなって調べてみたんですが英語がわからな過ぎて公式helpから見つけら...
2.3 Micropostsリソース2.3.1 マイクロポストを探検するUsersリソースの時と同様にmicropostsリソースを生成する$ rails generate scaffold Micropost content:text user_id:integer#content:text user_id:integer を持つMicroposts...
2.2 UsersリソースWebインターフェイスとはなんぞ一言で言おうとすると逆によくわからなくなる感じなのですが、webから操作するための仕組み的な?railsで言うとviewとかcontrollerあたりがそれにあたるのかな。と思っています。リソースとはそれぞれのデータを作ったり・呼び出したり・更新したり・削除したりできるようにした一塊の仕組みUs...
scaffoldジェネレータとは何ぞ?ざっくり言うと基本的な機能を自動生成してくれるスクリプトRESTアーキテクチャとは何ぞ?[blogcard url=”https://ja.wikipedia.org/wiki/Representational_State_Transfer”]分かるようなわからない様な?一先ず進めていきます。2.1 アプリケーショ...
1.5 デプロイする1.5.1 Herokuのセットアップ環境によって導入するgem、しないgemを指定する本番環境のみにインストールgroup :production do gem 'pg', '0.20.0'end開発・テスト環境にインストール(開発環境には導入されないようにする)group :development, :test do gem...
1.4 Gitによるバージョン管理gitに関してはProgateのGit学習コースをやっていたのだけど実際使ってみると「こんな時どうするの??」とか、そもそもの仕組みがあんまりわかっていなかったりしていたので初心者にもわかりやすいと評判のわかばちゃんと学ぶ git使い方入門で勉強しました。Progateよりもうちょっと踏み込んだ、もうちょっと実践的な内...
1.3 最初のアプリケーションリスト 1.3: rails newを実行する (バージョン番号を指定)#cloud9の人はディレクトリの移動は特に必要ないと思います$ rails _5.1.6_ new hello_app#rails バージョン指定 new アプリ名そして早速エラーが出ましたが、2週目のらくだ🐫は知っています。後でgemファイルの編集...
「手を動かしながら読む」と言った感じで進めたRailsチュートリアルの1週目。学びも沢山あったけど、わからないままの所も沢山残っております。と、言う訳で2週目。今回は細かく調べつつ、記録しつつ、あとで見直したいときにサクっと情報を取り出せるように纏めたいなって思っています。「ド」が付く素人のらくだ🐫が勉強するRailsチュートリアルの学習記録です。自分...
前回からの続きそういえば言ってなかった気がするんですが、今更だけど練習用のデータは本文に合わせたものを作ってやった方がわかりやすいですちょっと面倒だったりもしますがそれも何かしらの練習と思ってやりましたわかばちゃんと学ぶ git使い方入門で解説されているSourceTreeの操作をCloud9のターミナルで行うにはどうしたらいいかと言うお話ですPC上だ...
前回からの続きここからが本格的な(?)Gitの使い方って感じですわかばちゃんと学ぶ git使い方入門で解説されているSourceTreeの操作をCloud9のターミナルで行うにはどうしたらいいかと言うお話ですPC上だと少し違うかもしれませんがGitのコマンドは大体同じかと思います同じような環境の人のお役に立てれば幸いです 本文中、ユーザーネームなどは...
前回からの続きCHAPTER3に進む前になんとなくわかっているといい事やっておくといい事を番外編として纏めましたあとで増えるかもしれませんわかばちゃんと学ぶ git使い方入門で解説されているSourceTreeの操作をCloud9のターミナルで行うにはどうしたらいいかと言うお話ですPC上だと少し違うかもしれませんがGitのコマンドは大体同じかと思います...
Railsチュートリアルをやる中でもうちょっとGitわからないとしんどいなって思ったのでGitの勉強をすることにしましたまずはProgateのGitコースをやったのだけど、まだ全然あやふやだったので分かりやすいと評判のわかばちゃんと学ぶ git使い方入門を購入確かに言われている通りGitの概念とか、どういう事をやっているかとか、薄ぼんやりだったモノの形...
続きと言うか前回からの続きと言うかブログを書くのに間が開いちゃったら記憶がはるか彼方に……🐫💧その都度書かないとダメですね。あとで詰まった時とかの参考になるし。参考サイトとかもブクマより見つけやすいよね。と、言う訳で(?2週目をやる時にはいろいろ細かく記録を付けていきたいと思うらくだ🐫ですRails チュートリアル1周目の感想一周終わった!と言うよりは...
流されるまま進む前回からの続きその後、大きくハマることもなくかと言ってしっかり理解しながら進めいてる訳でもなく←テスト部分に至ってはほぼググッテコピペなんだけどもどうにかココまでやってきました。そして久々にドハマリましたんテストがGREENにならない10.2.3それは10.2.3を進めていた時の事です下の方のリスト10.23の部分ですcreat...
分からないことが沢山前回からの続きProgateさんの様に1から10まで説明してくれる訳でもないし説明が硬めの文章なので理解と言うか頭に入ってくるのに時間がかかりますねまぁしっかり頭を使いたまえよ🐫と言う事で頑張りたい詰まった所など2.1|Herokuにプッシュ出来ないgemのインストールもストレートに行かなくてでもココはまぁ、前回同様先にupdate...
所で全く関係ないんですがフォーム内が真っ白になって使えずにいたWordPressのビジュアルリッチエディターが使えるようになっていました。ありがたや。さて、前回のからの続きです。今回詰まった所など1.5.1|Herokにログインできないターミナルに「>heroku login」と入力するとURLが出てきてクリックするとブラウザが開いてログインの動...
Railstutorial始めました難しい難しいと聞くRailsチュートリアルを始めることにしましたこれはアレですねProgateやってなかったら完全に訳が分からなかったと思う因みにPCローカルではなく、憧れの(?)cloud9でやっていこうと思います今回詰まった所などAmazon Web Servicesの新規登録これは詰まったっていう程じゃないんだ...
前回からの続き考えながらとは言え、ノートを首っ引き状態でそこまで躓かない道場コースです。(書き写しのミスでエラーとかはある🐫テヘペロ)そんな中、なかなかのドハマリを致しましたので書いておきます解決してみれば簡単な事ですが、ハマってる時はなかなか気づかないモノですね……9/14 いいね!ボタンを作ろう でハマるハマったのはこちら。Rails道場コースⅣ...
前回の続き難しくなってきて追いつくのに時間がかかるけど大きく躓くことはなくどうにか最終章までやってきました!Progateでは出来るけどローカルでは出来ないコトⅪ章ではパスワードの暗号化についてなにこれ超重要じゃん!Progate上では特に問題なく作業することが出来ましたが問題はローカル環境久々にWindows環境の壁がやってきましたよ!bcyptが使...
前回の続きその後も特に大きく躓くこともなく。「メモを取りつつProgate→ローカル→メモをノートに纏める」の流れです気になるアレコレ手順通りに進めていますが「コレって何なの?」とか「もっとこうしたい!」とか出てきますよね後で調べたり追加したりできるようにメモっておりますが「ユーザーの新規登録画面でもプロフ画像設定したい!」は簡単そうでしたので復習もか...
前回からの続きメモを取りつつのんびりペースで進めております。そこまで詰まることはなく、何をしているかもどうにか付いて行けている感じです。エラーの原因そんな中、Ⅱ-15でなんでこうなった?な、エラーに出会いました投稿一覧ページ(loclhoat:3000/posts/index)を表示させた状態でヘッダーの投稿一覧ページへのリンクをクリックするとエラーで...
前回からの続きこの辺は一度流してやっているのでそこまで詰まることもなく、Progateをメモを取りつつ&ローカルでも同じことをしつつ進める→ノートに纏めるといった感じで何をしているのかもどうにか理解しつつ進められております現状分からないことSCSSCSSの書き方のうちの一つと言うイメージ。どういう風に働いてるのかはどうにか追いかけることが出来るけど自分...
ローカルでも同じことをやるをやってみようと、言うわけで(?)ProgateさんのRails学習コースを再開と言うか初めからやり直すことにしたので、Twitterで見かけた「ローカルでも同じことをやってみよう」と言うのにチャレンジしてみることにしました。環境設定と早速はまる🐫環境設定はこちらを参考にhttps://qiita.com/ruxes7/ite...
前回の記事を書いてからの事とかWordPressでブログを公開~オリジナルテーマ作成についてなんかの記事を書いていこうと思ってはいたのだけど、すっかり間が空いてしまって記憶が忘却の彼方ですね。アウトプットが大事と思いつつ、作業進めたくてブログが後回しになった結果でもあったりして。ちょっと頭を悩ませたりもしている問題だったりします(回りくどい)記事ではワ...
さて、独自ドメインを設定したサーバーに無事WordPressをインストールすることは出来ました。はてなで書いていたブログも無事インポートすることが出来ました。WordPressのオリジナルテーマを作ろう!とうとうサイト運営&ブログをWordPress化する最大の目的(?)オリジナルテーマ作りにチャレンジです。 目標とするデザインをHTML/CSSで作っ...
オリジナルテーマ?テーマのアレンジ??が一先ず満足な所まで来ましたのでプロフィールに載せているサイトアドレスをこちらに変更しました🎵後はちょこちょこいじっていこうと思います。ついでにポートフォリオ用のページ&カテゴリも用意。模写とサンプルをもう一つづつ作ってお仕事探しを始めたいと思います。とは言っても3月に夫の転勤&引っ越しの可能性が濃厚(でありたい希...
架空の酒造をイメージしてトップページのサンプルを作りました作ったページはこちら[blogcard url=”https://rakuda-san-desu.github.io/sample2018-10-09/”] ソースはこちらからhttps://github.com/rakuda-san-desu/sample2018-10-09イメージ 関連ペー...
XdomainにWordPressをインストール!パッと見難しいことはないですよね。Xdomainの管理パネルを開くとHTMLサーバー・PHP・MySQLサーバー・WordPress・メール(契約ドメイン専用)と、それぞれの設定パネルを開くようになっておりますね。当然何の疑問も持たずに上から順にドメイン設定をしていきます。せっかく取った独自ドメインです...
そうだ!WordPressにしよう!!クラウドソーシングでお仕事探しをしようと思い立ちましてその為にポートフォリオを作って、更に自分のサイトを改装しようと言う事に。Web作成でお仕事を探すにはWordPressも多少分かった方がいいよね?と言う事で、サイトはWordPressで作ることにしました! せっかくだからドメイン取っちゃう?!せっかくWordP...
WordPress始めましたタイトル通りですね。はい。Twitterで呟いていた通り勉強を兼ねて、ブログをWordPressに乗り換えることにしました。 絶賛オリジナルテーマを作成中ですがそりゃやっぱり時間がかかりそうです。なんだけどはてなからの引っ越し作業とかパーマリンクの再設定とか張り切ってやっちゃったんだよねテヘ🐫 とりあえずブログとして最終的に...
サンプルページ『亀井野酒造』を作りましたサンプルページ 亀井野酒造HTML&CSS自主練:サンプルページ『亀井野酒造』 - アラフォー専業主婦が緩くプログラミングを学ぶブログ手順としてはざっくり下記の流れです 何を作るか決める(山梨にある酒造って事にする) 情報収集(酒蔵のサイト巡り) メインターゲットを考える(セカンドライフを楽しむ世代) イ...
sample:亀井野酒造山梨にある酒蔵と言う設定で架空のサイトのトップページを作りましたhttps://rakuda-san-desu.github.io/sample2018-10-09/レスポンシブにも対応気になることはまだまだ多いけど修正し続けると収拾がつかなくなりそうなので一先ず公開。仮名の酒造。ですよ。えぇ。勿論アラフォーギャグですわよ🐫
上手く出来なかったマーク付きのボタン見本のボタンこういうヤツ。シンプルで素敵です。因みにhoverで反転です。マークがなければMOREをセンタリングでOKだけどマークが入りますよね。スペースで位置調整は卒業したいしなぁ。と、悩みました。最初に考えたボタン>の部分はFontAwesomeからリンクで。ちょっと太いけどとりあえず。と言った感じで。これをどう...
サイト模写始めましたサイト作成の練習としてサイト模写をすることにしました。「コーディング 模写 おすすめ」とかでググりましてこちらのサイトを模写することにpas-pol.jp自分ルールとして キャプチャ画像からコードを考えて書く なるべく検証やソースを見ない でもわからなかったら覗く hoverなど挙動もマネする 大体あってればOKにするまた...
今後の方針やりたいことは色々あるのだけど目標の一つである「収入を得る」に狙いを定めていこうと思います。らくだ🐫、主婦ニート脱却今のらくだ🐫のやりたい事・出来る事上にも書いたけど、やりたいことは沢山。その中で仕事としてでもやりたい事、今すぐ収入に結び付けられる方法は?と考えるとクラウドソーシングでのWebデザイン・コーディングのお仕事だな。と。その為にや...
作りながら学ぶHTML/CSSデザインの教科書6章、リンク設定に関しての諸々。リンクの設定自体と言うより、いろんなナビゲーションの作り方・考え方について。大切なのは閲覧者がいかに見やすく、使いやすいデザインであるか。と、言う事。カッコイイ!素敵!!ってなるのはもちろん大切だけど操作しづらいと疲れちゃうもんね。閲覧者がいつでも簡単に ページ内の現在地を...
Ruby学習コースの復習ProgateのRubyの学習コースはその後大きな躓きもなく終了することが出来まして復習と言う事でローカル環境で模写をしてみました。環境はRubyコースのコラムを参照に整えました。らくだ🐫のPCはご家庭用の32bitですのでちょっと戸惑ったりはしたよね。ネット回線も貧弱なのでアレでしたが一先ず環境構築。で、コードの実行をコンソー...
Ruby始めましたJavaScript&jQueryはさっくり目に終わらせてとうとうRubyコースに入りました。プログラム感あるよね付いて行けるかな?!とドキドキならくだ🐫でしたがJavaScriptをやっていたおかげかそこまで躓くこともなく進めております。まぁ言っても初歩の初歩だもんね。🐫頑張る。ちょっと悩んだreturnでの条件分岐こうすれば出来る...
作りながら学ぶHTML/CSSデザインの教科書本日はサクサクと5章を。ページヘッダーやページフッダーの追加と2カラムのレイアウトなどカラムデザインと言えばfloatfloatの不具合回避としてProgateでは空のdivを挿入してfloat解除する方法を教わりましたがこちらでは疑似要素を使うやり方を。しかし段組みはフレックスボックスでやるようにしたいの...
作りながら学ぶHTML/CSSデザインの教科書前回は1~2章準備とメインの部分のマークアップ。今回は3~4章。cssによる装飾と画像の挿入です。画像が入るとにぎやかになりますね。新しい知識もいくつか。line-heightキレイに見せるためには丁寧にデザインしましょう。と、言う事で今までそこまで気にしていなかったline-heightにもテクニックが。...
一見複雑なので構えちゃう上級Progate、jQueryの上級コースに入りました。とりあえずスライドの所(1/18~7/18)まで。パッと見の複雑さで「難しそう……🐫💧」と構えちゃいますね。集中力がかけていたこともあって混乱気味になりつつも実際はパーツごとに指示されてるしノートやスライドを見直しながらではありますがどうにか付いて行けました。ただやっぱり...
作りながら学ぶHTML/CSSデザインの教科書WEBデザイン&コーディングの勉強にこちらの本を購入しました。HTML&CSSの初歩から、一つのサイトを構築して公開するまでが説明されている模様です。早速知らないタグが始めのうちはサクサクと。と、思いきや早速知らないタグに遭遇。セクションタグセクションタグの種類article((~についての)記事)そのまと...
jQuery始めましたJavaScriptコースは計算!って感じだったけどjQueryコースは動きがあって🐫は楽しいです。特に中級はサイトを作ってる感があって良いでした。とは言え、楽しいけど馴染めてないので頭を使いますね。中級コースは3週やってどうにか理解(消化は出来ていない模様)道場コースはメモを見ながら何とかクリアでした。一つ一つのメソッドやイベン...
今更の疑問ProgateのJavaScript(ES6)の学習コースを復習しておりましたら疑問が湧きまして。const(定数)は更新できないのでは?JavaScript学習コースⅡの7章「配列の要素の更新」での事です。定数 に代入された配列の要素を 更新 する訳です。でも 定数 は更新できないって習ったじゃん?更新できない 定数 に設定することで予期せ...
ProgateのJavaScriptコース完走ブログの更新をしていない間、らくだ🐫が何をしていたかと言うとProgateでJavaScriptをやっていました。HTML&CSSの時の様に詰まった所をまとめていこうかとも思ったんだけどHTML&CSSと違って全く初めて触れるモノなのでむしろ全部わからん的な状態でした。ProgateのJav...
HTML&CSS道場コース上級編勢い勇んで道場コースの上級編をやろうとしたら最初からさっぱりわからなくて学習コースをやり直したらくだ🐫です。いや、びっくりした。結局「なにこれ分からん」ってなったのはヘッダー部分の各コンテンツへのリンクを、モバイルサイズの時はアイコンマークにするっていう部分位で後はソコソコすんなり。(モバイルだけ整えてタブレット...
HTML&CSS道場コース中級終了今日はなんだか調子がいい(気がする)らくだ🐫です。道場コース中級、メッセージ部分とフッターはサクサク終了できました。とは言えちょっとくらいは躓くよね。凡ミス注意思ったようにスタイルが適用されないぞ?と思うとクラス名の指定を間違えていたりmessage-rapperに指定したいのにmessageだけにしていたりc...
HTML&CSS道場コース中級時間配分がヘタクソならくだ🐫です。道場コース中級のレッスン部分をまとめようと思うのですが連休を挟んじゃったので記憶が曖昧です。曖昧な中でも覚えている事はそれだけ印象深かったと言う事で(?)覚えていることをまとめたいと思います。とにかく悩みまくったレッスン部分で一番苦しんだのはパーツそれぞれのレイアウトですね。学習コ...
HTML&CSS道場コース中級編今日は(今日も)集中力の無いらくだ🐫です昨日の夕方~今日の午前中に学習コース上級編をやりまして道場コースの中級編に入りました。上級編の事は道場コースの時にでも。最初はスムーズトップ(背景画像が付いている部分)はさほど悩まず。Font Awesomeのクラスの指定方法だけ見直しました見る力も備えたいヘッダー部分は指...
7/30修正HTML&CSS学習コース中級編2週目指示に従うだけなので2週目だし、指示通りにタグ打ちするだけなので基本サクサクと。2週目なのでスライドは飛ばして指示だけ見て書く様にしたんだけど、「marginを15pxに」の様に超具体的な指示じゃなくて「aをブロック要素へ」のような指示の場合「あれ?プロパティとかどうするんだっけ?」となりスライ...
HTML&CSS道場コース初級編勢いに乗ってやってみました今日はやりたい事だけやろうの日。なのでらくだ🐫はProgateを集中してやることにしました。HTML&CSSの学習コース中級が終わったので、勢いに乗って道場コースの初級編へ。「学習コースの時どうやって作ったんだっけ?」ではなく「どうしたら仕様書(&見本)を再現できるかな?」と考え...
HTML&CSS中級編一昨日の夜、お小遣いをもらったらくだ🐫は早速Progateに課金しましてHTML&CSSの中級編に進みました。とは言ってもパソを触れない時間になっていたのでスマホから。スマホからだと良くも悪くもゲーム感覚でサクサク進みますね。ただ、結構感覚で入力しちゃってあんまり頭に入ってない感じ。(PCからなら頭に入るかのような...
昼間の続き相対パスの指定方法について、自分なりに纏めた図解(?同階層への指定 ./上階層への指定 ../同階層への指定「./」は省略する事もできるけど理由がない限りは記載した方がいいとこの事(ブラウザによって作動しない可能性?)8/4加筆(間違いがあったら指摘していただけるとありがたいです)(これにかかわらず突っ込み大歓迎です)(8/4修正 画像表示に...
引き続き練習問題 基礎 | Web基礎練習問題サイトこちらのサイトのHTML基礎問題の続き。ハイパーリンクのまとめ表示させる文字パス=path=道・道のりちなみにhrefは「エイチレフ」って読むのがいいそうですよ。発音的に。意味については諸説あるっぽいけどref=reference=参照する意味どころか読み方もわからなかったhrefと分かり合えた気がし...
らくだ🐫、お小遣いもらったらProgateの有料講座始めるんだ。ひとまずサイトを公開できましたのでネットで基礎的な問題集を探してやっております。練習問題 基礎 | Web基礎練習問題サイトひとまずこちらのHTML基礎問題を昨日・今日でやりました。で、Progateで出てきていなかった事のメモ<見出しについて>デザイン的にしか見ていなかったけど、SEOと...
らくだ🐫からって暑いよ。むしろ熱いのは苦手です。はい。さて、今日も今日とて自サイト作成。で、勢いに乗って公開してみました。その昔「私のホームページへようこそ」とかやっていた頃は契約していたプロバイダのサービスを使ったり無料サーバーを借りたりしていたものですが今回は他の事にも使えそうだし覚えたら便利そうと言うことでProgateを見ながらGitHub経由...
毎日暑いですね。極力リビングから出たくないらくだ🐫です。今日も今日とて自サイト作成です。今ある知識で作るので、だんだんレベルアップしていきたい。ひとまず形になったら公開しようと思っています。さて、前回悩んでいたヘッダー部分をセンタリングしたデザイン。こんな感じ↓にしたい訳です。ロゴの<div>のセンタリングはclassにmargin: 0 ...
今日は自サイト作りの続き。続きと言うか、修正?アレンジ?ヘッダー部分をもう少しすっきりさせたくていじってみました。いじりながら、タグの動きの確認やら。前回、イメージサイズの指定がうまくいかなくて「なんで?!基本中の基本じゃん?!?!悩む事じゃないじゃん!!!!」と、なっていた訳ですがエディタのプレビューがうまく動いていなかっただけでchromeさんから...
支払いの関係でProgateへの課金は来週からにする事にしたらくだ🐫です。今日は自主練として①目についたサイトのソースから構造やタグの動きを探る②自分のサイトの構想と考えていたのだけど①の方はブログとかが多くて、単純なHTMLで構築されたサイトが見つかりにくく断念。で、②に取り掛かりました。HTMLは少し触ったことがあったので、そこまで詰まることもなく...
Progate HTML&CSS学習コースの初級編、2週目は1.5hほどで終了しました。指示通り書いていくだけだからね。うん。で、中級編に行くか道場コースに行くか迷って、とりあえず申し込むかと思ったらお小遣いが足りませんでした!わはは。ネットの支払いカードがデビットカードなので、口座に残高無いと使えないんだよね。使いすぎなくていいけどね。何かの...
Progate HTML & CSS 学習コース 初級編を終了しました。3h50mとの事。(これ↑、学習の目安の時間であって、実際にかかった時間じゃないのね。ハズカシ。)指示に従って入力していくだけなのでそうそう詰まることもないけどブラインドタッチは出来ません。タグはほとんど覚えていません。英語は赤点でした。そんな私なので、タイプも遅いしタグは...
プログラミングと言うものが薄らぼんやりとわかったような気がしないでもない所で、何をしたいかと、何をどうやって学ぶか。今から始めますみたいな口調で書いてますが、ぶっちゃけますとProgateと言うサイトでまずはちょっとでも馴染みのあるHTML&CSSの学習を始めたところです。ツイッターでよく目にするProgateってなんだろう→プログラムの基礎が...
続けてこんにちは。主婦ニートのらくだ🐫です。らくだの鳴き声ってどんなんだっけ。プログラミングを勉強するぞって言っても何からしたら良いですかね。プログラミングとは何ぞやって所からですかね。と、言う訳で「おーけーぐーぐる、プログラミングとは」ざっくり言うと「コンピューターに向けてこういう事をしてねって言う指示を出す」って事ね。んじゃ、ワタシの黒歴史たる個人...
アラフォー主婦ニート、らくだ🐫と言いますこんにちは。年齢を考えたら高齢主婦ニートですね。客観的事実ツラい……何事も熱し易く冷め易い私ですが、何か新しい事したい!と思ったタイミングでプログラミングの勉強をしている人が目に付くようになりまして、興味を持った訳ですプログラミング?何それ美味しいの??って状態からどこまで行けるのか。ゆるっとですが、やってみよう...