Hello,world!

Hello,World!
というわけでJavascriptの世界へようこそ!

とまともにちょっと初期からやり直してみました。
と言っても本を読みながら「こういうのがあるんだな〜」程度の知識なのですが

ちょっとお絵描きしてみました。

教材でイベントハンドラでonMouseDownを使っていたので
もう手が自然に動いてたよね
しかも本の指定のままやったらgreenだったから描くものは一つしかなかったよね

そして冒頭のhelloworldからのこれ

ど う し て こ う な っ た 

正直クリック回数や色を変えるメニューを作ってみるなども出来るんだとは思うのですが
自分に出来るのはこれが限界でした。

色変えと大きさを変えてブラウザのコンソールから上書きしただけという。
いや、これ思いついただけでもわたし天才じゃね!?って気分で描いてた。描いてたのがこれ。いつものアレ。

正直「マウスクリックしてから動かしているときのみ」反応するイベントハンドラを探しているんですけどそういうのはないんですかね?
質問したところでコメントフォームも何もないのですごい孤独なブログなんですけど
(昨日コメントフォームつけようとして断念しました。他サービスに登録の時点でわかんなかった)

もしかしてそういうイベントはなくてクリックしてから反応をさせてonMouseMoveからマウスを離したとき終了、というjavascriptを書かないといけないんですかね…?
そんな難しいのは今のわたしには無理です…

勇敢なる力イベやってこよ…

Webデザイン技能検定

ウェブデザイン技能検定の3級というものを受けました。
受かりました!
3級とはいえ自分の中では聞いたこともない単語のオンパレードで
前回書いたようにパソコン爆発する前提のような問題があったり
CSSなどデザインに関する問題は1問出ればいい方だったり
(実技は別にあります)
どちらかというとインターネットと通信の仕組みの知識がないと無理って感じの試験でした…
ちなみにわたしには理解出来なかったので丸暗記でいきました。
こんなんでいきなり「技能士の名称を称することを認める」とか言われたら
えっまじで?こんなんでいいの?ってなっちゃうんですけども

まあ知らない単語だらけで本当に苦労しましたが何とか取れました。
2週間勉強すれば取れる!みたいに書いてるところもあり
過去問をひたすらやり解らないところだけ調べる、という方法でしたが
どちらかというと範囲が広すぎるのでざっくりでも全範囲頭に入れておかないと厳しいんじゃないかな、というのがわたしの感想です。

2級?普通に無理だよ

ということでしばらくはJavaScriptに専念かな…と思いつつ
こんな大層なもんもろてしもたらその名に恥じないよう知識をつけなければ…と焦りますね

それにしても無資格学歴職歴無しニートから一気に国家検定持ちになってしまいました。やっほい。



そんなこんなで関係ない夏ネイル。
イルカが完全に埋まってしまいました

そして突然のガシャ運…
使ってない垢では出る、はい、よくあることですね…。

そしてそんなに使いたいキャラでもないという…。
本垢ではサンクレッドの武器が出てるので限界突破しちゃおうか迷うところ…
でも思い入れのあるキャラがもっと出て欲しいなぁ…

クイナとかクイナとかクイナとかリュックとかきたら多分全部つぎ込むことになりそうなので淡い期待を抱いてジェムを貯めよう…
嘘です貯められません…

デレステは愛海が出ないからスカチケまでお休み中です。
一応ミリシタもDLしたけどスライドがわかりにくいし
曲もキャラもよくわかんないのでやってないです。

JavaScriptでフォトギャラリー

photogalleryが完成しました。

以前記事を書いてからいそいそJavaScriptの勉強をはじめていたのですが
本の丸写し状態から色々いじってページ数を増やしたり装飾したり…
いじったのはほとんどみーとんなんですけど
というかみーとんが作ったと言っても過言ではない

わたしはというと取り敢えずソースが何とか読めるぐらいにはなったので
その段階で公開しようかなと決めてました。
CSSでの装飾は自分でやったというかお借りしたと言いますか。


取り敢えずスマホでも動作確認してみたところきちんと動きました。

きちん・・・と・・・?

アスペクト比一定で撮ることがなかなかないため
いちいち考えて写真選別するのもめんどくさいなーと思って

スマホ用、縦長画面用も作っておきました。

あと写真にキャプションをつけるのが嫌いなので外そうか迷ったんですけど
外すとjavaScriptの部分もだいぶいじることになるのでそのまま…
ちょこちょこキャプション入れてるけど色をいじってないのでほとんど読めません。別にいいよね…

余談ですが先月に資格試験を受けたのですが合格発表が二日後に迫りました。
というか受けたことすらすっかり忘れてたんですけど昨日ふと思い出しました。
受かったところでどうにかなる資格でもないし別に落ちても構わないっちゃ構わないんですけど
次の級を受けることは今の所考えてません…
本当に意味がわかんなかった…
パソコン爆発する前提の設問とか本当に意味がわかんなかった・・・・・・・・・・・・・・

そして試験内容も綺麗さっぱり忘れました。一夜漬けタイプなので…
いや今回結構かなり頑張った方なんですけど、やっぱり綺麗さっぱり忘れましたね。
だから次の級受けられないんだよ・・・

ところでフォトギャラリー作ったはいいけどhugoでのUPの仕方がわからなくて
かなり久々に自分のメインのサイトをいじりました。
前回の更新情報から4年も経っている…(4年前も大した更新はしてなくて実質8年ぐらい放置してる)

デザインをいじる気がさらさらないんですけどみーとんに「古臭い」と言われてしまいました…。
コンテンツからして化石化してるサイトに古臭いも何もねえよ!!!!!!

イラストぐらいはいい加減整理しようかなと思ってます…。
写真は…どうしよう(何でフォトギャラリー作ったんだよ)

hugoに404.htmlを作る

今更ですがgalleryサイト、ゲームサイトの方に404ページを作りました。

404、つまりページが見付からない(存在しない)ってことですね

https://gallery.btnb.jp/hoge

こんな感じになってます。

さて作り方ですが
人様のサイトとhugoの公式を読んで自分なりにやってみたのですが
みーとん曰くlayout直下だとマークダウンの書式は使えないとのことで htmlにて直接書きました。

・gameディレクトリ、galleryディレクトリに一つずつ置くことは不可能
・layout直下にマークダウンは使えない

上記を踏まえて出来たのがこれ

`<!DOCTYPE html> <html lang="ja">

<head> <meta charset="utf-8"> <meta name="generator" content="Hugo 0.15-DEV" /> <title>404 Page not found</title> <link rel="stylesheet" href="https://gallery.btnb.jp/game/css/style.css"> <script src="https://gallery.btnb.jp/game/js/jquery-1.11.2.min.js"></script> <script src="https://gallery.btnb.jp/game/js/typing.js"></script> </head>

<body> <div> <h2>404 Not Found</h2> <div class="type-js headline"> <p class="text-js">へんじがない。 ただの しかばねの ようだ。</p> </div> </body>

</html>

gameディレクトリにCSSを置いているのでフルパスでgameディレクトリからCSSとjsを読み込んでいます。
どなたかの参考になれば幸いです。

作りました〜って記事書きながらこのブログではまだ作ってないんですけど
出来たらデザインしたいなと思ってこちらではしばらく時間がかかりそうです。

血祭り週間が終わればせめて…(布団から動けません)

ちらほらCSSと合わせてJavascriptも勉強していくという話が…
まだ自分で1から組めないのにね☆

Hugoのサイトのサブディレクトリに別のHugoのサイトを作る

タイトル的に合ってるかはわかりませんが、イメージとしてはそんな感じです。
hugoのドメイン内で新しいサイトを作る
取り敢えず新しいサイトデザインしたいけどドメインとったりするのめんどくさい!っていう感じですね

https://gallery.btnb.jp/game/

今回はgalleryサイトの中に更にディレクトリとindexを置いてサイト内で新しいサイトを作る、というイメージでやってみました。
とにかく今は色んなデザインなどを触って少しでも知識をつけられたらいいなあという感じなんですが
そうやって勉強やお遊びでサイト作るためにドメインを作っていられないので…
昨日書いた通り従来のHTML→FTPなら簡単に出来たことなのですが、hugoの場合そういうわけにもいかず。

今回みーとんの案でやってみたことをざっくり書いてみたいと思います。

ローカルで新しいhugoサイトを作る
package.jsonでdeploy先のURLをgalleryの下のディレクトリに来るように書き換える
(今回の場合”s3://gallery.btnb.jp/game/“になりました。)

ローカルのままだとこれで新しいサイトをどんどん作っていけばいいのですが
いざdeployしてみるとgalletyの方が消えるわ
動画やフォント、CSSはリンクされてないわ(gallerty直下を読み込もうとしている)
結構散々でした。

結局それを解決したのが

全てのファイルをフルパスにする

具体的にどうするのかというと 例えば動画ファイルの場合はショートコードを作って

<div align="center"> <video class="msize" id="video1" src="{{ .Site.BaseURL }}{{.Params.src}}" auto controls> </video> </div>

こんな感じにしました。

{{ .Site.BaseURL }}
を手前につけることでフルパスにしちゃいます。
これでローカルでもURLでも確認出来るようになりました。
{{.Params.src}}が画像や動画(今回は動画)のパスを読み込む部分になります。

それでもどうにもならなかったのがfontファイル…
これは仕方ないのでgameディレクトリとは別にgalleryディレクトリにも置くことで解決しました。

あとはぱっけーじじぇいそんいじったりは怖いのでみーとんに任せたよ…。

hoverでリンク色をカラフルにしたり
(欲を言えばタグ一覧ページにもCSSを適用したいが方法がまだわからない)
メディアクエリ使って携帯端末でも出来るだけ見やすいように頑張ったり
WEBフォント自作してみたり…
お遊びで作った割には結構頑張ったし身につくものも何かしらあったと思う。

今後もこうやってちょこちょこと新しいサイトデザインに挑戦していきたいなあと思ってます。
コンテンツはないけども…www
そしてせっかく化石化から脱出してギャラリーをおされにしたと思ったら突然の化石どころじゃないデザインをし出すわい

iframeって化石化してるけどまだまだ代理がないから使うしかないよね…
javascriptなら出来るって言われたけどまだそこは勉強が手付かずなので勘弁してください!!!!!!!!

あとパンくずリスト作ってみるかなあって思ったらhugoではめっちゃめんどくさそうだった。
カテゴリや階層よりとにかくタグだけで管理してる(好み)わたしとしては結局いらないよなあって(作ってみたかっただけ)
苦労した足跡としてみーとんが自分のブログ出してきてくれたけどやる気は失った(そして本人も今見たら何言ってるかわからないとのこと!!!)!以上!

gameサイトの方はまだまだいじり甲斐ありそうなので色々試してみようと思います。

これ、hugoのブログなのか…?

基本的に全くの初心者がhugoを始めるためのブログとしてやってるつもりなんですけど、自分でも何言ってるかわかんないですね!!!!!!!!

フリーフォントをWEBフォント化

またつまらぬものを作ってしまった…。

作りたい!と思い込んだらもう一直線です。
お遊びサイトのためだけにいちいちドメイン取るのもなあ…
と思ったんですが
従来通りのHTML書いてFTPでアップロードみたいな形式だといくらでもディレクトリとindexが作れたのですが
hugoではなかなかそういうわけにはいきません。
それは次の記事で書くとして。

前回初めてWEBフォントなるものを使用したのですが
今回のサイトを作るにあたってビットマップのWEBフォントはないかなーと探したところ
ライセンスさえクリアすればWEBフォントって自分で作れるんですね。

参考にしたのはこちら
(丸投げ感)

こっちでも使えます。

ブレイブブレイク!

hugoの場合ですが、テーマディレクトリ内のstaticディレクトリに
fontというディレクトリを作ってそこからリンクしています。

コピペしてきたソースが全角だったりして少々苦戦しましたけどw
取り敢えずメインでやりたかったことはWEBフォント化だったので今回の記事はこれにて終了。

ギャラリーサイト改装

→ギャラリーサイト←を改装しました。

WEBフォントなるものを初めて使ってみました。
全てgoogleさんからです。
参考はこちら
あともうすぐ夏なので夏らしい背景に変えました。
ってゆうか早く夏が来て欲しい願望から夏らしい背景に変えました!!!!
夏!!はよ!!!!!

背景をグラデーションでオーバーレイかけられることに気付いたので即刻やってみました。
昨日のFF風boxはそのついでに作ったものでした。
グラデーションの参考はこちら

そしてタイピングアニメーション。
こちらを参考にさせていただきました。
全部拾いもんじゃねーか…

仕事したり勉強したりしてるうちに今の流行りとかも少しずつ入って来て
だいぶ化石化してるデザイン案から今風になってきたかな?と思います。

ナビメニューがなかなか透過出来なくて悩んでたんですけど
rgbじゃなくrgbaで指定するんですね…よくわかった。
ちっさい落とし穴にハマり…ハマるほど悩まずに適当にしてた。
背景のグラデーションが並んでしまったりしてたけどみーとんに秒で直されてしまった…

てゆーか色のセンスが…
また直します…
…やっぱもういいか?

あと16進数をrgbに直してくれる便利なサイトを見つけたので備忘録に貼っておきます。 こちら