QiitaQiitaの最新情報を7時、12時、19時にTwitterでお届けします。HTMLPythonJavaScriptRailsRubyAWSPHPdockerJavavue.jsSwiftAndroidiOSC#UnityLinuxNode.jslaravelGoCSSGitHTMLReactMacMySQLC++TensorFlowDeepLearningKotlinSQL新人プログラマ応援202001172020/02/282020/02/272020/02/262020/02/252020/02/242020/02/232020/02/222020/02/212020/02/202020/02/1920200117のHTMLに関する記事は7件です。投稿日:2020-01-17T23:26:39+09:00反復で復習html(haml)の機能hamlで今日までで学んだこと以下、htmlhamlの順で書き換えをどんどん書く。class="class_value1"></span>.span.class_value1fontAwesomeからアイコンを取得したい場合。Yahoohamlはインデントがとても大事。学んだらこれからも追記する予定。Include)を利用して、画面の表示をそこそこディープに制御する必要があった。その際、後方参照を用いた手法に難儀した話である。枯れた技術かもしれないが、目をつむってほしい。IncludesNoExec後方参照という言葉について正直はっきり理解できていないが、ここでは正規表現等を用いて条件マッチした際、特定の箇所を抜くときに利用する特殊変数(\$1、$2...)のことを指す。$1がうまく機能しない?さて、ハマった記述は以下の形である。-->期待する$1の返却値はクエリストリング内のage=に記載される数値だが、これで変数ageをechoすると(none)が返される。Apacheの公式ドキュメントにサンプルとしてほぼ同一の記載があるのに、だ。$0にはなにがある?上記コードの\$1を\$0にしechoすると、age=数値が表示される。後方参照が利用できないというわけではなさそうだ。以下の記述であれば、期待する値を取得できることが分かった。-->http://~~~/?age=123123読解してみると、If文に合致する箇所は数値の部分であり、\$0は条件合致した内容をすべて表示するため、これで数値箇所のみを取り出せることが分かった。なるか(考察)\$1以降の後方参照は、If文と同列でないと取り扱えないようである。※濁した書き方なのは、正式な仕様がどこにも見つからないからだ。調査にだいぶ時間がかかったのは、日本語のドキュメントで本問題を取り扱ったものが見当たらなかったからである。似たような質問が散見された)何らかの事由で、SSIを利用し条件マッチによる制御を行う必要がある諸兄の一助になれば幸いである。補足Apache2.2では、If文と同列でなくとも後方参照は動作するようである。日本語のナレッジも少ない為、ディープに利用している諸兄は是非発信していって欲しい。TweetQiitaで続きを読む投稿日:2020-01-17T20:55:33+09:00HTMLマイテンプレート自分用です。<title>マイテンプレート</title></head><body></body></html>TweetQiitaで続きを読む投稿日:2020-01-17T17:41:48+09:00M5StickCのディスプレイに現在の天気を表示する。はじめにobnizOSを搭載したM5StickCのディスプレイに現在の天気を表示したいと思います。HTMLとJavaScriptしか使わない簡単なコードなので、プログラミング初心者にも優しくなっています。天気を取得するにはOpenWeatherMapという無料のAPIを使用します。OpenWeatherMapにサインアップするOpenWeatherMapにアクセスし、サインアップをしてください。その後、サインアップ完了のメールが届きます。Keyを控えておいてください。Keysというページからも確認できます。プログラムを書く最終プログラムは以下になります。m5stickc.jsをそれぞれ読み込みます。obniz.jsを読み込んだ後に、m5stickc.jsを読み込むようにしてください。src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>次に、M5StickCのインスタンスを作成します。OBNIZ_ID_HEREにはあなたのobniz_idを入れてください。M5StickC('OBNIZ_ID_HERE');このコードではディスプレイの初期化処理をしています。m5.m5display.onWait();次に、URLを指定します。baseURLはこのままで大丈夫です。areaは「Tokyo,jp」の部分に調べたい都市の名前を入れてください。今回は東京の天気を取得します。Keyを入力してください。"&APPID=APPID_HERE";以下のコードでは、APIが返す天気の一覧とそれに対応する日本語を配列に格納しています。本当はもう少し天気の種類は多いのですが、頻度が少ないので割愛しています。["くもり","あめ","はれ","ゆき","きりさめ","かみなり"];その後、AjaxでHTTP通信を行なっています。戻り値のresponse.weather[0].mainに天気が格納されているので変数weatherに代入します。戻り値は英語なので日本語への変換を以下のコードで行います。}}今回はcanvasを利用して文字を表示します。canvasを使用することで文字を横向きに表示することが可能です。ctx.translate()とctx.rotate()で文字を90度回転させています。m5.m5display.draw()の引数にはcanvasオブジェクトのみ指定できます。M5StickCを電源に繋ぐ電源が入ってもディスプレイには何も表示されません。起動したのかわかりづらいですが、電源ボタンを何度も押さないようにしましょう。上手くいくと、このように現在の天気が表示されます。consoleからサーバレスイベントを使用すれば、毎日朝8時に天気を自動で取得して表示したり、30分毎に表示したりすることが可能です。アプリやWebで天気を調べる必要もなくなるので是非作ってみてはいかがでしょうか。最後まで読んでいただきありがとうございました。TweetQiitaで続きを読む投稿日:2020-01-17T11:33:10+09:00materializeを使ったformのselectタグで、iOS13だと正しく選択できないmaterializeとは?Googleが作ったWeb用のフロントエンドフレームワークです。レスポンシブデザインに対応していて、BootStrapみたいな感じで使えるので使いやすいです。何よりいいのが、Bootstrapみたいに使えるのにBootstrapっぽくないので「あ、こいつフロントエンドはお手軽に済ましたな!」みたいに思われにくく、作り込んだ感が出ますiconも豊富でカラーバリエーションも多いので、作り込まれたサイト感が出しやすいです。フラットなデザインなので、UnDrawのイメージともなじみやすくよきです。最近流行りの感じのサイトをお手軽に作ることができます。https://materializecss.com/Bootstrapから抜け出して次に行きたい!という人、ぜひmaterializeCSSを使いましょう。日本語の情報がまだ少ないっぽいので、もっとやれるひとを増やしていきたいのです。問題の詳細さて、そんなすばらしいmaterializeですが、ちょっと不具合があったのです。formのselectはおしゃれで使いやすいんですが、iOS13では正しく選択できません。(正確にはiOS13のChromeで正しく動きませんでした、Safariはみていません)materializeのselectタグは、JavaScriptで動かしているみたいなんですが、それに不具合があったようです。githubのisueに問題が報告されています。「じゃあどうすりゃいいんだよ!」ってなるとおもいますが、こちらの不具合はすでに修正されています。リリースはされていないので、githubからソースをダウンロードして、js/select.jsだけを追加で読み込んでください。手順materializeCSSのソースを一式落とす。https://github.com/Dogfalo/materialize自分のプロジェクトの所定の場所に、js/selec.jsを移す。自分のプロジェクトで、materializeCSSを読み込んだあとに、select.jsを読み込む。'user/js/user.js'%}"></script>確認iOS13で試してみる。選べる!かんぺき!おわりにたぶん次のリリースで修正されるとは思いますが、それまでは悩む人も多そうなので記事にしました。繰り返しになりますがmaterializeCSSを使おう!そして日本語情報を増やしていきましょう!TweetQiitaで続きを読む投稿日:2020-01-17T08:59:31+09:00ゲーム2を作ってみたタイトルはyui2となっています。https://syui.cf/imgame2まずロゴを作りました。数字の部分、最初はフォントを使おうと思ったんですが、めんどくさいですしね、でもしっくりこなかったので、自分で作る羽目になりました、2です。今回もアイテムから背景、キャラクター、シナリオなどを設計しました。モンスターボックスというアイテムが登場するのですが、以下のようなデザインから構成されています。なんとなく線を引いたり、消したり、塗りつぶしてみたり。シナリオに関しては、最初のシリーズで謎だった部分の伏線がいくつか回収されていると思います。イラストで描いている背景、アイテム、キャラクターは方向性がそれぞれに決まっているのでやりやすいです。やらないこととやることを決めていて、やらないことはやりません。それは面白くないことだったり、めんどくさいことだったり、やたら時間がかかることだったり。シナリオに関しては、やはり非公開で書いていた小説が原案になっています。シリーズ1では暗くなってしまうので、バッサリと切り捨てた部分を少し拾いました。キャラクターに関しては、キョウスケ、ポンタ、オクトカットはゲームからの参加で、それによって原案キャラも若干影響を受けていると思います。ここから少しキャラクターに関する話をします。yuiに出てくるキャラで私はどれに当てはまるのかってよく聞かれるんですが...うそですきかれたことありません!で、自分がどのキャラに当たるかと言うとそりゃもちろん、アイですよ!...という冗談は置いといて、私はおそらく、誰でもあって、誰でもないのだと思います。私は以前、こんなコメントを見たことがあって、作者が自分のキャラのセリフにはっとさせられたという話に「作者は自分の思いをキャラAに語らせていて感動的」とコメントがついていました。これですね、大半の人がコメントと同じような意見を持つと思うんですけど、私が思ったのはおそらくそうではないなと。作者が作ったキャラでも、あいつらは勝手に動いて勝手にしゃべるので、特に作者がこうしゃべらせているみたいなことって少ないです。作者は単にキャラが勝手に喋ったそれをですね、メモしたり、記録したりですね、するだけですから、おそらく、本当に自分が作ったキャラのセリフにはっとさせられたんだろうなーって思ったんです。一方で、そうは言っても作者が作ってんでしょと言われると、確かにそうで、それはやはり、どこかにあるからだと思うんです。私は、どのキャラでもないし、どのキャラでもあるなあと今の所はそう思ってたり。話を変えて、次はモンスターの話です。(本作ではまだ未登場)今回は、モンスターが登場しますが、モンスターを作るの結構大変でした。アイテムの方向性でデザインするのか、キャラクターの方向性でデザインするのかで迷いました。その中間をとって、基本は四角や三角の図形で構成するものの、やはり躍動的に表現する部分も可という方向で行くことにしました。各々の部品もシンプルにすることを心がけ、あまり複雑にしてしまうと、あとで描くの大変ですからね...。あと、配色ですが、私は1キャラ、1フィールド、1アイテムにつき3,4色と決めているところがありますので、モンスターも同じ。それでも配色は、難しかったし、悩みます。鳥なら鳥、ネコならネコ、ドラゴンならドラゴンで、一番に思いつく色ってあるじゃないですか。私の場合、それを基本色にしました。最後にキャラクター紹介ページを作りました。https://syui.cf/gamechara/これは、漫画とか読む人はわかると思うんですが、冒頭にありますよね。私は全く見ないんですけど、というかゲームも説明書すら読まなかったり...でも作る側からすると、やっぱり「わかりにくいかな、こいつ誰ってなったりしない、途中から入って大丈夫?」みたいなことをちょっとだけ気にします...うそ、すごく気にします。ゲーム作るのとか、面倒でしたけど、でも、面白かったですよ、楽しかった。次はどんなお話にしましょうか。TweetQiitaで続きを読む投稿日:2020-01-17T00:05:33+09:00あえてseleniumを使わずにフォームに入力してみるはじめに「あえて」というほどでもないのですが、Pythonでフォームの編集を調べているとseleniumが良く出てくるのでRequests+BeautifulSoupで実装してみました。'checkbox']のいずれかであることがソースから判明したため、ほとんど手打ちする必要なく取得できました。取得もれである'user[desctiption]]'を追加するついでに編集すればpost用データの完成です。email公開のチェックボックスがデフォルトでチェック済みになっていたため0に修正しています。データの作成ができたらログイン時のセッションを使ってPostすれば完成です。前回作成したプログラムに上で記載したedit_profile()を追加すればプログラムの完成です。[200]が返ってくれば成功です。