未経験・文系アナログ女のプログラミング挑戦記!

未経験・文系アナログ女が、最小限のお金でプログラミングに挑戦します!

ブログ反省会!~PVを求めて~(後編)

こんにちわ。花月夜です。

昨日の続き、このブログを改善しようというのが

今回もテーマです。

そもそもこの記事自体見られてない……とかは

置いておいて、勝手に話を進めることにします!

 

 

改善策

プログラミング学習以外の記事も充実させる

 はてなブログの自称初心者の方がプログラミングについての

記事を書いているブログで、実際に皆さんが、どの程度

アウトプットしているのか調べ、以下のことが分かりました。

 

・アウトプットは、①本や講座の紹介、感想、②学んだ内容を

 図付きで詳述、の大きく2つに分けられる。

・①の場合、ライフスタイルなど他のジャンルに関する記事も

 充実している。

・②の場合、セミプロが書いていることが多い。

・②の場合、タイトルやブログの説明からおそらく学習の

 アウトプットのためのブログらしいが、

 非公開や限定公開であるブログが多い。

 

 実際、②タイプで公開しているブログを書いているのは

自称初心者ですが、実際はセミプロの方が多い印象でした。

IT企業で働いている新入社員が働いている過程で

学んだことを書いてくれている場合などです。

 

 ガチで初心者の方は①タイプか、学習内容をブログに

書いているけれど限定公開もしくは非公開のようでした。

 

 本の要約や丁寧すぎる説明は著作権違反になりうるので、

詳細な学習メモは公開しにくいのかもしれません。

それに加えて詳細な記述は、記事の作成に時間が

かかりすぎてしまうので、本や講座の紹介、その他の記事

に重点を置く人が多いのかもしれませんね。

アフィリエイト的にも、そっちの方が……

いえ、なんでもないです。

 

皆が楽しく読めるプログラミング記事を作成

 プログラミング記事を書く場合には、プログラミングに

興味のない閲覧者も、関心をもって読むことができるテーマで

記事を作成します。はてなブログを活用する方法などが、

いいかなと思います。

 

記事を量産する

 記事を量産して、どんな記事が閲覧者の関心を引くのかを

観察します。プログラミング以外の記事もこれから増やしていき、

試していきたいと思います。

 

他人様のブログを勉強&交流の仕方を学ぶ

 普通に面白いブログを書いている人が多いので、記事の

内容や、どうして面白いと感じるのか考えます。

SEOTwitter連携についても、要勉強。

 

補足

……これ、失礼なこと言っていたらすみません。

炎上する可能性すらない弱小ブログだからこそできる技と

生暖かい目で見守っていただけるとありがたいです。!

 

ブログ反省会!~PVを求めて~(前編)

こんにちわ。花月夜です。

いきなりですが、残念なお知らせです。

このブログも初めて2週間が経過しようとしている

のですが……需要があまりない……らしいことが

発覚しました!

 

だから今見ているあなたは、とても貴重な存在です!

ありがとうございます! 最大級の感謝をささげます!

 

という訳で、このブログを改善しようというのが

今回のテーマです。このままでは独り言になってしまう……。

「なんだ、お前の個人的事情か……付き合いきれねえ」

と思った人、ちょっと待って!

 

はてなブログの分析もしているから、もしあなたが

はてなブロガーだったら、お役に立てるかも!

長いので2つに分けますが、よろしくお願いします!

 

当ブログの記事の内容と需要

  

当ブログの内容

ブログ、プログラミングともに初心者の私が、

独学で学んだことを記載。

現在はHTMLについて記事を投稿中。

 

総記事数:7記事。(この記事を含まない)

よく読まれている記事:①ブログトップ、②挨拶、ブログ作成  

流入:ほとんどが同じはてなグループの方。

 

推測されるPVが少ない理由

プログラミング以外の記事がない。

プログラミングに興味のない読者は、当たり前ですが

プログラミングに関する記事は読みません。はてなブロガーなら、

はてなブログのカスタマイズに関する記事なら読むかも

知れませんが、プログラミングの記事ばかりだと読むところが

ありません。

 

 プログラミングに限らず、はてなブログの〇〇初心者の

ブログの多くは、テーマに直結しないこと、ライフスタイル、

雑学なども取り入れています。俺は思ったことを書くぜ、

他人なんざどうでもいい! といブロガー以外は、

来た人楽しませる視点も大事なようです。

 

プログラミングの記事に関して競合相手が強敵

 はてなブログのプログラミング熟練者の記事やQiitaのような

技術系情報共有サイトでは、知識も経験も豊富な現役の

プロが、分かりやすく説明してくれています。

  

 プログラミング初心者の学習アウトプット記事をメインに

してしまうと(少なくとも私の記事では)太刀打ちが

できません。実際にアクセス解析で確認すると、

現在書き上げたプログラミング関連記事(HTMLの記事)に

関しては、アクセスがほぼない少ない……。

 

 もしプログラミングに関して指導してくれる人がいたら、

その質疑応答を記事にできますが、独学ぼっちの私には

不可能な話。初心者ならではの失敗体験談の方が、世の

プログラマーの方々の新人育成に役立つかも知れませんね。

 

そもそも記事が少ない

 量産すれば1つくらいはバズる記事ができるかも

しれません。また更新回数が多ければ、

はてなグループのタイムラインに掲載されるので、

他の人の目に留まる可能性が高まります。

 

 実際に私のブログに来てくれている人は、ほとんどが

はてなブロググループ」の方です!

まあ「はてなブログ グループ」に複数登録しているのに、

 PV0の日とか、普通にありますけれど……。

 

営業活動が足りない

 これ勉強したから書いておこう♪という記事しか

書いていないので、当然SEO対策なんぞしていません。

 「面白そうなブログに読者登録をする」をしているの

ですが、コメントやスターは付けていないんですよ。

正直まだ仕組みがよく分かっていないのです。

Twitter連携もしていない有様。アカウントこれ以上

増やすのもなあと導入はペンディング中。

  

結論

 プログラミングに興味のない人がせっかく来てくれても

興味のない記事が少しあるだけのブログだったことと、

肝心のプログラミングの記事も、初心者だからこそ書ける

独創的な記事がなかったこと、見てもらう努力が足りない

ことが敗因だったようです。

 

 ブログに記事を書くことは、学習のモチベーション維持

の大きな助けとなります。そっちにフォーカスするなら、

公開する必要もないわけで、公開する以上来てくれた人に

楽しんでもらえるような記事にする必要があります。

 

書くのは簡単ですが、両方と実現は難しい。

こんなの書ける人が存在するの?

いるからブログ初めて1週間で1000PV突破しました~♪とか

言っている人がいるんだろうな。ちぇ。

 

というわけで早くも挫折する気配漂いまくりな

このブログですが、後編に続きます。

 

ブラウザにhtmlファイルで作成した文字を表示しよう!

こんにちわ。

 今日はテキストエディタで作成したHTMLファイルを

ブラウザに表示させるまでの流れを説明します。

 

  

HTMLファイルを作成・保存

テキストエディタを起動する。

文字コード方式をUTF-8に設定する。

 Atomの場合、下の赤丸のところに表示されています。

 UTF-8になっていなければ、クリックして選択しましょう。

f:id:hanazukiyo:20190817203944p:plain

 

文字コードは、各文字に割り振られた番号。

  UTF-8は、文字コードの中でも、現在最もポピュラーなもの。

 

③ HTMLコードを書く(書き方は今回は省略)


④「(半角英数の文字列).html」と名前を付けて保存。

  index.htmlという名前を使うと、ホームページの

 トップページになります。(テキストでも多く使われる)

  

HTMLファイルをブラウザでプレビューする

①ブラウザを開く。

②保存したHTMLファイルをブラウザにドラッグ+ドロップする。

③ちゃんとブラウザに表示されているかチェックする。

 

※ HTMLで作成したWebページをネットで公開するには、

  Webサーバーに、FTPソフトを使って、htmlファイルを

  アップする必要がある。

 

ATOMでは、HTMLをリアルタイムでプレビューできる

 パッケージがあります。

 → ①HTMLファイルを記述 

   ②右クリックでHTML Preview

 → 右側のウインドウにプレビューが出ます。

 

 最後の「ブラウザでプレビューする」のやり方が、はじめは

 わからなくて戸惑いました。ネットで探しても、

 当たり前すぎて、説明が省略してあることが多かった……。

 なので、ちょっと細かめに説明してみました。

 同じ状態の人の助けになると嬉しい!

 

 はてなブログを使っている時点で、HTMLには

 知識のある人が多そうですが念のため。

 ではでは。

   

HTMLの学習環境を整える②(Windowsの場合)

こんにちわ。花月夜です。

今日はHTMLの学習環境を整える方法の続き

について書いていきたいと思います。
 

前回のブラウザとテキストエディタはHTMLに

必須なものですが、今日は「設定した方が便利」な

ものをご紹介します。

 

 

HTMLの学習のための推奨設定

  • プログラミング用フォントの設定
  • 拡張子が表示されるように設定

 

プログラミング用フォントの設定

プログラミング用フォントとは、プログラミングをする上で

全角・半角の区別、見間違えしやすい文字を判別しやすくした

文字のことです。(Lの小文字lのとiの大文字のIの違いとか)

ドットインストールは、Ricty Deminishedを推奨しています。

 

設定の仕方は、

①好きなフォントの配布サイトからダウンロードする

②ダウンロードしたファイルをインストールする

テキストエディタのフォントを変更する

の順で、設定します。

 

ちなみにAtomの場合は、以下の手順で設定します。

ファイル(file) 

→ 環境設定(setting) 

→ エディタ設定(editor) 

→ フォント(font family)に好きなフォントを入力

  (ex. Ricty Deminished)

 

人気のプログラミング用フォント

Ricty Deminished

特徴:①ラテン文字には Raph Levien 氏の Inconsolataを適用

   ②それ以外の文字には Circle M+ 1m を適用

    視認性の高い日本語文字 (半濁音など) が使用できる

   ③半角文字と全角文字の横幅の比が 1:2 に調整

   ④全角スペースが可視化されます。

   ⑤いくつかの全角グリフが対応する半角グリフと差別化

   ⑥en ダッシュ、em ダッシュが破断線のようになります

    (LaTeX での入力ミス防止のため)。

 

引用元:Github Inc,  プログラミング用フォントRicty Diminished

https://www.rs.tus.ac.jp/yyusa/ricty_diminished.html

 

Myrica

特徴:①ASCII文字は「Inconsolata」が適用されます。

   ②それ以外の文字には「源真ゴシック」または

    「Mgen+」が適用されます。

   ③半角文字と全角文字の横幅の比が 1:2 に

    調整されています。

   ④視認性の高い日本語文字 (半濁音など) が

    使用できます。

 

引用元:プログラミング用フォントMyrica / Estable

https://myrica.estable.jp

 

拡張子が表示されるように設定

Windows 8 / 8.1、Windows10の場合

エクスプローラーを起動

②「表示」タブをクリック

③ウインドウ上部に表示される「ファイル名拡張子」の

 横のチェックボックスに印を入れる。

 (ボックスをクリックして、☑と表示されればOK)

 

Windows 7 の場合

エクスプローラーを起動

②「ツール」タブをクリック

④「フォルダーオプション」をクリック

⑤「表示」タブをクリック

⑥「詳細設定」のリストの中から、

 「登録されている拡張子は表示しない」のチェックを

   外す(☐にしたらOK)

 

※もう1つの表示方法は、

 「スタート」 →「コントロールパネル」

        →「デスクトップのカスタマイズ」

        → ④~⑥は同じ

まとめ

HTMLの学習環境を整えるには、

①ブラウザと②テキストエディタが必須で、

可能ならプログラミング用フォントを設定し、

拡張子を表示させる設定をしておきましょう。

 

あとがき

プログラミング用フォントで人気の2つのフォントを

紹介しましたが、全角スペースがあることが□と表示されて

分かりやすいので、Ricty Deminishedの方がお勧め。

プログラミングをしていると、全角スペースの有無で

エラーになってしまうこともあるので。

 

あと拡張子は、絶対に表示させた方がいいですよ。

初心者あるあるで、拡張子を表示させなかった時に、

「これはウサギの画像だから、分かりやすいように

『usagi.png』と名前をつけよう!」

とファイル名をつけたら、

「usagi.png.png」が正式な拡張子なのに、混乱してしまった

なんてこともありますよ!(今日私がやったことです……)

 

HTMLの学習環境を整える①(Windowsの場合)

こんにちわ。花月夜です。

今日はHTMLの学習環境を整える方法について

書いていきたいと思います。


 

 

HTMLの学習環境に必要なもの 

ブラウザとは何か

ブラウザとは「インターネットに接続して、Webサイトを

閲覧する(browse)ためのソフト」のことです。

具体的には、ネットで検索し、検索結果を見るために開く

ソフトのことです。

 以下でWindowsに対応している主なプラウザ

見ていきます。ちなみにドットインストールでは、

Google Chromeを推しています。

ブラウザの種類

Google Chrome

提供元:Google

特徴:①あらゆる操作がスピーディーで快適

   ②Googleの最先端技術でWeb操作が便利

   ②高いセキュリティ

   ③あらゆる端末に対応

 

引用元:Google Chrome HPより

https://www.google.com/intl/ja_jp/chrome/

  

Mozilla Firefox

提供元:Mozilla非営利団体

特徴:①強力なプライベートブラウジング

   ②様々なデバイスを同期可能

   ③高速かつ軽量

 

引用元:Mozilla HPより

https://www.mozilla.org/ja/firefox/

 

Microsoft Edge

提供元:Microsoft

特徴:①Xbox oneが使える唯一のブラウザ

   ②Cortanaが使える

   ③画面の文字を読みやすくできる

   ④Windows10の標準ブラウザ

 

引用元:Microsft Edge HPより

https://www.microsoft.com/ja-jp/windows/microsoft-edge

 

Opera

提供元:Opera Software AS

特徴:①広告を排除できる

   ②高いプライバシー

   ③タブを切り替えなくてもチャットと

    Webページ閲覧を同時にできる

   ④省電力

   ⑤様々なデータをデバイス間で共有できる

 

引用元:opera HPより

https://www.opera.com/ja/computer

 

Vivaldi

提供元:Vivaldi Technologies

特徴:①便利なタブ管理機能

   ②ブラウザをカスタマイズできる

   ③インターフェイスをユーザー好みにできる

   ④検索をより便利にできるナビゲーション機能

   ⑤プライバシーを保護(追跡しない)

   ⑥ネットサーフィンに便利な機能が揃っている

 

引用元:VIVALDI HPより

https://vivaldi.com/ja/features/

 

テキストエディタとは何か

テキストエディタとは「文字情報を編集するためのソフト」

のことです。

 以下で主なテキストエディタを見ていきます。

ドットインストールでは、レッスン「HTML/CSSの学習環境

を整えよう」の旧版ではAtomを、最新版では

Visual Studio Codeを推しています。 

 

Visual Studio Code

提供元:Microsoft

特徴:①強力な編集機能とデバック機能

   ②JavaScriptとNode.jsの操作を効率化

   ③ローカルでサーバーレスに開発してデバッグ

   ④数百のプログラミング言語をサポート

   ⑤開発者サービスとリソースに接続

 

引用元:Visual Studio Code HPより

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

 

Atom

提供元:Github

特徴:①クロスプラットフォーム

   ②画面分割ができる

   ③コードの予測変換機能

   ④たくさんの便利なパッケージをインストール可

   ⑤1つのウィンドウで1つのファイル、プロジェクト

    全体、複数のプロジェクトを開いて、見ることが

    できる。

 

引用元:Atom HPより

https://atom.io/

  

 上記は全部無料なんです! 無料なんですよ!(超重要) 

 どれも機能が充実しているし、見た目もオシャレなんです

 よね。

 

 テキストエディタに関しては、ドットインストールの

推奨エディタが新旧で変わったので迷ったのですが、

このブログではAtomにしました!

 

 理由は、①AtomはDotinstall Paneというドットインストール

のレッスンをAtomのウインドウ内でみられるパッケージが

あったので使いやすい、②予測変換機能が便利、③画面分割が

便利、④デザインがいい、以上4点です!

 

 Atomはインストール後は、「隠しフォルダ」になっているので、

タスクバーやデスクトップにショートカットを貼ってくださいね。

そのままだと使いにくいので!

ではでは。

 

P.S. 「Windowsの場合」とタイトルにありますが、

  「Macの場合」は書きません。Mac持ってないので。 

プログラミング学習の第一歩は、HTMLから!

こんにちわ。花月夜です。

 

画像も付けたし、少しオシャンティーになったので、

今日はプログラミング学習の第一歩として勉強する

言語を決めることにしました。

 

ネット検索をするとプログラミング初心者たちが

「どんな言語がいいですか?」と質問し、

「やりたいことによる」と玄人たちが返すというのが

どうやら様式美となっているようです。

 

 そもそもプログラミングで何ができるのか分からないの

ですが何か? 「私はこれがしたいから、この言語を

勉強する」って、初めからわかる人って初心者じゃないよ。

「できることがあれば、全部できるようになりたい!」じゃ 

ダメ? 初めからハードル高すぎ! 

 しかしそんな迷える子羊に神は言った。

 

はじめてのプログラミング言語としておすすめ

したいのはブラウザゲームWebサービスを作る

ことができるJavaScriptです。ブラウザとエディタ

さえあればすぐに始めることができます。ただ、

JavaScriptを理解するにはHTML/CSSの知識が必要

なので、そちらを先に学習すると良いでしょう。

出典:ドットインストール

「プログラミング学習ガイド」

https://blog.hatena.ne.jp/hanazukiyo/hanazukiyo.hatenadiary.jp/edit?entry=26006613392692766

  

 というわけで、私の学習言語の第1弾はHTMLに決定!

少しだけHTMLとは何か、学習したことをご紹介します~♪

 

HTMLとは何か

HTMLとはHyper Text Markup Languageの略で、Webページの

内容を指定するマークアップ言語です。Hyper Textは、

Webサイト内外の文字や表や絵に関連を持たせた(特別な)

文章を指し、Markupとは「タグで印をつけ、その部分に

意味づけをすること」です。

 

例えばHTMLで「<p>で囲まれた部分は段落だよ。ここには

画像を入れるけど、その画像はこのリンク先にあるから」と

プラウザに伝えると、言われたとおりにプラウザが表示を

します。

 

CSSJavaScriptとの関係

 人物の絵に例えると、こんな感じになります。

HTML:鉛筆で下書きしたキャラクター

CSS:キャラクターに色を付ける

JavaScript:キャラクターに動きをつける(アニメ)

 

HTMLで、ここは顔で、ここは手足とコンピューターに

教えてあげます。

次にCSSで、顔は頬紅とアイシャドウをして、かわいく

しよう!などと、下書きに装飾をすることができます。

最後にJavaScriptで、キャラクターが泣いたり笑ったり、

ダンスをしたりと、動きをつけることができます。

 

 こういった関係なのでHTMLとCSSはセットで

学習するテキストが多いですね。またJavaScript

マスターするには、HTMLとCSSの理解が必要だと

いうこともわかりました。

 

 ホームページのデザインには、この3つは必須という

ことですね。わかります! 大体イメージがつかめた

ところで今日はここまで! 

 

ところで、毎回プレビューを見ながら文字ずれを

1つずつ直していますが、皆こんな面倒なことをやって

いるのだろうか……。

  

ブログに載せる画像について!

こんにちわ。

 

もう私がこのブログを開設して3日目。

そろそろ、このブログをおシャンティーにする

段階に来たのではないか?

ということで、画像なんぞを貼り付けてみました。


しかし画像を貼り付けるというこの行為、

私のような超初心者アナログブロガーにとっては、

ドキドキなわけですよ。

 

 そもそもこの画像って大丈夫なのかな?とか、

知らない間に著作権法とか違反していたら怖い……

とか考えてしまうわけです。

 

 

 というわけで、ブログに掲載してもいい画像について

調べてみました!ネットリテラシーを上げるぞー!

 

  

どんな画像を使用していいの?

自分で撮影した写真

 自分の携帯やカメラで撮影した写真は、著作権が自分に

あるので使用できます。ただし他人を撮影した場合、その人の

許可を取らないで掲載すると、肖像権侵害にあたることも

あります。必ず映り込んでいる人たちから掲載許可をとりましょう。

 

 特に「有名人と写真とった! よっしゃ、これを俺の店の

HPで使おう!」と、有名人の許可なく勝手に写真を店のHPに

掲載するとパブリシティー権の侵害になるのでご注意!

 

パブリシティー権とは何か? 初めてパブリシティー権に

ついて認めたキング・クリムゾン事件の判決はこう言って

います。

 

著名人がその氏名,肖像その他の顧客吸引力のある

個人識別情報の有する経済的利益ないし価値を

排他的に支配する権利

キング・クリムゾン事件東京高裁平成10年(ネ)

第673号損害賠償等請求控訴事件判旨より)

 

簡単に言うと、「その有名人の名前とか写真は集客できる

力があるから、ビジネスするなら有名人本人の許可が

ないと(他人は)使用できないよ」ということ。

 

 一般人だろうが有名人だろうがブログに写真を

掲載するときには慎重に!ということですな。

 

 自分で描いたイラスト

自分で作成したイラストは、著作権が自分にあるので

使用できます。オリジナルキャラはもちろんOK!

ただし商標権のあるキャラクターの模写はNG!

他人の描いたイラストの無断コピペは、原則NG!

 

 でも実際に漫画の好きなキャラクターをアイコンに

している人は時々見かけますよね? 

それが許されているのは、キャラクターが認知された

方が著作権者にメリットがあるから訴えられていない

からであって、厳密には違法です。

 

 え……じゃあ、オフブラックな人が某サイトには

一杯……ゲフンゲフン。著作権侵害親告罪なので、

著作権者が訴えないと罪にはならないのです。

でも、その気になったら訴えられてしまうので、

ビビりな当サイトは絶対に手を出しませぬ。

(それ以前に絵が描けない)

 

イラストを購入して、使用する  

  それでは私のような前衛的すぎる絵しか描けない人間は

どうしたらいいのか? 1つの方法がイラストを購入

するという方法です。

 

 

coconala.com

  スキルの販売サイト「coconala」では、イラストが得意な

方にアイコン画像などを発注することができます。

 

skima.jp

同じくスキル販売サイトの「スキマ(skima)」でもイラスト

作成をお願いすることができます。こちらはアニメっぽい

絵が得意な販売者が多い印象です。

 

 coconalaでもskimaでも、購入する際に、イラストの用途を

明確に販売者に伝えましょう。販売者=著作権者にどのような

権利があり、購入者にどんな権利を譲渡してくれたのかも

確認が必要です。(イラストの使用のみOKとか)

 

イラスト販売サイトを使う

 販売されているイラストから、好きなものを購入して使用

できるというサービスです。

 

 ロイヤリティー・フリーのイラストや写真を無償提供して

くれる神サービスもあるので、低予算のこのブログは

お世話になりまくっています!

無料なのに、驚くほどクオリティの高い作品がありますよ!

 

 ただしロイヤリティー・フリーといっても著作権を放棄して

いないことが普通なので、「かわいいイラストだから自分が

描いたことにして誰かに売りとばそう」なんてことはできません。

クレジットの記載、商用利用が可能かなど、利用規約は必ず

確認をしましょう! 

 

 最後に「タダピク」をご紹介。商用利用OKかつクレジット表示

不要のイラストだけを検索してくれるサイトです。

 

www.tadapic.com

 ふいい。今日も頑張った! しかしびっくりするほど

増えないPV。

もしかして人類は死に絶えてしまったのだろうか…。