HTMLでは半角スペースは１つ分のみ
こんにちは、ぐっちと申します。
今回はアプリ作成中に気が付いた事について書こうと思います。
フロント部分の作成中に、文字間を広めに取りたいと思いスペースを３つ入れてみた所、どうも思っていた程間隔があかない、思い切ってスペースを１０個くらい入れても変わらない。
これは何かあると調べたら、「HTMLでは半角スペースは、１つ分のみ有効でそれ以上は無効になる」という事でした。
どうやら、コード記述時のインデントのスペースを認識してしまいレイアウトが崩れる事を防止する為に、そういう仕様になっているみたいです。
ではどうすれば良いかですが
方法その１：全角スペースを入れる
半角スペースが無効になるなら、全角スペースを入れればいいじゃないという感じで、全角スペースならいくらでも反映される様です
方法その２：特殊文字を使う
これが半角スペースに当たる特殊文字で
<div>Hello World!</div>
こうする事で半角スペース２つ分の隙間があきます。
他にも空白を入れる特殊文字があり
-
 → よりも広めの空白をいれることができる -
 → の２倍の広さの空白をいれることができる -
 → よりも更に狭い空白を入れることができる
方法その３：CSSで隙間を取る
隙間をあけたい文字を<span>タグで囲み、CSSでmarginを当てれば自由に隙間を調節できます。
文字の隙間をあけるにも色々な方法があり、やはりプログラムは奥が深いなと感心しました。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
Javascriptで平仮名をカタカナに変換する
こんにちは、ぐっちと申します。
現在アプリ製作中でインクリメンタルサーチを実装したのですが、私の作成中のアプリでは検索対象が全てカタカナで、入力してもカタカナに変換するという一手間が掛かりとても使いにくい。
そこで入力した文字が平仮名でもカタカナとして判定し、検索を出来ないかと思い調べてみるとすぐに見つかり、あっと言う間に実装できてしまった。
function hiraganaToKatakana(str) {
return str.replace(/[\u3041-\u3096]/g, function(match) {
var chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
}
このコードを貼り付ければ終わり、、、なのですが流石に仕組みを理解しないまま実装する訳にいかないので、どういう方法で変換されているか解読してみました。
＜２行目＞
引数で渡された str に対して replace メソッドを実行しています。
replace メソッドは、第一引数にマッチした文字列を、第二引数として指定された文字列や無名関数に変換する もので、今回の場合第一引数に正規表現でUnicode表現で平仮名全てを指定しています。gが付いている為全てを参照します。
仮に「あい」という文字列が渡されたとすると下図を参照して u3042 u3044 というコードになり、マッチします。
そして「あい」が何に変化されるかというと、第二引数の無名関数 function(match) が実行されます。
＜３行目＞
変数 chr を宣言し、そこに match.charCodeAt(0) + 0x60; を代入しています。
matchは「あい」で、charCodeAt()メソッドは文字列の中の指定された位置にある文字の文字コードを返す、というものなので「あい」の「あ」が u3042 に変換されて + 0x60 されます。
上図でも分かる様に u3042に0x60を足すとu30A2になり「ア」のコードとなります。（規則性を持って配置されている為、平仮名のコードに16進数の60を足す事でカタカナになる様です）
そして「い」に対しても同じ様に処理されて、 u30A2 u30A4 というコードが返ります。
＜４行目＞
String.fromCharCode()メソッドによって今度は、コードを文字列に変換して返しています。
u30A2 u30A4 が アイ に変換されます。
最終的に「あい」が入力された場合は、'あい'.replace('あい', 'アイ') が実行された事になり、カタカナに変わるという仕組みです。
仕組みが分かるとスッキリしました。逆にカタカナを平仮名にするにはどうすれば良いかも分かりました。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
CSSでちょっとお洒落なボタンを作成する
こんにちは、ぐっちと申します。
現在アプリ作成をしていまして、見た目もちょっと拘ってみようと思い、このはてなブログでもあるマウスを乗せると色が変わるボタンや、下にズラッと出るリストを実装しようと思い、JavaScriptでやるんだろうなぁと考えていたら、同じ教室の生徒の方から「それならCSSで実装出来ますよ」と言われ
「え？そんなこと出来るの？」と思わず声に出して驚いてしまいました。
どうやら :hover というものを使用すると、マウスが乗った時に擬似クラスが作成されて設定したCSSが適応されるという仕組みみたいです。
調べてみるととても簡単に、お洒落なボタンに早変わりしてしまい、CSSってすごいなと感心しました。
恐らく、もっと調べれば便利な機能が出てくるでしょう。
やはりプログラマーとは自分から知識を吸収する事が大事だと再確認しました。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
Rails のタイムゾーンについて
こんにちは、ぐっちと申します。
今回は応用カリキュラムで学んだ事を書きたいと思います。
タイトルにもある通り、タイムゾーンの話です。
・デフォルトでは UTC
コードレビューをしてもらった際に、コメントで「メッセージの投稿時間が、日本時間で表示されていません。」と帰ってきた。
その時の私は、日本時間で表示されていない？日本時間表示ってなんだ？何時何分何秒って表示しろってことか？ と考えて
↓ こんなコードを修正しようと思い、strftime メソッドについて調べました。
= message.created_at.strftime("%Y/%m/%d %H:%M")
因みにこのコードだと、2019/07/10 12:00 という感じの表示になっています。
そしてフォーマットの一覧を見ているときにふと気になったものが、％Z（タイムゾーンを表示する）でした。
そこでやっと、ん？タイムゾーンって・・・となり早速
= message.created_at.strftime("%Y/%m/%d %H:%M %Z")
にしてやってみると、バッチリ 2019/7/10 12:00 UTC と表示されて9時間ずれていました。
それまで表示の仕方ばかりに気を取られていて、時間がずれている事など微塵も疑問に思わなかったのです。
という事で、次はRails タイムゾーンで検索して、config/application.rb に
config.active_record.default_timezone = :local
config.time_zone = 'Tokyo'
を追加して、データベース への保存時間と表示をJST（日本時間）に修正しました。
今まで何故気がつかなかったのか全くわかりませんが、また一つ勉強になった出来事でした。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
応用カリキュラムが終了
こんにちは、ぐっちと申します。
早いもので５月１１日にキックオフしてもうすぐ２ヶ月になります。
カリキュラムは応用編が終了して、個人アプリの開発に入りました。
応用編ではChatspaceというグループを作成しユーザーを追加して、グループ内でチャットをするというアプリの作成をしました。
フロントをHamlとScssで作成、Ajax、Jsonでの非同期通信、インクリメンタルサーチの実装、自動更新機能の実装といった流れで進んで行き、AWSでのデプロイまでやりました。
応用カリキュラムを振り返ってみて
一言で言うと「楽しかった」です。
決してスムーズに進んだ訳ではありませんでしたが、思い通りに動かない、値を表示しない時など色々調べて、あーでも無いこーでも無いと悩んだり、この動きをさせるにはどうすれば良いのか、一つ一つ思いついたやり方を試して段々と正解に近づいて行き、ようやく思い通りに動いた時は物凄い達成感でした。
今度は個人アプリ作成で同じ様に沢山悩むと思いますが、楽しんで作成していけたら良いと思います。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
プログラムスクールへ通うべきなのか
こんにちは、ぐっちと申します。
スクールへ通い始めて１か月が経ち、今まで学習してきた立場から
「スクールへ通ってプログラミングを学習するべきなのか」
についてあくまで１個人の意見として述べてみたいと思います。少しでも誰かの参考になれば良いです。
先ずは実際にスクールへ通ってみて、こういう人は挫折しないのではないかと思う項目をあげてみたいと思います。
学習時間を確保できる人
当たり前ですが、時間が確保できなければ学習できません。これは独学するにしても言える事です。
物事を習慣付けられる人
たとえ時間を確保できたとしても、それを学習に使うかは個人の自由です。学習を習慣にし、目標に向かって行けるかが重要かと思います。
ダイエットをしようと思い、ジョギングなんかを続けられた人などは、大丈夫ではないかと思います。
気の長い人
これは完全に個人的解釈ですが、プログラミングをしているとエラーが出る事や、思い通りに動かない事が頻繁に起こります。そういった時にイライラしてしまう人はプログラミングが嫌いになってしまうのではないかと思います。
また、学習していてすぐに身に付くというものではなく、何度もやる事でだんだん分かってきて、少しずつスキルが身に付いていくので、短気な人には向かないのではないかと思います。
プログラミングに投資のできる人
スクールに通うのにもお金がかかります。受講費、ノートPCの購入費、交通費、等々。私の場合は80万くらいです。
本当に習得できるかどうか不確かなものに、投資ができるかが問題ではないかと思います。
色々書きましたが、私個人としてはスクールに通って正解だったと思います。
分からないことは聞ける環境、経験者の生の声が聞ける、仲間ができる、等々独学では経験できなかったであろう事の方が多く、今の所順調に目標に近づいていると思います。
これからもコツコツと学習して行きます。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
１からアプリを作ってみて
こんにちは、ぐっちと申します。
現在はカリキュラムも応用編に入り、jQueryやhaml、Sassといったものを学習中ですが、Railsの事を忘れない様に、並行してミニアプリ開発といって簡単なTwitterもどきを１から作りました。
アプリ自体は今までの事を復習すれば、苦労する事なく作る事が出来ました。あまり凝ったものではないですが、デザインも自分で考えました。
カリキュラムには、期間内に出来たら追加機能を実装してみよう。と書いてあり、せっかくなので何か追加するかなと軽い気持ちで手をつけ始めたら、夢中になってしまって、調べ始めると時間を忘れ、色々試したりして思い通りの動きをした時は、なんとも言えない達成感がありました。
Gitも使用して作成していたので、ぐちゃぐちゃになる事もありませんでした。
やはり自分で何かを作ることは、大変だが楽しいという事を再認識出来ました。
引き続きコツコツ学習して行きます。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
