今日やったこと Webの神様模写コーディング (2h) https://www.youtube.com/watch?v=RBLkXAG4QTM& 基本情報技術者試験（キタミ式) (0.5h) うまくいったこと 最近模写コーディングを始めて、Progateからの脱出ができそう。 うまくいかなかったこと 衝動的に何をするか決めてしまうため、もっと計画的に勉強を進める必要がある。 午後になると頭が動かない。 対策 衝動的に何かする前にやることを記録する習慣をつける。（レコーディングダイエット的な） 長い目で見てめんどくささを減らしてくれるものを優先して覚える（ショートカットとか）
今日やったこと Webの神様模写コーディング (2h) https://www.youtube.com/watch?v=RBLkXAG4QTM&
基本情報技術者試験（キタミ式) (0.5h)
うまくいったこと 最近模写コーディングを始めて、Progateからの脱出ができそう。
うまくいかなかったこと 衝動的に何をするか決めてしまうため、もっと計画的に勉強を進める必要がある。 午後になると頭が動かない。
対策 衝動的に何かする前にやることを記録する習慣をつける。（レコーディングダイエット的な） 長い目で見てめんどくささを減らしてくれるものを優先して覚える（ショートカットとか）
スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。 ある時スライドをポップアップさせて動画を表示させる依頼がありました。 仕様としては 「ページャーには第○章と順に入れてね」 「スマホの時はページャーをドットにしてね」 というもので、やり方を調べて実装しました。以下備忘録です。 slickでページャーを変更できる「customPaging」 「customPaging」というオプションで自由に変更できます。 $('.c5-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, arrows: true, prevArrow: '<span class="prev-arrow">前</span>', nextArrow: '<span class="next-arrow">次</span>', customPaging: function(slider, i) { return $('<div class="c5-dots__num">').text('第' + (i+1) + '章'); }, dotsClass: 'c5-dots', dots: true, }); See the Pen slick__pager__1 by yoshida (@yoshi090) on CodePen. 数字を降順にする 「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。 <section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section> customPaging: function(slider, i, j) { j = 5; return $('<div class="c5-dots__num">').text('第' + (j-(i+1)) + '章'); } See the Pen slick__pager__2 by yoshida (@yoshi090) on CodePen. 途中に番外編を入れる 「ごめん、動画で２章番外編があるから４章と３章の間に入れてね」と言われたら。 <section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 2章番外編 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section> customPaging: function(slider, i, j) { j = 6; if(i >= 0 && i < 1){ return $('<div class="c5-dots__num">').text('第' + (j - (i+2)) + '章'); }else if(i == 1){ return $('<div class="c5-dots__num">').text('第2章番外編'); }else{ return $('<div class="c5-dots__num">').text('第' + (j - (i+1)) + '章'); } } See the Pen slick__pager__3 by yoshida (@yoshi090) on CodePen. 以上です。 参考 slick - にほんご。
スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。 ある時スライドをポップアップさせて動画を表示させる依頼がありました。 仕様としては 「ページャーには第○章と順に入れてね」 「スマホの時はページャーをドットにしてね」 というもので、やり方を調べて実装しました。以下備忘録です。
「customPaging」というオプションで自由に変更できます。
$('.c5-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, arrows: true, prevArrow: '<span class="prev-arrow">前</span>', nextArrow: '<span class="next-arrow">次</span>', customPaging: function(slider, i) { return $('<div class="c5-dots__num">').text('第' + (i+1) + '章'); }, dotsClass: 'c5-dots', dots: true, });
See the Pen slick__pager__1 by yoshida (@yoshi090) on CodePen.
「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。
<section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section>
customPaging: function(slider, i, j) { j = 5; return $('<div class="c5-dots__num">').text('第' + (j-(i+1)) + '章'); }
See the Pen slick__pager__2 by yoshida (@yoshi090) on CodePen.
「ごめん、動画で２章番外編があるから４章と３章の間に入れてね」と言われたら。
<section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 2章番外編 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section>
customPaging: function(slider, i, j) { j = 6; if(i >= 0 && i < 1){ return $('<div class="c5-dots__num">').text('第' + (j - (i+2)) + '章'); }else if(i == 1){ return $('<div class="c5-dots__num">').text('第2章番外編'); }else{ return $('<div class="c5-dots__num">').text('第' + (j - (i+1)) + '章'); } }
See the Pen slick__pager__3 by yoshida (@yoshi090) on CodePen.
以上です。
slick - にほんご。
background-image: image-urlでSassC::SyntaxError デプロイ前にcssに記述したbackground-imageを 下記のように記述したら SassC::SyntaxError となりました。 background-image: image-url("IMG_4335 (1).JPG"); 原因は文字間にスペースがあったからでした。 初歩的なミスに随分時間を費やしてしまいました。。
デプロイ前にcssに記述したbackground-imageを 下記のように記述したら SassC::SyntaxError となりました。
background-image: image-url("IMG_4335 (1).JPG");
原因は文字間にスペースがあったからでした。 初歩的なミスに随分時間を費やしてしまいました。。
事前基礎知識学習:HTML / CSS / Javascript HTML / CSS / JavaScript 【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！ を見るだけでいいと思います Railsでは一部のHTMLタグは使いません。Rails独特のヘルパーメソッドで記述します。 へルパーメソッドをデフォルトとして覚える方が無駄な混乱をせずに済むと思います。 <%= image_tag 'example.png', class: 'example' %> ← ヘルパーメソッドの方だけ覚える ↓ Railsが自動的にHTMLコードに変換してくれる <img class="example" src="app/asset/images/example.png"> ヘルパーメソッドのあるタグ a タグ : リンクを張る <a href ="http://www.htmq.com/">HTMLクリックリファレンス</a> imgタグ : 写真を貼る <img class="example" src="app/asset/images/example.png"> formタグ関連 : フォームを生成する為のタグと部品 <FORM> …… 入力・送信フォームを作成する <INPUT> …… フォームの構成部品（入力欄・ボタン等）を作成する <INPUT type="submit"> …… フォームの送信ボタン・リセットボタンを作成する <INPUT type="image"> …… フォームの画像ボタンを作成する <INPUT type="button"> …… フォームの汎用ボタンを作成する <BUTTON> …… ボタンを作成する <INPUT type="text"> …… 一行テキストボックスを作成する <INPUT type="password"> …… パスワード入力欄を作成する <INPUT type="radio"> …… ラジオボタンを作成する <INPUT type="checkbox"> …… チェックボックスを作成する <INPUT type="hidden"> …… 非表示データを送信する <INPUT type="file"> …… サーバーにファイルを送信する <SELECT> …… セレクトボックスを作成する <OPTGROUP> …… セレクトボックスの選択肢をグループ化する <OPTION> …… セレクトボックスの選択肢を指定する <TEXTAREA> …… 複数行の入力フィールドを作成する <LEGEND> …… フォームの入力項目グループにタイトルを付ける <FIELDSET> …… フォームの入力項目をグループ化する <LABEL> …… フォーム部品と項目名（ラベル）を関連付ける <ISINDEX> …… 検索キーワードの入力欄を作る 余談・・・。 実は、Rails Tutorialを始める前にTECH::CAMPプログラミング教養で4ヶ月ほどコツコツと学習したんです。 その際にHTML・CSSの基礎的な内容を20時間近くかけて学習しました。 何処にどんな感じで記載すればいいのかは覚えてます。細かい記述方法は一切覚えていないです。 15年前に学生だった時にもHTML・CSSを学習しました。 実務で使わなかったのでUNIXコマンドと同様にきれいさっぱりと忘れてしまいました。 個人的な意見ですが、結局覚えたところで忘れます。HTMLやCSSを細かく覚える必要はないです。 簡単な概念だけ理解して自分でアプリを作ってみる時に調べながら覚える方が良いと思います。 TECH::CAMP紹介 コース 料金 特徴 TECH::CAMPプログラミング教養 月会費19,800円 + 入会金198,000円 自分のペースで学べる TECH::CAMPエンジニア転職:短期集中スタイル 一括648,000円 わずか10週間でプロのスキルを身につける学習スタイル。 TECH::CAMPエンジニア転職:夜間・休日スタイル 一括848,000円 昼間はオンライン、夜間と休日(週2日)は教室を利用して、半年間じっくりと学ぶ学習スタイル。 やっぱりプログラミングスクールなので高額です。プログラミングスクールって受講年齢制限があったり、年齢で転職サポートを足切りしている所が多いんですよね。ここは年齢制限なく転職サポートが付いているらしいです。 私と同年齢の方はモチベーションが落ちる内容ですが、若手経営者目線で採用について語ってくれています。 セイト先生のWeb・IT塾未経験20代・30代からエンジニア転職が難しい本当の理由【解決策も解説】 彼の言うとおりにITベンチャーは若い人達が多いので年上の部下はやりずらいのとても理解出来ます。35歳の私が彼の会社に就労できる可能性は限りなく0に近いでしょうね。 【20代貯金ゼロ6割】自己投資か自己破産か「若手経営者の本音」 年齢を重ねるにつれて自分の価値がどんどん下がっている事を痛感しています。 自分の望む環境を手に入る為に自分の価値を上げる努力を頑張るぞ～！ TECH::CAMPエンジニア転職:短期集中スタイルを自分がやり切れるとは思えませんでした。 なのでTECH::CAMPプログラミング教養を選びました。 自分的には受講してよかったと思っています。 どんな風にプログラミングを学習すればいいかさっぱり分からなかった状態から どう学習すればいいか、筋道が少し見えたというのが一番の理由です。 月額19,800円を払う価値はあると思いますが、入会金198,000円は高いです。 内容はRailsを使ったWEBアプリをhands-onで4本開発。 この他にpythonを使った機械学習手法・IBM CloudのNode-red/Watson Assistantを使ったLINEボット作成といった内容もあり面白いです。 私が受講したプログラミング教養は広く浅い知識を得られるといった印象で、自分が作りたいと思ったアプリを作れるようなレベルには達しませんでした。 機械学習を一通り学習しても、自分が作りたいAIモデルはどのようなデータを集めて、どのように記述を書いてモデルを作るのかといった部分が欠けていました。 またpythonで作ったAI学習モデルをどうやってスマホアプリやWEBアプリと連携するのかと言った部分も抜け落ちています。 自分でググって情報を検索してみるとAIにスピードと簡単さを提供するIBM Visual Inspection 「やってみよう物体検出」といった簡単にAIモデル作成できるサービスがある事や、APIを利用してjson形式でAIモデルとやり取りをする事が出来るといった内容も少ないです。そういった部分が抜けているので今後改善されていく事に期待しています。 一通り、全カリキュラム(WEBアプリ開発・デザイン・機械学習)全てのコースを終えたので退会しました。 退会するとカリキュラム閲覧が出来なくなるが最大のウィークポイントです。 またRails Tutorialを始めたきっかけは、TECH::CAMPで学んで簡単なアプリをなんとな～く作れる様になったけど、何度アプリを作成してもRailsの記述で分からない部分が多過ぎるのが理由です。 Rails Tutorialを読んでいても何度読み返しても理解できない部分があるので、 アプリを作成するのに全てを理解する必要ないし、Railsっていうのはこんな風に書くんだという感じで慣れるレベルで良いのかな？と思ってきました。 それでもRails Tutorialで学習しているおかげで分からなかった闇の部分が少しだけ晴れました。 またテスト駆動開発やGitを活用した内容が組み込まれているので教材の質が高いなというのが印象です。 古いバージョンは無料です。ウェブテキストの価格も980円で破格ですね。 是非興味がある方は Rails Tutorialに挑戦してみてください。
【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！ を見るだけでいいと思います
Railsでは一部のHTMLタグは使いません。Rails独特のヘルパーメソッドで記述します。 へルパーメソッドをデフォルトとして覚える方が無駄な混乱をせずに済むと思います。
<%= image_tag 'example.png', class: 'example' %> ← ヘルパーメソッドの方だけ覚える ↓ Railsが自動的にHTMLコードに変換してくれる <img class="example" src="app/asset/images/example.png">
ヘルパーメソッドのあるタグ a タグ : リンクを張る <a href ="http://www.htmq.com/">HTMLクリックリファレンス</a> imgタグ : 写真を貼る <img class="example" src="app/asset/images/example.png"> formタグ関連 : フォームを生成する為のタグと部品 <FORM> …… 入力・送信フォームを作成する <INPUT> …… フォームの構成部品（入力欄・ボタン等）を作成する <INPUT type="submit"> …… フォームの送信ボタン・リセットボタンを作成する <INPUT type="image"> …… フォームの画像ボタンを作成する <INPUT type="button"> …… フォームの汎用ボタンを作成する <BUTTON> …… ボタンを作成する <INPUT type="text"> …… 一行テキストボックスを作成する <INPUT type="password"> …… パスワード入力欄を作成する <INPUT type="radio"> …… ラジオボタンを作成する <INPUT type="checkbox"> …… チェックボックスを作成する <INPUT type="hidden"> …… 非表示データを送信する <INPUT type="file"> …… サーバーにファイルを送信する <SELECT> …… セレクトボックスを作成する <OPTGROUP> …… セレクトボックスの選択肢をグループ化する <OPTION> …… セレクトボックスの選択肢を指定する <TEXTAREA> …… 複数行の入力フィールドを作成する <LEGEND> …… フォームの入力項目グループにタイトルを付ける <FIELDSET> …… フォームの入力項目をグループ化する <LABEL> …… フォーム部品と項目名（ラベル）を関連付ける <ISINDEX> …… 検索キーワードの入力欄を作る
実は、Rails Tutorialを始める前にTECH::CAMPプログラミング教養で4ヶ月ほどコツコツと学習したんです。 その際にHTML・CSSの基礎的な内容を20時間近くかけて学習しました。 何処にどんな感じで記載すればいいのかは覚えてます。細かい記述方法は一切覚えていないです。 15年前に学生だった時にもHTML・CSSを学習しました。 実務で使わなかったのでUNIXコマンドと同様にきれいさっぱりと忘れてしまいました。 個人的な意見ですが、結局覚えたところで忘れます。HTMLやCSSを細かく覚える必要はないです。 簡単な概念だけ理解して自分でアプリを作ってみる時に調べながら覚える方が良いと思います。
やっぱりプログラミングスクールなので高額です。プログラミングスクールって受講年齢制限があったり、年齢で転職サポートを足切りしている所が多いんですよね。ここは年齢制限なく転職サポートが付いているらしいです。
私と同年齢の方はモチベーションが落ちる内容ですが、若手経営者目線で採用について語ってくれています。
セイト先生のWeb・IT塾未経験20代・30代からエンジニア転職が難しい本当の理由【解決策も解説】 彼の言うとおりにITベンチャーは若い人達が多いので年上の部下はやりずらいのとても理解出来ます。35歳の私が彼の会社に就労できる可能性は限りなく0に近いでしょうね。
【20代貯金ゼロ6割】自己投資か自己破産か「若手経営者の本音」 年齢を重ねるにつれて自分の価値がどんどん下がっている事を痛感しています。 自分の望む環境を手に入る為に自分の価値を上げる努力を頑張るぞ～！
TECH::CAMPエンジニア転職:短期集中スタイルを自分がやり切れるとは思えませんでした。 なのでTECH::CAMPプログラミング教養を選びました。
自分的には受講してよかったと思っています。 どんな風にプログラミングを学習すればいいかさっぱり分からなかった状態から どう学習すればいいか、筋道が少し見えたというのが一番の理由です。 月額19,800円を払う価値はあると思いますが、入会金198,000円は高いです。
内容はRailsを使ったWEBアプリをhands-onで4本開発。 この他にpythonを使った機械学習手法・IBM CloudのNode-red/Watson Assistantを使ったLINEボット作成といった内容もあり面白いです。 私が受講したプログラミング教養は広く浅い知識を得られるといった印象で、自分が作りたいと思ったアプリを作れるようなレベルには達しませんでした。 機械学習を一通り学習しても、自分が作りたいAIモデルはどのようなデータを集めて、どのように記述を書いてモデルを作るのかといった部分が欠けていました。 またpythonで作ったAI学習モデルをどうやってスマホアプリやWEBアプリと連携するのかと言った部分も抜け落ちています。 自分でググって情報を検索してみるとAIにスピードと簡単さを提供するIBM Visual Inspection 「やってみよう物体検出」といった簡単にAIモデル作成できるサービスがある事や、APIを利用してjson形式でAIモデルとやり取りをする事が出来るといった内容も少ないです。そういった部分が抜けているので今後改善されていく事に期待しています。
一通り、全カリキュラム(WEBアプリ開発・デザイン・機械学習)全てのコースを終えたので退会しました。 退会するとカリキュラム閲覧が出来なくなるが最大のウィークポイントです。
またRails Tutorialを始めたきっかけは、TECH::CAMPで学んで簡単なアプリをなんとな～く作れる様になったけど、何度アプリを作成してもRailsの記述で分からない部分が多過ぎるのが理由です。
Rails Tutorialを読んでいても何度読み返しても理解できない部分があるので、 アプリを作成するのに全てを理解する必要ないし、Railsっていうのはこんな風に書くんだという感じで慣れるレベルで良いのかな？と思ってきました。
それでもRails Tutorialで学習しているおかげで分からなかった闇の部分が少しだけ晴れました。 またテスト駆動開発やGitを活用した内容が組み込まれているので教材の質が高いなというのが印象です。 古いバージョンは無料です。ウェブテキストの価格も980円で破格ですね。 是非興味がある方は Rails Tutorialに挑戦してみてください。
要素が重なった時に優先順位を決めたい！ 2つの要素にpositionをつけた時、思わぬ形で要素が重なってしまう、、 https://gyazo.com/3c01c80fad0dc299c069baf4a7376225 原因、2つの要素にpositionをつけた時には、勝手に優先順位ができるので、優先順位を手で書き込むこと header{ position: fixed;z-index:10;//z-index:10;を追加 text-align:center; } .tweets-comment{ width: 30vw; background-color: burlywood; position: relative;z-index:0; ;//z-index:0;を追加 } 結論！ z-index:0;の数字が高い 上 z-index:0;の数字が低い 下になります 直りました。。 https://gyazo.com/61361fe8cfce08d8880a2687e055813a
https://gyazo.com/3c01c80fad0dc299c069baf4a7376225
header{ position: fixed;z-index:10;//z-index:10;を追加 text-align:center; }
.tweets-comment{ width: 30vw; background-color: burlywood; position: relative;z-index:0; ;//z-index:0;を追加 }
https://gyazo.com/61361fe8cfce08d8880a2687e055813a
