一人ハッカソン「1日でHTML+CSSを覚えて公開しよう」
一昨日でブログも書き納めだったはずなのですが、また余計なことをしたので記事化します。
いい加減ドメインを有効活用しよう です。
Mastodonを閉鎖して早半月。
このまま放置しておいてもしょうがないので、ランガに関係するリンクのページでも作って活用しよう！
なので、
「1日でHTML+CSSを覚えて公開しよう」
をやりました。
以前も言ったように、
・工業高校でC言語をやった
・Mastodonを建てようとして挫折した
この程度の能力でどこまでできるかという問題。
無論HTMLとか怖くてやったことがないので実質初挑戦です。
・情報収集 (9:20～)
無になったMastodonを開いて、「よし！いい加減何とかしよう！」
とスタート。
検索エンジンというものは偉大なもので、あっという間に使えそうなページに到達。
今回はこのページを参考にしました。
・ゼロからはじめるHTML(9:35～)
C言語みたいにメモ帳でいけるやろは、一瞬にして崩れ去りました。
なんかめんどくさいらしい(適当)
なので、言われるがままにテキストエディタの「Sublime Text」を導入。
なんかこういうのどっかで見たなーと思ったらLinuxのコマンドシェルみたいな感じだと気づきました。
以後こんな感じで見ながら書いていく感じに。
やり方としては、基礎的なコードをコピペしながらいろいろ書き加えて行く感じのシステムでした。
最初からコピペできるのは楽でいいですね
コピペしないで手打ちしました。
まずはこの文章をHTMLで書くことに。もう表示しちゃってるのですが。
C言語で言うところのHello world!みたいな地点でしょうか。
ここからヒイヒイ言いながら進んでいきます。
ここでは文字を変えてみようとなっていたので、実際に使う予定としての文章へと変えてみました
Chromeで表示した結果。
とりあえずお前なら404の偽ページでも作れるんじゃね？くらいまではたどり着きました。
純粋にここまで書ければ偽の404ページは作れそうです、懐かしいですね(棒読み)
・リンクと箇条書きを覚える(9:50～)
今回使う用途としてはこの2つが大事です。
まずは箇条書き。
枠の中に枠作ってまた枠作って箇条書きで使う<ul>と<li>で項目を作っていきます。
今回は番号とかは必要ないので、純粋に黒丸になるようにしました。
書き換えるときはliタグの中に要素を書き込む感じなんですね。
項目ができました。
次はリンクの貼り方。
aタグでリンク先URLとリンクテキストの書き方。
ちなみにこれを書いている途中に別タブで開くようにする方を発見したのであとで直しておきます。
通りでこのページから直接飛ぶようになってたわけでした。
1個目の項目にランガの公式サイトを表示することに成功。
liタグ内にaタグのリンク入れるだけでした。
・自力でタグを書き込む(10:00～)
一見調子よさそうですが割とそうでもないです。
ここからはliタグを増やし、ランガちゃんに関係あるページのリンクをaタグで書き込んでいく作業です。
はやまるかわいいですよ。
…そんなことしている場合ではありません、さっさと項目を増やしていきます。
途中書き込んで表示しての繰り返し。
途中途中に改行タグ入ってますがなぜか文字間隔が適切ではない箇所が多発したので、何がどうなってんのかさっぱり分からず。
全消ししてみたりしたのですが、偶然改行タグ見つけて無理やりねじ込みました。(これは後々治りますが)
そんなこんなでここまで到達。
8割方他力でも自力にしてはかなりです。
・CSSも使う(10:20～)
ただの白黒ページではしょうがないので、CSSも使って多少なりともまともなページにして行こうと思います。
の前に、
CSSはどこに書くの？
と。
どうやら3種類ある様子。
今回は参考ページの通りかつ、楽にしたい(学ぶものにあるまじき発言)ので、HTMLファイル内に書き込むようにしました。
このタイミングで行間を調整するコードを見つけたので参考にしました
さらに空白行を挿入するのも発見したのでこちらも導入。
brで連続改行、Mastodonの管理画面でやった記憶があるので無知は怖いねになりました。
下手くそでどうしようもなくて、探していたものだったのでとても助かりました。
これで「line-height」で行間の幅を、
「margin-bottom」で空白行の挿入を、
「backglound」で背景色を変える
の3つを増やすことができました。
結果としてどうなったか。
…いつの時代のホームページを作ってんだ俺は。
なんかいろいろ助けられないものができました。
コードが汚いのはもう勘弁してほしいけれど、出来上がりの結末がこれなので…
ショッキングピンクにして文字色白にしてもいいかもしれませんね！
冗談はさておき、一応完成形までたどり着いたのがこれ。
人に見せられない何かだ。とりあえず2時間でここまで来たのでMastodonを建てようと挫折した時よりは上出来でしょう(個人的感想)
・飯(11:30～13:00)
今年最後に長尾中華そばにまた行きました。
正真正銘長尾食べ収め pic.twitter.com/E2GnzJJbgd
— 年末側溝車輪嵌め (@UA460) December 31, 2018
青森で病気の如くハマってしまったので。
・サーバーを借りよう(13:20～)
家で公開なんぞしたら家がサイバー攻撃に遭うので借りました。
サーバーで思い出したのですが、家にラックサーバーが眠ってました。
忘れてました。
Mastodon立てて失敗した時にAWSを使ってたのですが、
AWSの無料期限がとっくの昔に切れていたのでさくらインターネットへ。
WordPressは未使用(というか使ったことない)ので、一番安いライトプランでこのページの公開を目指します。
初の管理画面へ。
AWSと全く違うのでキョドりました。
ちゃんとしたサポートページもあったのでそこまで苦労はしませんでした。
・インスタンスを潰す(14:00～)
無慈悲ですがドメインを使うので当然です。
潰しました。1年5か月の短い命でした。
・サーバーの設定をする(14:10～)
ここからは公開するために設定やらアップロードをします。
ドメインのネームサーバーを変更し、先ほど作ったHTMLファイルをアップロードして。
いちいち面倒と思うか、こうやって作るのかと思うのか。
ネームサーバーの変更に時間がかかるらしいので今日中に公開することは叶いませんでした。
とりあえず当初の目標、「1日でHTML+CSSを覚えて公開しよう」のうち、
HTML+CSSの書き方は覚えることができたという結果でした。
最初から綺麗なものはできないのは当然なので、これからまたいろいろといじって覚えていくしかないでしょう。
なんというか、Mastodon立てるよりは簡単だった気がしました。
HTMLすらできないでMastodon作ってた私がアホだったのでしょう。
なんか大晦日を無駄使いした気もしないことはないですが、いい勉強はできた気がしました。
それでは明日は仕事です、良いお年を。
年末総まとめ③
今回で終わらせます。
8/3.4 青森・秋田
去年はこの時期に青森にいたので初ねぶたを鑑賞。
今年も見たくなっていきました。平日に見るのが楽です。
翌日はノリで秋田へ。
勿論狙いは新7E、秋田中央は1台のみですが運良く帰ってきました。
8/6 仙台七夕まつり
毎年幾度となく見ていますが今年もWUGの吹き流しが出ているので撮影に。
毎年なのに自分がよく飽きないもんです。
8/12 東京・水戸
WUGファンミの帰りです。またもや新7E記録更新のために水戸経由に。
この時はROCK IN JAPAN FES.の開催日だったため、勝田駅に大量の大型車が来ていました。
これ幸いと無事撮影したのでした。
9/3 名古屋
矢沢永吉のLIVE TOUR参戦のため名古屋に行くも…延期。
で、
撮りたかった名古屋市営の3000系を撮ったりと予定を無理やり詰め込み。
9/4.5 東京・大洗
台風から逃げるようにこだまで東京に。
やることはないので撮り鉄してました。
翌日は帰りながらまたもや水戸経由で大洗へ。
ガルパンバス1号車最後の展示が見たかったので順光になるまで粘りました。
9/15.16 東京
矢沢永吉ツアードーム公演へ。
すごいの一言に尽きました。
翌日はこれまた何もないので東急ワンデーオープンで放浪へ。
そろそろ撮らないとヤバそうだったので7700を撮ってきました。
9/30.10/01 東京
9月は3回東京に行きました。
3回目は隅田川貨物駅のイベントへ。
そんでもってまた台風が攻め込んできたので知り合いの家に転がり込んで台風やべーｗとかやってました
台風一過の翌日、高尾まで行って撮りバス
UA撮ったり。
肝心の方は光線がお亡くなりでお亡くなり。要リベンジです。
10/5.6 青森
今年何回青森行くんだといったところ。
この時はふらいんぐうぃっち7巻発売に合わせて複製原画展をやっていたので、
どうしても見たくなって突発で。
7巻の聖地もちょっと巡礼しました。
10/13.14 青森
2 週 間 連 続 青 森
頭の病気を疑わざるを得ません。
この時もふらいんぐうぃっちを見て回って。
青い森鉄道のお祭りに行きました。
どうやらイベントで目玉だった川崎市営バスの椅子を買って帰ってきました。
11/10 東京
ランガちゃんツアーの前に豊洲市場に行ってみました。
新しくなってもターレは健在でした。
とはいうものの築地に比べて面白みがかなりなかったですね。
というか築地が雑すぎたんですかね。
11/25 青森
こちらも突発青森。
この時はレンタカーしました。
一瞬にしてボルボに惚れてしまいました。
12/8.9 青森・盛岡
今年は8回青森に行きました。アホなのでしょうか。
ストーブ列車に乗って、
するめ食ってました。あのストーブで焼くからでしょうか。
翌日はWUGの盛岡でしたので終わりがけに撮りバス。
北東北といえばジャーニー。
勿論これも。
しかし今年WUGに事つけて新7E撮る旅ばっかりしてませんかね自分。
まあ出かけるのが楽しいのでそれでいいです、
ではまた来年。
年末総まとめ②
続きです。
4/10 宇都宮
新7E旅です。
国鉄バス復刻塗装とか、
とりあえず良いしか言えないような車ばっかりだったのでもう1回くらい行きたいですね。
4/14 郡山
根がオタクなので旧型客車に乗りに行きました。
一応古き良きってわけです。
勿論こっちも。
最近バスコレ化されましたねこの子、いつまで生きてるのか。
5/11 小田原
グリフェス前に出かけようシリーズ。
10年ぶりに箱根まで来ました。
久々に乗りたいですね。
こちらもぬかりなく。
というかこっちが目的。
5/12 溝の口
前日のは保険でした。
この時の本命はこっち。
固定運用外れてないよう祈ってました。来てくれました。
6/8 能代・大館
青森に出かけようのついでに新7E撮影。
去年10月に来た時はいなかったのが増えててうれしい限り。
大館も再チャレンジ成功でした。
このまま青森もいきました。
6/22 気仙沼
ちょっとおでかけ。
大島汽船もあと3か月ですね。25分の船旅も楽しいものです。
WUGの9話に出てきた「五十鈴神社」へ、
実は初めてここに来ました、こんなにもWUG愛があるなんて。
この1週間前に解散が発表されていたからでしょうか。
7/1 福島
懐かしき国鉄色を見てきました。
本当のこの色は見たことはなかったのですが「なるほどなー」くらいでした。
勿論こちらも。記録更新です。
7/29.30 東京
WUG公演に車で行きました。
ベイブリッジの下で愛車を撮れました。
翌日は話題だったアレを撮りに。
東急7700、なんでか話題になってましたね。
ということで8月から12月は今年中に書きます。
Wake Up, Girls! 【伝説のステージ集会】
その日、僕が見た景色はまさにこれでした。
白い、小さなステージに集まるワグナーの人数を見て、私は泣きそうでした。
こんばんわぐ、この記事は
Wake Up, Girls！ Advent Calendar 2018 - Adventar
の25日目の記事です。
去年に引き続きまた最終日担当です。けれども僕が書ける記事は毎回この日でないと書けません。
2013年12月24日のこと。
七人のアイドルで、WUGちゃん達の記念すべきファーストライブが行われた日。
この小さなステージで、あの七人が初めてタチアガレを披露したその日です。
映画の話ですが。
七人のアイドルを見た1年後。
2014年12月24日、僕は「あのステージで去年と同じ時間にタチアガレを流そう」と、友人と思い立って伝説のステージへと赴きました。
伝説のステージ pic.twitter.com/ZuMIfmvwfM
— なとり (@UA460) December 24, 2014
あのときはたった4人で、あのステージで、タチアガレを聴いていました。
その後2015年から去年の17年まで、同じようなことを「伝説のステージ集会」としてやってきました。natorin2398.hateblo.jp
過去4年間の記事は去年の同じ日に書いたこの記事を読んでいただけると幸いです。
今年。
解散が発表されて。
様々な想いがこみ上げてきました。
WUGとしてのステージ集会は今年で最後になるんだなぁとか。
今年やると発表したのは6月16日でした。
もっと後に発表しようと思っていたのですが、もう耐えきれなかったです、
これから約半年。昨日のことです。
半年と書くのは簡単なことです。
けれどもこの半年も様々な出来事だらけでした。
伝説のステージ、勾当台公園野外音楽堂でお待ちしております！！
— なとり (@UA460) December 24, 2018
緑ブレードが目印です！！https://t.co/msBgS9ymsN pic.twitter.com/thAQFGvySI
予想を超えるツイプラの参加人数に恐れおののいた自分は、何を考えたのか5時半から開始してしまうことに。
6時、7時と時間がたつに連れ、ワグナーさんたちがたくさん集まってきてくれました。
いつの間にか続々と集まって来ていただき、
勾当台公園にて（笑） pic.twitter.com/IM4l6DzqR2
— さわっち@仙台光のページェント旅行♪ (@t7s_QoP_WUG) December 24, 2018
勾当台公園7人のアイドル鑑賞組は現在20人くらい！
— VEGALTA GOLD (@vegaltgold12) December 24, 2018
すげー！
勾当台公園いつのまにかワグナー大勢おる
— 深谷 (@ffkkyy) December 24, 2018
I'm at 勾当台公園 in 仙台市, 宮城県 https://t.co/X3XECLBDtD pic.twitter.com/zlD8cs6kMi
— アルティ (@alty_o) December 24, 2018
I'm at 勾当台公園 野外音楽堂 in 仙台市, 宮城県 https://t.co/k2eDIJJbGo pic.twitter.com/3ks93ln4tV
— ｺﾘｶﾙ (@Kal1242) December 24, 2018
雪のちらつく、12/24の勾当台公園。
— おいも (@oimo_otk) December 24, 2018
あのライブ5分前のこの時間。
ななみんが変な顔して寒がってる姿が目に浮かびますね！
毎年訪問してるけど、例年の三倍くらいオタク来てる(笑) pic.twitter.com/s9edmb08t3
4年前4人から40人近くが集まった
— xyzeroヨッシー (@j03pnk0m) December 24, 2018
勾当台公園 pic.twitter.com/OtsMYfEziE
すごい….数えられない！ pic.twitter.com/97Vyv2aBtj
— なとり (@UA460) December 24, 2018
これは現実なのか？と思えるほどのワグナーさん達。
タチアガレを流す前にはなんと34人のワグナーが集まってくれました。
19時45分、
「がんばっぺ！ Wake Up, Girls!」
の掛け声と共に七人がステージに現れます。
始まった… pic.twitter.com/Y4gzIugHU8
— なとり (@UA460) December 24, 2018
Wake Up, Girls！最初のライブ（アニメ劇中）から5年、2018年12月24日の勾当台公園に集ったワグナー達 pic.twitter.com/On0gtaBWY6
— 湖底人 (@koteijing) December 24, 2018
タチアガレを聴きながら、歌う、踊る、コールする、騒ぐ。
空白の小さなステージに七人の少女たちが実際に踊っているような。
そんな光景が浮かんでいました。
最後にみんなで合唱できたのもなんか嬉しかったです。
最近ライブで合唱するの多いですもんね。
今年もこんな5分の、私のひょんなことから始めたものに来ていただきて本当にありがとうございました。
僕がこのステージ集会というものに、なぜほどこだわるのかということ。
私はこのために生きているといっても過言ではないくらいこの1年に1回、たった10分の時間を大事にしています。
何故か。
この日、この時間に「WUG」と「ワグナー」がつながれる唯一の時間だと思っています。
お渡し会とか、ライブとかの「ワグナーさん同士のつながり」とはまったく違うものだと思っているんです。
ここで集うことでワグナーの「TUNAGO」があるんじゃないかって。
例えアニメだとしても、現実ではなくても、2013年12月24日にここでファーストライブをやっていた。
ただそれだけでこんなにも集まることができるなんて。
この場所、この時間、この空間をワグナーの皆で共有できることがすごく大事だと思ってるんです。
たとえ新章からのワグナーでも、私みたいな古参ワグナーだとしても。
そんなものは関係ありません、ここでワグナーが集い、ファーストライブを祝福するというのがとても大事だと思ってます。
この先、Wake Up, Girls!というユニットには解散に向かってもう進んでいるのに。
最後だからってここに来てくれること。
4月からは「ワグナー」という括りが消えようとしているのに。
それでもこのステージでタチアガレを聴けること。
ここに集まることには何かしらの「TUNAGO」があるからだと思います。
いくら綺麗ごと書いても、WUGへの愛があるから集まってくださるんだと思ってます。
本当に毎年毎年、こんなWUGちゃんが来ることのないようなちいさな集会に来ていただいて皆様本当にありがとうございました。
It will not END,Non the "FINAL"
「終わりではない。最後でもない。」
WUGちゃんがファーストライブをやったこの場所を。
この時間を。
ボクらワグナーは永遠に忘れない。
例えWake Up, Girls!が解散しようとも、
例えこの野外音楽堂がなくなっても。
5年前のこの日を、この時間を永遠に語り継ぐ。
これがボクらワグナーの「最後の使命」。
解散したから終わりじゃない、僕はこの時を毎年祝い続けるでしょう。
本当にありがとうございました。
解散発表の日を思い返す「不思議な日」
2019.3.8 FINAL LIVE#WUG_JP pic.twitter.com/y1MNrdCsAK
— Wake Up, Girls！公式 (@wakeupgirls_PR) December 22, 2018
もう飲み会即逃げてきました。
遂に"FINAL LIVE"という最後において最期の言葉が出てきました。
また別の機会、とは思ってたのですが
こうなるとこれを書くしかないと。
約半年前。2018年6月15日。
WUGナイターの余韻冷めやらぬワグナー達に、死刑宣告とも言いかねないメールが届きました。
今もあの時の衝動は忘れられません。
まあそうなるわな
— なとり (@UA460) June 15, 2018
この一言、いまでこそよく冷静でこんなこと書けたな。って思うんですよ。
多分仕事中にメールを見たせいもあったのでしょう。
けど、「いつかは来る」ことでしたし、けれどこんなに早くだとは思ってもいませんでした。
職場だからまだ理性保ってるけど、手の震えとか動悸とか着実に身体に現れてて非常にヤバい
— なとり (@UA460) June 15, 2018
私がメール見てからこんな具合なので、同僚や後輩に心配される始末。
同僚もAKBのオタクだったので推しの卒業とか、そういうので経験していたようですが、なんかアレでした。
そして、このステージ。
小雨の降る中、10人近いワグナーが居ました。
ワグナーって、このステージに自然に集まるんだなーって。
やっぱり皆が知っている場所なんだなーと。
何の話をしていたのかというと、なんてことなかったような記憶があります。
ワグナーどうしで集まる安心感みたいなものが一番だったような気がします。
そして、ここからがワグナーの不思議が起こります。
オタク7名 (@ ガスト 仙台木町通店 in 仙台市, 宮城県) https://t.co/E6cpZ9IcS1
— なとり (@UA460) June 15, 2018
そう、解散発表されたのに、なぜか聖地に飯を食いに行くというもの。
この時にぺらじとか、情報を様々と調べながら夜飯を食べるという不思議なもの。
本当になぜこのガストで飯を食べに行ったのか思い出せません。
これもワグナーらしい、のか。それとも違うのか。
ちなみにこの時、いろいろショックが大きすぎてまともに食えませんでした。
ガストを出たのはいいものの。
また来てしまった… (@ 勾当台公園 野外音楽堂 in 仙台市, 宮城県) https://t.co/sED9hVXEDn
— なとり (@UA460) June 15, 2018
またこの7人のワグナーたちはここに戻ってきてしまいます。
ここで何をしたか。話をする訳でもなく。
2018/06/15
— なとり (@UA460) June 15, 2018
限界を超えた七人のワグナーがタチアガレを聴いて暴れる光景 pic.twitter.com/LZZnga6evM
七人のアイドルを流して。
全員で、
「がんばっぺ！」
タチアガレ！を個人個人思うがままに舞う。
ブレードを振る。振りコピをする。涙声で唄う。
この日を、解散の日にステージで、タチアガレを、ワグナーたちと踊る。
そんな不思議な、解散発表の日の出来事でした。
年末総まとめ①
さて2018年12月も下旬に参ります。
1年早くないですかね。
1年早い気がしたので、早速ですが今年どこに出かけたんだオメーをやります。
1/5 水戸
18期間恒例の水戸に行って新7E撮影旅です。
新7撮るためにこうもあっちこっち行くのでただのバカなんだと思います。
大洗にもいきました。
1/28 青森
極寒の青森に行ったならば、ダルマストーブで暖をとりましょう。
津軽鉄道冬の名物、ストーブ列車です。
ストーブの上で焼いて食べるするめは格別の美味さです。これに酒を足すと完成します。
これはオタク目線ですが、この平成も終わる世の中にこんなヤバい組成が通用する津軽鉄道なんなんでしょうね。
2/7 大阪
Peachが安い！じゃあ大阪に行こう！
的なノリ。
去年なとりん号に移籍してきた出元を撮りに行ったり、
代々阪急にお世話になってるので撮りに行ったり。
ちなみに大阪京都間は阪急しか使いません。
2/19 一関
夜勤明け限界撮りバス。
この時も新7E撮影。
ほんとに出かける理由が新7Eになってるの本末転倒感ありますね。
3/3 青森
2018年2回目の青森、
WUGソロイベ1週目。
ほぼ強行だったので弘前に立ち寄ってバスを撮ってソロイベで暴れて飲んで帰りました。
3/11 福島
ソロイベ2週目。
適当な人間なので福島で撮り鉄してました。
なんか油断してたら残り1編成になってました。近いうちに行かねばですね。
肝心の郡山でもいろいろ撮ったのですがこれはちょっとここに出せないレベルなのでお許しください
来年には何かの形でこんな感じのが出せればと思います。
3/17 大洗、いわき
イオン主催のTUNAGOのチャリティーコンサートのやつです。
だけどアホなので、
大洗行って、戦車突っ込むところみて、
すごい気になってた、JCO臨界事故の展示をみて、
コンサート開演30分前に着きました。
3列目だったので良かったです。
3/18 石巻
ソロイベ3週目。
この時期に石巻に行くとつらいものが多々あります。
もう7年、まだ7年。
乗り越えて生きていかねばなりませんね。
3/24 盛岡
ソロイベ4週目。
新7E撮ってたり。
このカラーめっちゃ気になるので再履修したいですね。
あとは、商店街ぶらついてたら。
昼と夜間違えて死にました。初めてやりました。
めんどくさくなったので次の3か月は次回にします。
年内に間に合うのか。
宅テロ
特に何もないのですが放置するのもなんなのでこのツイートから見ていてください。
また公衆電話が送られてきました pic.twitter.com/U2Mxcz40am
— ばんちゃお@3日目 西え37-b (@Itabashi_I17) November 21, 2018
公衆電話の同人書いてたので宅テロしました。1年ぶりくらいです。
ちなみに購入価格は狂気の「100円」
送料はその12倍ほどかかりました。
何かしらで有効活用していただきたいですね！！！！！！！！！
以上です
