開発者のレベル ポケットモンスター緑・赤で例えるならばタケシに会うレベル 動いたらいいな♡って念じながらプログラミングをやっています 診断サービスをつくろうと思った理由 アプリを開発している知り合いのボドゲ―マーに「診断アプリはオススメだよ」って言われたからです。 いつかアプリ開発にも手を出したいよ～～。 ゲームとかもつくりたい。 そして広告収入という名の不労所得がほしい。 つくったサービス http://myzm.sakura.ne.jp/ 99%の確率で私の好きなボードゲームであるバラージをおススメしてくれる私得の診断サービスです。出オチ100%である。 実はsakuraのサーバーに移植する前はAWSのS3にコードを放り込むだけという適当なものをTwitterで公開してました。 遊んでくれた方々に感謝。 バラージを布教したいので、99%の確率でバラージをおすすめするボドゲ診断サービスを作ってみました！ https://t.co/jSB24ZYWug pic.twitter.com/w2dq7kcOuZ— 黛 (まゆずみ) (@t12200301) October 3, 2020 どうやってつくったか？ Webサイトのテンプレートについては下記を参考に自分好みに改造していきました。 https://templatemo.com/tm-539-simple-house 選定基準としては 1. Javascriptを利用している（少しでもJavascript触りたい)。 2. 好み 3. シンプル 診断機能についてはこちらの記事を参考にしました。 https://qiita.com/bstyle6130/items/c3dfebdceaaef8e3860d なんとな～くは理解できるけど０からこれを作れと言われたらif文をがりがり回すしか思いつかないので、 先駆者の方に感謝！ 改善点 私の今の力ではすぐに解決できないな～っていうのは下記です。 技術力が高まったらあとで直したいのでメモしておきます。 1.診断結果をシェアするときに画像も一緒にツイートさせる。 Twitterの性格診断なんかでよく見る形かと思います。 Twitterのシェア機能では画像を一緒に添付されているのですが、Twitterボタンの生成機能に画像情報を付記する項目が無いので、おそらくこれはTwitterカードをresultごとに動的に生成しているのではないかと予想。 となると、それを自力でなんとかするのは今の段階では無理なので、ちょっと保留にしておきます。 2.コードに対する理解を深める。 正直なにがどうなって動いているの？ってところもあるので、もうちょっと修正を効かせるために理解を深めたいです。 3.httpをhttpsにしたい。 この領域に関してはちゃんと理解したいので改めてまとめます！ バラージとはなにか？ バラージは第一次世界大戦後のヨーロッパを舞台に、各国の発電会社のCEOになって発電するボードゲームです。 つくってよかったこと バラージをやる頻度が高まったよ！ あとはサービスの原理を知っているのと実際にプロダクト？として出すのとでは大きく違うなあという月並みな感想です。 次は何しよっかな～～。
ポケットモンスター緑・赤で例えるならばタケシに会うレベル 動いたらいいな♡って念じながらプログラミングをやっています
アプリを開発している知り合いのボドゲ―マーに「診断アプリはオススメだよ」って言われたからです。 いつかアプリ開発にも手を出したいよ～～。 ゲームとかもつくりたい。 そして広告収入という名の不労所得がほしい。
http://myzm.sakura.ne.jp/
99%の確率で私の好きなボードゲームであるバラージをおススメしてくれる私得の診断サービスです。出オチ100%である。 実はsakuraのサーバーに移植する前はAWSのS3にコードを放り込むだけという適当なものをTwitterで公開してました。 遊んでくれた方々に感謝。
バラージを布教したいので、99%の確率でバラージをおすすめするボドゲ診断サービスを作ってみました！ https://t.co/jSB24ZYWug pic.twitter.com/w2dq7kcOuZ— 黛 (まゆずみ) (@t12200301) October 3, 2020
バラージを布教したいので、99%の確率でバラージをおすすめするボドゲ診断サービスを作ってみました！ https://t.co/jSB24ZYWug pic.twitter.com/w2dq7kcOuZ
Webサイトのテンプレートについては下記を参考に自分好みに改造していきました。 https://templatemo.com/tm-539-simple-house
選定基準としては 1. Javascriptを利用している（少しでもJavascript触りたい)。 2. 好み 3. シンプル
診断機能についてはこちらの記事を参考にしました。 https://qiita.com/bstyle6130/items/c3dfebdceaaef8e3860d
なんとな～くは理解できるけど０からこれを作れと言われたらif文をがりがり回すしか思いつかないので、 先駆者の方に感謝！
私の今の力ではすぐに解決できないな～っていうのは下記です。 技術力が高まったらあとで直したいのでメモしておきます。
Twitterの性格診断なんかでよく見る形かと思います。 Twitterのシェア機能では画像を一緒に添付されているのですが、Twitterボタンの生成機能に画像情報を付記する項目が無いので、おそらくこれはTwitterカードをresultごとに動的に生成しているのではないかと予想。 となると、それを自力でなんとかするのは今の段階では無理なので、ちょっと保留にしておきます。
正直なにがどうなって動いているの？ってところもあるので、もうちょっと修正を効かせるために理解を深めたいです。
この領域に関してはちゃんと理解したいので改めてまとめます！
バラージは第一次世界大戦後のヨーロッパを舞台に、各国の発電会社のCEOになって発電するボードゲームです。
バラージをやる頻度が高まったよ！
あとはサービスの原理を知っているのと実際にプロダクト？として出すのとでは大きく違うなあという月並みな感想です。 次は何しよっかな～～。
デイトラWeb制作コース初級編DAY10の学び 【この記事に書いてあること】 プログラミング学習10,11日目⏩Web制作コース 初級編DAY10 ?学習時間:25分⏳学習内容:Bootstrapの基本を学ぶ✏学び?・BootstrapはHTMLのclass名に書くだけで、CSSが反映される・Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある#デイトラ#プログラミング初心者 pic.twitter.com/EyymHvD6cp— ふりっく?トリプルゼロの（これから）フリーランス (@FuRiC_twi) January 25, 2021 【学習時間】 25分 【学び】 1 Bootstrapの使い方 Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある index.html <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 2 よく使うBootstrapのclass名 ・文字の色を変える（青）：text-primary ・文字を中央に置く：text-center ・文字を左右に置く（右）：text-right ・文字を太くする：font-weight-bold ・文字を細くする：font-weight-light ・文字の背景に色を付ける（青）：bg-primary ・フォントをサイズを変更する(一番大きい)：display-1 ↓ 3 Bootstrapのclass名は公式サイトのドキュメントに掲載してある 参考サイト: Bootstrapドキュメント https://getbootstrap.jp/docs/5.0/getting-started/introduction/
プログラミング学習10,11日目⏩Web制作コース 初級編DAY10 ?学習時間:25分⏳学習内容:Bootstrapの基本を学ぶ✏学び?・BootstrapはHTMLのclass名に書くだけで、CSSが反映される・Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある#デイトラ#プログラミング初心者 pic.twitter.com/EyymHvD6cp— ふりっく?トリプルゼロの（これから）フリーランス (@FuRiC_twi) January 25, 2021
プログラミング学習10,11日目⏩Web制作コース 初級編DAY10 ?学習時間:25分⏳学習内容:Bootstrapの基本を学ぶ✏学び?・BootstrapはHTMLのclass名に書くだけで、CSSが反映される・Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある#デイトラ#プログラミング初心者 pic.twitter.com/EyymHvD6cp
25分
1 Bootstrapの使い方 Bootstrapを使用するには、専用のスタイルシートを読み込む必要がある
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
2 よく使うBootstrapのclass名
・文字の色を変える（青）：text-primary
text-primary
・文字を中央に置く：text-center
text-center
・文字を左右に置く（右）：text-right
text-right
・文字を太くする：font-weight-bold
font-weight-bold
・文字を細くする：font-weight-light
font-weight-light
・文字の背景に色を付ける（青）：bg-primary
bg-primary
・フォントをサイズを変更する(一番大きい)：display-1
display-1
3 Bootstrapのclass名は公式サイトのドキュメントに掲載してある 参考サイト: Bootstrapドキュメント
https://getbootstrap.jp/docs/5.0/getting-started/introduction/
どうも7noteです。アラートなどの警告ボックスを画面中央に表示させます。 javascriptのalert等は表示位置を変えることができないので1からオリジナルで作ります。 ボタンを押した後の処理は書いてませんので利用目的に合わせて改良してお使いください。 確認してくるボックスを画面中央に出すソースのサンプル ※jQueryをちょっとだけ使ってます。jQueryって何？という方はこちら。 index.html <div id="overflow"> <div class="conf"> <p>本当に決定してもいいですか？</p> <div class="btns"><input type="button" value="キャンセル" onClick="cansel();"> <input type="button" value="オッケー" class="ok" onClick="next();"></div> </div> </div> <p>これでいいですか？</p> <input type="button" value="決定" onClick="check();"> style.css #overflow { width: 100vw; /* 横幅を画面いっぱいにする */ height: 100vh; /* 高さを画面いっぱいにする */ background-color: rgba(0,0,0,0.2); /* 背景を半透明の黒い背景にする */ position: absolute; /* 相対位置に指定 */ z-index: 10; /* ウィンドウの全面に表示 */ display: none; /* 初期は非表示 */ } #overflow .conf { background: #FFF; /* 背景を白色に指定 */ padding: 20px; /* 余白を20pxに指定 */ position: absolute; /* 装置位置に指定 */ top: 50%; /* 上から50%の位置に配置 */ left: 50%; /* 左から50%の位置に配置 */ transform: translate(-50%,-50%); /* コンテンツの半分だけ位置を戻して上下左右中央に配置 */ } .btns { text-align: right; /* 要素を右寄せにする */ } .btns .ok { /* okボタンの装飾を変えるなら書く */ } script.js function check(){ $("#overflow").show(); } function cansel(){ $("#overflow").hide(); // 確認ボックスを消す } function next(){ $("#overflow").hide(); // ok後の処理を書く } 結果 解説 標準で出すことのできるalert()やconfirm()は表示位置を変えることができません。 なので、新しくボックスを作り、ボタンを並べてそれぞれ個別に処理を書こうという発想です。 まとめ 今回装飾は最低限にしていますので、自由に装飾してください。 もちろんアラートのボックスを上下中央にしなくても好きな位置に持ってきたり、出し方を工夫したりしてもいいかなと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
javascriptのalert等は表示位置を変えることができないので1からオリジナルで作ります。 ボタンを押した後の処理は書いてませんので利用目的に合わせて改良してお使いください。
※jQueryをちょっとだけ使ってます。jQueryって何？という方はこちら。
<div id="overflow"> <div class="conf"> <p>本当に決定してもいいですか？</p> <div class="btns"><input type="button" value="キャンセル" onClick="cansel();"> <input type="button" value="オッケー" class="ok" onClick="next();"></div> </div> </div> <p>これでいいですか？</p> <input type="button" value="決定" onClick="check();">
#overflow { width: 100vw; /* 横幅を画面いっぱいにする */ height: 100vh; /* 高さを画面いっぱいにする */ background-color: rgba(0,0,0,0.2); /* 背景を半透明の黒い背景にする */ position: absolute; /* 相対位置に指定 */ z-index: 10; /* ウィンドウの全面に表示 */ display: none; /* 初期は非表示 */ } #overflow .conf { background: #FFF; /* 背景を白色に指定 */ padding: 20px; /* 余白を20pxに指定 */ position: absolute; /* 装置位置に指定 */ top: 50%; /* 上から50%の位置に配置 */ left: 50%; /* 左から50%の位置に配置 */ transform: translate(-50%,-50%); /* コンテンツの半分だけ位置を戻して上下左右中央に配置 */ } .btns { text-align: right; /* 要素を右寄せにする */ } .btns .ok { /* okボタンの装飾を変えるなら書く */ }
function check(){ $("#overflow").show(); } function cansel(){ $("#overflow").hide(); // 確認ボックスを消す } function next(){ $("#overflow").hide(); // ok後の処理を書く }
結果
標準で出すことのできるalert()やconfirm()は表示位置を変えることができません。 なので、新しくボックスを作り、ボタンを並べてそれぞれ個別に処理を書こうという発想です。
alert()
confirm()
今回装飾は最低限にしていますので、自由に装飾してください。 もちろんアラートのボックスを上下中央にしなくても好きな位置に持ってきたり、出し方を工夫したりしてもいいかなと思います。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
classNameにクラス名を割り当ててスタイリングしたコンポーネントを実装すると、 単純に実装しただけではコンポーネントの呼び出し時にclassName属性を新たに追加(注)した際に元々のスタイリングが全て消えてしまう。 注: これをやるには元々のHTMLタグが持つpropsを受け継がせる必要がある 解決策は、classNameの指定部分にクラス名を挿入可能にすればよい。 App.css .text-red { color: red; } .text-bold { font-weight: bold; } .text-big { font-size: 24px; } App.tsx import "./App.css"; import classnames from "classnames"; type RedTextProps = { children: React.ReactNode; className?: string }; function RedText({ children, className }: RedTextProps) { return <p className={classnames("text-red", className)}>{children}</p>; } function App() { return ( <div> {/* 赤色 */} <RedText>Lorem ipsum dolor sit amet.</RedText> {/* 赤色、太字 */} <RedText className="text-bold">Lorem ipsum dolor sit amet.</RedText> {/* 赤色、太字、サイズ大 */} <RedText className={classnames("text-bold", "text-big")}>Lorem ipsum dolor sit amet.</RedText> </div> ); } export default App;
classNameにクラス名を割り当ててスタイリングしたコンポーネントを実装すると、 単純に実装しただけではコンポーネントの呼び出し時にclassName属性を新たに追加(注)した際に元々のスタイリングが全て消えてしまう。
注: これをやるには元々のHTMLタグが持つpropsを受け継がせる必要がある
解決策は、classNameの指定部分にクラス名を挿入可能にすればよい。
.text-red { color: red; } .text-bold { font-weight: bold; } .text-big { font-size: 24px; }
import "./App.css"; import classnames from "classnames"; type RedTextProps = { children: React.ReactNode; className?: string }; function RedText({ children, className }: RedTextProps) { return <p className={classnames("text-red", className)}>{children}</p>; } function App() { return ( <div> {/* 赤色 */} <RedText>Lorem ipsum dolor sit amet.</RedText> {/* 赤色、太字 */} <RedText className="text-bold">Lorem ipsum dolor sit amet.</RedText> {/* 赤色、太字、サイズ大 */} <RedText className={classnames("text-bold", "text-big")}>Lorem ipsum dolor sit amet.</RedText> </div> ); } export default App;
