こんにちは。
前回に引き続きましてJavaScriptさわってみる企画番外編、外部ファイルを読み込んでブログ上でプログラムを動かす！です。
Githubというところのホスティングサービスを使ってそこにJavaScriptファイルを保存し、それをこのブログで実行しようという試みです。
が、前回はアカウント登録だけで大苦戦、ファイルの読み込みが上手くいかずにノックアウトされましたが戻って参りました。
ということは そう、大リベンジ回です。
それでは手順を超簡単に説明します！
参考にしたサイト↓
1.アカウント作成
まずはアカウント作成。私は前回の記事の通り大苦戦しましたがメールアドレスを慎重に入力したら問題なし！ ホームページに入力欄がありますので入力してsign upボタンをクリック。
いろいろ設定みたいのは全部デフォルト設定で大丈夫です。free(無料)とpro(有料)とありますがfreeでOK。入力が必要なのはuser nameとpasswordくらいですね。
設定が終わると入力したアドレス宛にメールが届きますのでそのメール内にあるVerify email address ボタンをクリックしたら登録完了！
2.レポジトリ作成
次にレポジトリというものを作成します。保管場所って意味らしいですけどフォルダを作るような感覚でいいと思います。
サインインしたとき画面にstart a new project と書かれたボタンが表示されているのでそれをクリック。
Repository nameの入力欄が出るので○○.github.io と入力します(○○にアカウント名)。自由に決められそうですけど参考にしたサイトではすべて "アカウント名.github.io" とされていたので素直にそのようにします。publicとprivate(公開/非公開)が選択できるので”public”が選択されていることを確認。他も触らずそのままで良いです。
Create repository ボタンを押したらレポジトリが作成され、レポジトリの画面に変わります。
レポジトリの画面で"Stettings"→"Pages"と移動するとURLが確認できます。
先程設定したURLで準備が整ったと表示されており、この状態でファイルのアップロードやダウンロードはできるようになっています。
しかしこのアドレスにアクセスしても404のエラーが表示されます。
アドレスが用意されてもページが存在しないからでしょう。ファイルのアップロード/ダウンロードはアドレスが異なるということですね。
しかし外部から直に保管したファイルを参照する場合は設定したアドレスを辿るのでページを置いておく必要があるっぽいです。前回はコレができていなかった(;´･ω･)
3.Pageの作成(index.html)のアップロード
レポジトリに"index.html"という名前のファイルを置くことでそれがページになりますのでとりあえす作って置いておきます。htmlファイルの作成はテキストファイルを作って拡張子をhtmlに変えるだけ。中身は全く何も書かないとアップロードできないため適当に何か書いておきます。
ファイルのアップロードはレポジトリ画面の"Code"→”Add file”→"Upload files"→"choose your files"からファイルを選択して"commit changes"をクリック。
反映されるのに数分程度かかるようですがこれで先程のURLにアクセスできるようになります。
先ほどURLを確認した手順でもう一度確認すると”published”に変わっています。
4. jsファイルのアップロード
次に外部から動かすjsファイルを同様の手順でアップロードします。
これで外部から"https://設定したアドレス/ファイル名"で参照できるようになっています。
5.外部から参照する。
参照元コードの描き方はこう↓
<script src = "参照アドレス"></script>
これだけ。しかもこれ、はてなブログでは見たままモードのHTML編集で使えるんです！ 直接コードを書く場合はMark downモードにしないといけなくて普段見たままモードを使ってる場合はちょっと煩わしいんですよね。
私はJavaScript以外の部分を見たままモードで書いて、そのhtmlコードをMarkdownモードの下書きにコピペしてました。それをやらなくていいということ！アップロードの手間のほうが少ない気がする！
テスト用に文字を表示するっていうだけのjsファイルを保管したのでアクセスしてみます↓
なんのこっちゃ。と思うかもしれませんがJavaScript テスト～ っていう文章が上に表示されていたら成功です。(これのために何時間費やしたことか…)
これができるってことは今までのJavaScript回のコードも動くってことです(たぶん)。
使い回したいコードがある場合はかなり便利そうですね(・∀・)
私がこの先その域に到達できるかはわかりませんがこういうことができると知っておくだけでも意味があったと思います。
以上、外部保存したjsファイルを動かす方法でした。
初心者の戯言
ところでJavaScriptが動くってことは当然cssの書き換えなんかができるわけで、そうするとページ毎のデザインとか自在な気がするんですけどどうなんですかねぇ。
そもそもcssをページ毎に書けば可能なことか？ いつかそのへんも気が向いたら探ってみるかも知れません。
何言ってるんだコイツ…。と思った方は初心者の戯言なのでスルーしてください。
らくがき
ナンチャッテ スタイリッシュ アリサ。
スタイリッシュじゃないほうと比較。
この立ち絵描いてからもう１年(と１か月)経ったんですね(;´Д｀) たしか初めて肌に濃淡を取り入れてみた絵でした。今回の絵では主に髪の線の数と見よう見まねの太線画法(2/23記事 参照)が変わってるところです。普通に色塗ったら当時より工程が増えてるのでもうちょっと違うはずだと思うんですけどね…。
あと瞳(虹彩)の淵がちょっと気になるようになって手を施してみることに。今まで線画そのままの線だったのですが、ほんのちょっと色付けたり内側をぼかしたり。結構変わった気がしますが黒で太く縁取りしてる絵もよく見ますね。どうなんだろ…。
まぁ自分の場合はそんなことの前に基礎的な線画力か(;´Д｀)
ランキング参加中です。下のバナーをクリックして頂けるとやる気値が増幅します!！
