白圭望のクリスタル探索BLOG

ProgateでHTML／CSS、JavaScript、jQueryを学習したのでアウトプットしてみる はたして、どこまでできるのでしょうか・・・。今回も習ったことと、ググったりしながらWEBサイトのLP（ランディングページ）を作って見たいと思います。 エディター 今回はマイクロソフト社が無料で提供してくれている VS Code というエディターをダウンロードしてみました。なんかYouTubeのコーディングビデオを見ていて気が付いたのですが、動作がサクサク軽そうだなあ。と単に思ったからであります。Atomとできることはそう変わらなさそうですし、（今のところ）割合として利用している人が多いようですね。 初心者すぎておススメ拡張なんかはよくわからないまま、ネットでおススメされていたものをいくつかインストールしました。 vscode-icons Visual Studio IntelliCode Path Autocomplete for Visual Studio Code IntelliSense for CSS class names in HTML Indent-Rainbow まずはHTMLのテンプレートとPathをつなげる Qiitaでありがたい情報を見つけました。 VS CodeでEmmet使ったらHTML書くの早くなった～！ 　です。 HTMLは最初の宣言やらの決まった‘’おまじない”がありますが、それを　『！』を打つだけで一瞬で書き出してくれたりしました。　Atomでも『hr』を打つと自動でやってくていましたね。 今回はFontAwsomを使おうかどうしようか決めてないので、まだリンクは張っていませんが、とりあえずjQueryを使うのでそちらのリンクをCDNで張りました。といっても、Progateのをコピペしたです。 でここでふと気が付きました。プロゲートのCDNリンクが最新じゃないということに！ 2019年ではjQuery３系が標準らしく、2系はめったに使わないとか…　えー。 色々調べたのですが、おそらく教えてもらった部分は3系でも同じように使える気がするので、とりあえず、CDNを最新版に切り替えて挑戦してみようと思います。 ええと最新版はググったら出てくるので...

Progateをやり始めて一か月、果たして成果は？ こんにちは、プログラミングを独学で学び始め、何とかレベルの低いマークアップがちょっとわかるようになってきたところになります。歳だからかもしれませんが、かなり牛歩スピードでポチポチやっております。 やっていて感じたのですが、プログラミングの世界は想像以上に深いし広い。HTML／CSSを学んだだけで、ルンルンだった私を思いっきり打ちのめしてくれました。 調べれば調べるほど謎が深まる そう、知識もろくについていない状態で、調べれば調べるほどにその深淵にはまり込んでいってしまうのであります。一年前の情報をはたして信頼してもいいのか、特にJavaScriptは2015年に新しいバージョンが出たのだけれど、旧バージョンでの記述もネット上には散見されるのです。 なんとか歯を食いしばって終わらせたProgateのJavaScriptES6コース（最新版）。よし、次はjQueryだなとおもったら、注意書きにES5（旧版）で記述されています。とな。 （まあ、そのままやっても大丈夫でしたが。ES6の方は脳内から消えた。） Twitterで初心者プログラマーたちの情報を得ようとするも・・・ これが思った以上に情報が入ってきにくい、私の使い方もあるかもしれませんが、いくつかこれは有益そうだ！という情報は見つかったものの、プログラマーたちはあまりTwitterに出入りしないものなのかもしれない。 代わりにスクールの案内がバンバンくる。 情報交換しましょうから、スクールはどうするのか？が必ず始まり、今のところ考えていないとお断りすると、パタリと連絡が来なくなる。 特にプログラミング学習の話は何もないに等しい。プロがタダでは何も教えてくれないならわからなくもないが、私と同じような初心者でもそういった話よりは、スクールはどうするばかりで、ちょっと不安になる。 また、初心者向けの集まりに、マルチやねずみ講の魔の手が伸びているというのもネットで見られるので、さらに恐ろしい。 スクールに通った後に、とんでもないブラック企業に叩き込まれてしまう、なんていう情報も転がっている。もうこうなってくるとすべてが怪しい。 わかったのは teratail と Qiita は有効そうだという事くらいですね。ただ初心...

ProgateでHTML／CSSを全クリしたのでとりあえず自分でサイトを作る。ーその１ー まで出来たら、あとはコードをどんどん書いていくだけです。色々デザインをいじってカッコいいものを作りたかったですが、とりあえずはProgateで作ったサイトのコピーみたいなものを作り上げるのでやっとのことでした。 Githubで無料で公開できるよ Progateで公開の仕方が説明されています。 こちら 　ファイルを上げるまでちょっと作業がありますが、無料だし、まあ何とかできます。私はアトムエディターで一つのプロジェクトのフォルダーのなかに、さらにフォルダーを作って、CSS、HTML、IMAGEと分けましたが、それぞれのファイルは一つのフォルダー内で作ったほうがよいです。 ちなみに今回の成果物は、こちらになります。 https://ponsmama.github.io/orange_pom/ 出来なくて悩んだことメモ まず、Stylesheetのコーディングですが、習ったとおりに全然動いてくれない。 Wrapでくるんでコンテイナーにぶち込んでいるのに、別々のはずのブロックがなぜか連動し、Floatであっちへ飛んで行ってしまったり。あーー！ってなった後にProgateの上級編道場にいてじっくりコードを見てみる、というのを繰り返しました。もちろんグーグル神にもかなり聞きました。 しょっぱなから！　CSSが思ったとおりにならない！！！ しょぱなから、text-align:center; も　margin:0 auto;　も全然なにもおこりませんけど？！ と悩みました。そのときはこのコードをぶち込んでみることで解決したです。 *{ box-sizing: border-box }  html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; }  body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; } div{ display:block; }  li { list-style: none; }  a { te...

こんにちは、今回はProgateでHTML／CSSの上級編の道場までをクリアしたので、ちょっと自分で一からサイトのトップページを作って見ようかと思います。四苦八苦しながらですが、制作日誌で勉強がてら記録してみたいと思います。 まずはエディタ（Atom）をセットアップする。 自作サイトをコードから作っていくために、まずは環境構築からですね。いわゆるコードを書くためのエディタは様々あって、Windowsのノートパッドでも書けちゃうらしいのですが、とりあえずProgateで推奨されている”Atom”というソフトをインストールしてみました。 英語のソフトですが日本語に変換できるそうです、がまあ英語でもいいかということで私はそのままにすることに。便利なプラグインも色々あるようですが色がその場で選べるColor-pickerのみインストールしてみました。あとはやってるうちに色々足していけばいいかなあと思いまして（なんかよくわからないだけ） 【超初心者のWebサイト制作】自力でコードを書いていこう！ ２、プロジェクトファイルを作る とりあえず、こんな感じでファイルを作って見ました。 ここでちょっと疑問になったのが画像とindex.htmlの紐づけの方法。Progateじゃ教わってないぞ？ 色々調べてみたのですが、とりあえず画像ファイルがHTMLファイルの中にあるとファイル名の記述のみで画像が反映されるとか、とりあえず今はこのままでいってみようと思います。 「パス」についての理解が必要なようです。 一時間で作るホームページ というサイトが解りやすいと思いましたので参考にどうぞ。 あとは、Atomのプラグインの"autocomplete-path"というパッケージをインストールすといいとか。あとであまりにも困ったらインストールしてみます。 *結局あとからautocomplete-pathはインストールしました。仕組みは理解するべきと思いますが、変なスペルミスとかを防ぐのに大活躍です。使い方は［　’　］（シングルくおテーション）を打ちます、そこからファイル名を入れるとパスを探してくれますよ。 ＊atom-html-previewというパッケージもおすすめです！インストールしたら、右クリック、あるいはCtrl+shift...

こんにちは、結婚して仕事を辞め家でのほほんと過ごしている主婦です。ブログをぼちぼちやってみたり、デジタルアートに手を出してみたり、ワードプレスで自分のウェブサイトを作ってクラッシュしてみたりしながら過ごしております。そんなこんなでふと興味を持ったのがプログラミング。 なんの経験もない主婦がプログラミングなんてできるのでしょうか？ 見つけた！これなら安心して誰でも学べるプログラミング！ プログラミング自体は前から興味はあったのですが、実際何がどうなっているのかがミステリーでした。HTML／CSSはちょっぴり触ったことがあったのですが、JavaとかC+やPythonなどの呪文に聞こえる言語たち。いったい何から学べばいいのかなんかイマイチわからず。とりあえずJavaなのか？JavaとJavaScriptは違うの？同じなの？なんなの？　という状態から抜け出せず・・・。”Glasshopper”というJavaScriptを学べるアプリをやってみたものの早い段階で挫折。 そんななか出会ったのは　 ”Progate” というサイトです。 Progate おすすめの理由 難しい環境設定がいらない、Web上で勉強できる！ 何を勉強すればいいのかわかりやすい”目的別コース” 色々な言語が学べる 実際にコードを打ち込んで勉強できる 説明やキャラがカワイイ ゲーム感覚で進められる 無料コースも充実している ドットインストールも独学者には有名どころですね。３分のビデオ講習なので、ちょっとした空き時間にこちらを利用するのも良いと思います！ 私は、ゲーム感覚でできるProgateがかなり自分に合っていました。基本飽き性なのですが、ゲーム好きが幸いしました。課題をこなすほどにポイントがもらえたりレベルが上がったりすること、かわいいキャラクターが出てきて飽きにくいですね。 ３０代主婦が実際Progateを挑戦してみた感想 一言：面白い！わかる！できる！ です。今現在の私はHTML／CSSの中級編を勉強しています。Lv.87です。 やはり記憶力がだいぶ落ちているのでノートを取りながら、たまにグーグルで調べながらコースを進めています。寝る前のゲームはProgateの携帯アプリに変わりました。ゲーム感覚でスイスイ進められます。 何を勉...

どうもこんにちは、最近iOS版のFF7をプレイし始めました。そのなかで攻略日記をブログに書きたいなあなんて思い、他の攻略サイトなどを見て回っていました。（攻略するためにも見ていた。）そこでふと思ったのですが、サイトに使われてるプレイ画面の画像とかモンスターの画像とかの著作権ってどうなってるのかなあと。 そんなわけで、今回はファイナルファンタジーVIIの著作権についてできる限り調べてまとめてみました。 他人の画像は基本は無断利用できない ブログで画像を使う上での基本中の基本になりますが、人のものを勝手に使ってはいけません。 ブログで利用できる画像は基本自分で撮影あるいは作ったもののみ使用できます。 　えー、めんどくさいという方のために著作権フリーの画像を提供してくれているサイトも沢山あります。有名どころですと いらすとや などのサイトでしょうか。ちなみに私も素人ながらイラストショップを作っているところです。まだまだ発展途上ですけど。 さて、著作権フリーで提供されていない画像はどうするのかというと。 ・許可を取る！ ・出典元を明記した引用として使う ということになります。 引用ってどうしたらいいの？ まあ、簡単にまとめてみますと記事の内容についての補足説明のために画像を使わせてもらうという事なのですが、そのうえで ・利用する画像のサイト元をわかりやすく明記する。 ・カギ括弧などでくくる。 ・引用先のサイトのリンクを張る。 というところでしょうか。そして画像によっては肖像権や、著作者の明記の有無、加工が可能か不可かなど色々気を付けるべき点があります。 INFACT というサイトに詳しく引用の仕方について説明されています。 　 画像の著作者によって独自のポリシーや使用条件があります。サイトに画像の使用などのルールが明記されている場合はそのとおりにしなくてはいけません。 では、スクエアエニックスのサイトへ行って著作権についてどう書かれているか確認してみましょう。 ［SQARE ENIX]FF VIIにも著作物利用許諾条件があります。 FFVIIリメイクの方は許可が必要のようですが、オリジナル版FFVIIの画像については利用条件がありました。ここではサッとまとめだけなので、詳しくは FF VII のサイトの下の方...

　今回のE3２０１９はFFファンの皆さんは狂喜乱舞する内容になりましたね。子供時代に必死にプレイしていたファイナルファンタジーシリーズ。FF7はその中でも革新の嵐で、オープニングに鳥肌を立てて興奮していた記憶があります。ネットフリックスのドラマ『光のお父さん』のように子供時代お父さんと遊んだ記憶がある方も多いのではないでしょうか。 今回はリメイクについての現在公開されている情報から期待を込めて考察していきたいと思います。 ＜2019年6月11日＞E3 2019でスクエアエニックスからの新発表次々と！ 先行予約情報と特典 FF７のリメイク版は2020年3月3日発売予定 ですが、なんとすでに先行予約ができます。セブンネット、スクエアののE-Store,そしてアマゾンから予約可能です。が、これらの予約先に別々の特典が付いてきます。 セブンネットだと限定の野村哲也さん書下ろしのアクリルスタンドに、ゲームで使える召喚マテリアの『コチョコボ 』 、 E-Storeだと限定のスチールブックケースに召喚マテリアの『サボテンダー』 そして アマゾンからは『オリジナルダイナミックテーマ』 アマゾンのオリジナルダイナミックテーマって何ですかね？曲のことかな？ちょっと謎ですね。 　サボテンダーと言えば『ハリセンボン』をしてくれるイメージですね。攻略に役立ちそう。でも、想像するに『コチョコボ』は使用時にハズレとアタリがありそうですね。戦力としては期待できないかもしれないですが、アタリの時破壊力とレア感はたまらなさそうです。皆さんならどちらを選びますか？私はサボテンダーかなあ。コチョコボも捨てがたいけれど・・・。 　コチョコボとサボテンダーはオリジナルには無い種類のマテリアですね。限定とは書かれていないので、ゲーム中に何かしらの方法でこれらのマテリアは手に入れる方法があるということなのでしょう。そして、やはり召喚魔法などマテリアの種類も色々追加や変更がありそうですね。あの『アルティメットエンド』はどうなるのでしょう。 FF8もやっと2019年内にリメイクが発売決定、Switchでもプレイ可能 今回のE3はFF7のリメイクで盛り上がりまくってつい見落としていたのですが、いつまでたってもリメイク版がサッパリ出てこなかった FF８がついにリメイク...