ニートが学ぶプログラミング

ニートの日記。プログラムのことやら、くだらないこと、思ったことをまとめていきます。頑張って毎日更新するぞぉ_(:3」∠)_ 更新が連続して途切れたら察してください。

はてなブログがついにHTTPS化決定！ HTTPSに対応する利点とは？

はてなブログ ネットワーク その他

先日はてなブログ開発ブログの方にこんな記事が出ました。

staff.hatenablog.com

HTTPSとは何ぞや？と思ったのでそれについて私、調べてまいりました！それをまとめたいと思います。

サムネ用に画像を配置しました

既存のはてなブロガーはHTTPSにしないことも選択可

大前提として、HTTPS化にするかしないかをユーザーは選べるようです！

既存のブログに対して、HTTPSでの配信を管理画面から選択できるようにします（HTTPに戻すことはできませんのでご注意ください）。 後述するようにブログのオーナーが既存記事の混在コンテンツを解決する必要があるため、自動で切り替えることはいたしません。

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ

HTTPSに興味のない方やめんどくさい方は、HTTPSの有効化をしないようにすればよいだけです（やったね！）

HTTPSとは

HTTPにSecureのSがついてHTTPSですね。

HTTPS (Hypertext Transfer Protocol Secure) は、HTTPによる通信を安全に（セキュアに）行うためのプロトコルおよびURIスキームである。厳密に言えば、HTTPS自体はプロトコルではなく、SSL/TLSプロトコルによって提供されるセキュアな接続の上でHTTP通信を行うことをHTTPSと呼んでいる。

HTTPS - Wikipedia

本来HTTPS（TLS）を使うには、サーバー証明書を発行してそれを管理しなくてはいけません。その面倒なところなどをはてなブログがやってくれます。ありがとうありがとう( ;∀;)

TLS/SSLを使って暗号化することでデータの盗聴・改竄等を防止できるということです。商品やそれに準ずるものをサービスとして金銭を取り扱ってるサイトならばHTTPSに対応させる必要があると思いますが、なぜブログもHTTPSに対応しなくてはいけないんでしょうか？そのメリットデメリットについてまとめてみました。

HTTPSにするメリット

HTTPSに対応させるメリットは

  • 通信を暗号化することで、データの盗聴・改竄を防ぐことができる
  • SEOで有利になる
  • ブラウザによる警告を回避できる

などが調べたところ見つかりました。実際のところ、はてなブログでブログを書いている人で通信を暗号化したいという目的の方は少ないのかなと思います。

おそらくはこれ！

SEOで有利になるとブラウザの警告を取り除けるという点が大きいと思います。

SEOで有利

SEOは検索エンジン最適化のことですね。つまりGoogle検索等の検索で表示される順番が上がるということです。ぶっちゃけると、Google検索からのブログ訪問者が増えるということです。

Google では過去数か月にわたり、Google のランキング アルゴリズムでのシグナルとして、暗号化された安全な接続をサイトで使用しているかを考慮に入れたテストを実施してきました。この実験ではよい結果が得られているため、ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。

Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用します

私もブログを始めてまだまだですが、アクセス数が増えると嬉しいですよね！少ないよりかは多い方がいいよねってことです。

ブラウザによる警告を回避

日本でのブラウザのシェアNo1の実績を持つ1Chromeの新しいバージョンからHTTPSに対応していないWebページに警告を表示するようになるらしいです。

Google Chromeでは、2017年10月に予定されるバージョン62から、HTTP接続のWebページにある入力欄を使用した場合と、シークレットモードでのHTTP接続について、アドレスバーに「保護されていない通信」と表示すると発表しています。これは、すでに実施されている警告の基準をより厳しくするもので、安全性が以前より低下するわけではありません。

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ

どの程度の警告が出るのかわかりませんが、ブログを見ているのに急に「保護されていない通信を行っています！」なんて警告が出てきたら、ブログを見ている方々がうろたえてしまって新規で読まれる方が減ってしまうかもしれません。

そういったことを考えるとHTTPSに対応させた方がいいかもしれませんね。

HTTPSにするデメリット

HTTPSに対応させるデメリットを調べました。

  • 証明書の発行・管理等の導入がめんどくさい はてなブログがやってくれます
  • 証明書の発行に費用がかかる（無料のもある） はてなブログがやってくれます
  • クライアントとサーバー等の負荷が上がる

すべてはてなブログが代行してくれるものですね！やったぜ！

唯一の欠点はクライアントとサーバーの負荷が上がり、ページの読み込みが少し遅くなるかもしれないとのことです。ですが、先ほど上げたメリットを考えれば許容範囲内かなと思います。

私たちはてなブロガーがすること

私たちは何をすればいいのでしょうか？詳しくは公式の説明記事に載っていますが、ここで抜粋したいと思います。

HTTPSにするかしないかを選択する

前述したようにはてなブログがHTTPSに対応したといっても、既存の記事全体が自動的にHTTPS化になるわけではありません。あくまでユーザーがHTTPSにするかどうかを決めることができます。HTTPSに対応させなければこの問題はそこで終了です。

ここからはHTTPSにする人向けにまとめたいと思います。

HTTPSに対応する時期

はてなブログがHTTPSに対応する時期を知っておく必要があるでしょう。まず、ダッシュボード（記事管理画面やデザイン変更画面は除く）がHTTPS化し、次にはてなブログのドメイン（一般ユーザーのデフォルトドメイン）が対応し、最後に独自ドメイン（proユーザー）が対応するようです。具体的な日時を下の表にまとめました。まだ明確な日時は判明していないですが、2018年初頭にはすべて対応されるようです。

はてなブログをHTTPSで配信できる機能は、2017年10月から2018年初頭にかけて以下の三段階でリリースします。段階的に進めることで、さまざまな影響を確認しつつ安全に対応したいと考えています。スケジュールは、状況により変動する可能性もありますのでご了承ください。

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ
時期 内容
2017年10月ごろ ダッシュボード（記事編集画面・デザイン編集画面を除く）をHTTPS化
その間 はてなが提供するドメインのブログをHTTPS化
2018年初頭 独自ドメインのHTTPS化

楽しみです！

ブログをHTTPS化したい場合にすること

公式開発ブログより

はてなブログにおいてHTTPS配信の利用を検討される方は、記事やサイドバーなどにご自身で配置・掲載した外部サイトの画像や、広告・ブログパーツなどが、下記のようにHTTPS（https://）であることをご確認ください。

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ

今すぐにやれることは、記事にあるHTTPのリンクをすべてHTTPSにすることでしょうか。それでも膨大な作業なので、ツールを作ってくれることを祈るしかありません(人''▽｀)

少なくともHTTPSにしたい方はこれからの記事でHTTPのURLを持つリンクやモジュールを使わないようにするといいかもしれません。

はてなブログがHTTPS化しても自分のブログが自動的になるわけではありませんので、実際にその時にHTTPのリンクを直すのもありでしょう。もしかしたら、一括変更ツールなど便利なものを作ってくださる方が出るかもしれませんのでそれまで待つのも手です。

終わりに

ここまでご覧いただき、ありがとうございます。

HTTPS化の有無については私がブログを始める際に考えたポイントの一つでした。HTTPSに未対応でもはてなブログの方が始めやすいかなと思ってはてなを利用しました。これでHTTPS化してくれれば鬼に金棒というわけです！

嬉しくてちょっと興奮して記事をまとめてしまいました。HTTPS化楽しみです！

いつも読んでくださっている方々、本当にありがとうございます！

またね('ω')ノ

  1. https://webrage.jp/techblog/pc_browser_share/↩

はてなブログをカスタマイズしてみた（第2回）

はてなブログ

こんにちは、鬱太郎です。最近、当初の目的であるプログラミングの勉強そっちのけでいろいろなことをして時間をつぶしてしまっています。でも、ただ意味もなく引きこもるよりはいいよね！今日は昨日までにした自分のブログのカスタマイズをまとめたいと思います。ごめんなさい( ;∀;)

テーマの変更

テーマを変更しました。Brooklynというテーマです。リンクはこちら

Brooklyn - テーマ ストア

製作者さんのブログに詳しいカスタマイズ内容がかかれています

www.notitle-weblog.com

私は美的センス、ユーザビリティセンスが皆無なので、ランキング一位の一番インストールされているテーマを使用しました。

一番インストールされているんだ。一番いいテーマに決まっている！

コーラが一番うまい画像
Q.E.D. 証明終了32巻より

という冗談は置いといてｗ

実際素敵なテーマです。ありがとうございます！

Brooklynテーマの良い点

このテーマを使用してよかった点を挙げたいと思います。

  1. レスポンシブデザインに対応
  2. 追従式のグローバルメニューバーに対応
  3. 素敵なシェアボタンに対応
  4. シンプルな読者になるボタンに対応

です。これらを説明していきますね。

1.レスポンシブデザインに対応

スマホでPCの様に閲覧できるレスポンシブデザインに対応しています。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部としての閲覧者の近さがRWDの延長部分と見なされている。ニールセンノルマングループは、「コンテンツ、デザイン、そしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。

レスポンシブウェブデザイン - Wikipedia

私のブログを見てくださっている方の70%がスマートフォンからでした。今まで、パソコン画面で編集して記事をみてきましたので事のやばさに気づきませんでした。さすがに、これではまずいと思いスマートフォン向けに対応しているデザインにしようと思いました。

そしたら、元からこのデザインは対応していることを知りましたｗ　ただし、レスポンシブデザインに対応していても、はてなブログの方で設定しなくては、反映されません。

はてなブログでレスポンシブデザインを設定する方法

はてなブログでは、「デザイン」→「スマートフォン」→「詳細設定」から設定できます。

「デザイン」→「スマートフォン」→「詳細設定」から設定できる

2.追従式のグローバルメニューバーに対応

色々なサイトや読者さんのブログを見ていると、ブログのどこを見ていても画面上部にメニューバーが表示されて いるものがありますよね。

このテーマは追従式のグローバルメニューバーに対応しています

かっこいい！

これも、このテーマでは対応しています。ただし、製作者さんのブログに書いてあるコードを追加する必要があります。

グローバルメニューバーはHTML、CSS、JavaScriptの3つで作ります。テーマに含まれている部分はCSSしかないので、残りのHTMLやJavaScriptのコードは作者さんのものを指定の場所にコピペする必要があります。

3.素敵なシェアボタンに対応

はてなブログの記事下における元からあるシェアボタンはそれぞれの大きさがバラバラですよね。あと読み込みが遅いときがあります。このテーマはシェアボタンの数には劣るものの、デザインは素晴らしく素敵なシェアボタンを追加することができます。

このテーマは素敵なシェアボタンに対応しています

かっこいい！×2

これも、製作者さんのブログに書いてあるコードを追加する必要があります。

4.シンプルな読者になるボタンに対応

はてなブログの読者登録ボタンはスマートでよいものだと思います。ただし、小さすぎることと、読み込みに時間がかかることがちょっと気になっていました。

読者登録ボタンは白黒のものと、赤白のものを選べます

かっこいい！×3

これも製作者さんのブログに書いてあるコードを追加すれば素敵なボタンが使えます。

フォローボタンを作成

読者登録ボタンのCSSをいじって新しくフォローボタンを作りました。

ボタンに使われているCSSを変更して作りました

製作者さんの他の記事にてもっと素敵なものがあるのに、作った後に気づきました(´;ω;｀)

ま、まあ、CSSの勉強になったしいいかな…！

他のモジュール等のmarginを変更

サイドバーにあるプロフィールや過去記事等の隙間が空きすぎている気がしたので、それらの隙間を少し減らしました。

これが悪手でなければいいんですが…

記事の下に出る関連記事等の順番を変更

はてなブログでは記事の下に、任意のHTMLコードを入力できます。しかし、その入力したHTMLが出現する場所があまりにも下すぎます。デフォルトでは

  1. はてなブックマークのコメント欄
  2. 関連記事
  3. ユーザーのHTML

いや、、下すぎでしょｗ せっかく記事下に表示させたつもりの読者登録ボタンとフォローボタンが地の底まで掘り進んでしまいます。

これを

  1. ユーザーのHTML
  2. はてなブックマークのコメント欄
  3. 関連記事

こうしたいと思いました。こうすれば、今のように記事の下にはてなスター。そしてシェアボタン、読者登録ボタンとフォローボタンと表示できます。

ネットで探してみると偶然にもまさかのこのテーマの作者さんが対応策を載せてくれてました。ありがとうございます！

www.notitle-weblog.com

ですが、私の場合ははてなブックマークのコメント欄も下にずらしたいです。ですので、作者さんのコードを修正しました。

/* 関連記事を記事下よりも下に */
/*この設定で、このdivの中の要素をorderという値を使い、順番指定ができるようになる*/
.customized-footer {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
/*関連記事を3番目に*/
.entry-footer-modules {
  -webkit-order:3;
  order:3;
  width: 100%;
}
/*はてなブックマークのコメント欄を2番目に*/
.hatena-bookmark-comment-iframe{
  -webkit-order:2;
  order:2;
  width: 100%;
}
/*ユーザーHTMLを1番目に*/
.entry-footer-html {
  -webkit-order:1;
  order:1;
  width: 100%;
}

div要素の順番を強制的に変える方法があるんですね！勉強になりました。JavaScriptを使えば、動的にランダムな配置が可能というわけですね。何かに使えるかも…?

終わりに

ここまでご覧いただき、ありがとうございます。

Androidのプログラムをしたり、それに関する動画を編集しようとしたら、なぜかブログのカスタマイズにはまってしまいましたｗ　はぁ。。。

最近ちょっと記事の方向性がバラバラなのかなと思う今日この頃です。ちょっとしたことが気になって、違うことしてしまいます。もしかしたら、ADHDのような衝動性がある病気なのかもしれません。まあ、それに気づいただけで良しとしましょう！少なくとも、今までブログを書き続けている。少しは前に進んでると信じましょう。

もうすぐブログを始めてから1か月が経ちます。（正確には今日で4週間経ちますが、キリがいいので月末ということで。）

過去の自分と今の自分を見つめなおして、新しい目標を立てていきたいなぁと思います。

というか、まだ1か月も経ってなかったんですねｗ それだけ自分の中で有意義な日々を送れたのかなと思います。

いつも読んでくださっている方々、ありがとうございます！

またね(‘ω’)ノ

ニートの早朝散歩

その他 散歩

こんにちは、鬱太郎です。先日早朝にコンビニに行った話をしました。

www.neetaro.com

その中で、早朝なら散歩できそうと思ったわけです。というわけで、今日実際に行ってみました。

起床

朝五時に目が覚めたんですが、なかなか起きれず、布団の中で20分間ごろごろしてましたｗ なかなか起きれないって経験よくありますよねｗ

5時20分ごろ、うがいして、水を飲んで、おもり用のリュックを背負って出発！

外に出ると、曇り空だった

あいにくの曇り空！今にも雨降りそう…

でも、出発！

川沿いの遊歩道を進む

近所にある川沿いの遊歩道をのっそのっそと歩きました。途中散歩仲間やジョギングしている通行人とすれ違いました。

若干汚れてますが、川を近くっで見れて気持ちが落ち着きます

通行人「おはようございます！」

私「おぁざす」←おはようございますのつもりｗ

やっちまったー(;´･ω･)　まあ、相手も聞き間違いと思って納得してくれるでしょう！うん…

もともと会話苦手+しばらく他人と会話してない+朝起きたばかりでぼーっとしてる=おぁざす

引きこもりあいさつの定理ですね。テストに出ますよ！

ただ、川が流れる音は好きです。癒された気分です。

魚発見！

川に魚がいるなんて昔の話だと思っていたんですが、魚を発見しました！童心に帰って喜んで写メったｗ

散歩中に見つけた鯉1散歩中に見つけた鯉2

池に鯉を飼う人の気持ちが少しわかったような気がしました。

関係ないけど

最近、引用スターなるものを知り、ちょくちょく試しています。これって楽しいですよねｗ

「はてなスター要・不要論」に完全決着！設置は必須！（引用スターというテクニック） - 自由ネコ

めもめも　知らなかったです。参考にしたいと思います。

2017/09/20 10:30

はてなブログの記事の引用したい文章を選択して左側に出る☆スターボタンを押すと引用スターが使えます。引用スターは下の画像のように、マウスカーソルを合わせると引用した文章が出ます。楽しいです。

記事本文を選択し左側のスターボタンを押すことで、引用スターが使えます。

本当に全然関係なくて申し訳ありませんｗ

終わりに

ここまでご覧いただき、ありがとうございます！

6時と時間が経つにつれ、増える通行人におびえながら散歩しました。引きこもってた時よりは体が生き生きしている感じがして、嬉しかったです。少しづつ、前に進んでいきます！

いつも、記事を見てくださってありがとうございます。

もうちょっと早めに家でようと思いました(小並感)。

またね！

はてなブログで独自ドメインを設定する方法

その他 はてなブログ ネットワーク

こんにちは、鬱太郎です。先日ドメインを取得しはてなproに登録しました。その際に気になったこと、気を付けるべきことをまとめたいと思います。

結論から言います。

1. 値段はあんまり変わらない（.comドメインのみの場合）
2. WHOIS情報の代理入力サービスが無料でできるかを重視するべし
3. DNSの設定に時間がかかる場合があるので焦るべからず
4. はてなpro登録は最後にするべし
5. はてなpro登録にはクレジットカードがおすすめである

では、それについて説明していきましょう。

f:id:neet-utsu-taro:20170907212631p:plain

ドメインについて

ドメイン取得サイトでは様々なドメインを得ることができます。

.com .net .org .info .tokyo .co.jp

など種類は豊富です。そして、値段もドメインごとに違います。自分がブログでどんなドメイン名を使いたいのかを考えて、値段と見比べてみるのがいいですね。私はオーソドックスな.comドメインを取得しました。値段も高すぎず、不自然なほど安すぎずといった感じですね。ですので、この記事は.comドメインを前提に記述していきます。他のドメイン名を取得したいと思われている方は、頭の片隅に自分のドメインの値段とは違うということを置いていただけたらと思います。

ドメイン契約の価格について

ドメインを取得するにあたって、どこがお得なのかという話です。まず、有名なドメイン取得サービスをしているサイトを紹介していきたいと思います。

1.お名前.com www.onamae.com

2.ムームドメイン muumuu-domain.com

3.Xdomain www.xdomain.ne.jp

4.StarDomain www.star-domain.jp

この4つのサイトを見ておけば大丈夫でしょう1 それぞれの値段を見てみましょう。その際に重要なのは更新料をしっかりと確認するということです。下のような表をそれぞれのサイトから見つけて確認しましょう。

1.お名前.com

f:id:neet-utsu-taro:20170919110712p:plain

.comだけに注目すると、更新料は1280円/年ですね。

2.ムームドメイン

f:id:neet-utsu-taro:20170919111320p:plain

.comだけに注目すると、更新料は同じく1280円/年ですね。

3.XdomainおよびStarDomain

両社は同じ値段だったので一つにまとめます。

f:id:neet-utsu-taro:20170919111939p:plain

.comドメインだけに注目すると、更新料は1180円/年

結局どこが安いの？

結論から言うと、

お名前.comのキャンペーン中2に登録するのが一番安いです3。また、この中で一番割高なのは、キャンペーンを利用しないお名前.comです。

2,3年の短期契約をする場合はXdomainやStarDomainはほんの少し割高になってしまいますが、更新料が定額で他と比べてわずかに安いです。6年以上の長期で見るとこれら二つのサイトがお得だといえます。

下に.comドメインの安価率をグラフにしてみたものを表示しました。この値が100%のサービスが他のサービスの中で一番安いということです。

f:id:neet-utsu-taro:20170919154004p:plain

お名前.comのキャンペーンが多く高い値を維持していることがわかると思います。逆にキャンペーンを使用しないお名前.comは値が低く、一番割高ということが分かります。

お名前.comのキャンペーンって何？

公式サイトに表示されているものです。期間限定キャンペーンと銘打ってますが、比較的よく見かけます。焦る必要はないと思います。下記のようなやつです。

f:id:neet-utsu-taro:20170919112804p:plain

ムームドメインのクーポンって何？

ムームドメインで契約をすると、契約する年数「3年、5年、10年」単位でクーポンが使えます4。5年、10年のクーポン込みでの料金は4つのサイトの中では一番安いので、ピンポイントで狙ってみるのもいいかもしれません。

値段は気にしないでいい

今まで紹介した4サイトの中ではキャンペーン無しのお名前.com以外大した差はありません。あっても数百円程度です。これが高いか安いかは人によると思いますが。

それでも気になるという方は、自分で表計算ソフト（ExcelやOpenOffice）等を使って比較してみるといいでしょう。時期やキャンペーン内容によって価格は変動します。私やほかに紹介されてる方の内容も吟味して各自納得のいく値段で、契約していただけたらなと思います。

WHOIS代理入力サービスが無料でできるかを確認しよう

よし！このサイトでドメインを取得しよう！と思った方はWHOIS代理入力サービスが無料でできるかを確認してください。絶対にしてください。

WHOISってなに

WHOIS（フーイズ）とは、インターネット上でのドメイン名・IPアドレス・Autonomous System (AS) 番号の所有者を検索するためのプロトコルである。データベース検索を用い、TCPベースでクエリ（質問）・レスポンス（応答）を行う。

WHOIS - Wikipedia

つまり、ドメイン所有者の情報を取得できる方法があるということです。それがWHOISです。これの何が重要かというと、登録者の住所や電話番号等といった個人情報が登録されるということです。

私が取得したドメイン「neetaro.com」をWHOISで検索すると、

f:id:neet-utsu-taro:20170923134639p:plainf:id:neet-utsu-taro:20170923134649p:plain

このように出ます。私はWHOIS代理入力サービスをしたので、ドメインを取得した会社の住所、電話番号等が記入されています。

WHOIS代理入力をしない場合、ドメイン取得時に登録した住所、電話番号等の情報が上の図のように表示されてしまいます。

考えるだけでも恐ろしい…( ﾟДﾟ)

あ、企業とかで取得されている方は代理入力サービスを外してもいいと思います。むしろ外すべきかと。

DNSの設定方法

WHOIS代理入力サービスも無料ででき、ドメインの契約も完了しました！そうなったら、DNSにはてなブログの情報を登録しましょう。この時に独自ドメインをどうするのかを考えておきましょう。ただし、まだはてなproに登録する必要はありません。

DNSに登録する内容

結論から先に言います。下の内容をDNSに登録しましょう。

ホスト名 TYPE TTL VALUE
任意の文字列 CNAME 規定値 hatenablog.com

私の場合は

ホスト名 TYPE TTL VALUE
www CNAME 規定値 hatenablog.com

と、登録しました5。

DNSに登録する内容ははてなブログの公式ページを確認しよう

先ほどDNSに入力した情報はおそらく今後変わることはないと思います。しかし、いつか変わってしまうこともあると思うので、DNS登録をする際に公式のページを確認してみるといいでしょう。

help.hatenablog.com

DNSに登録したら、そのURLにアクセスしてみよう

さぁ！DNSに登録したぞ！そんな方は、はてなproに登録する前に、DNSに登録したURLhttp://ホスト名.契約したドメイン名 にアクセスしてみましょう。私の場合はhttp://www.neetaro.comですね。するとエラーが出ます。

え？エラーが出ちゃまずいんじゃ・・・？と思う方もいるかもしれません。

エラーの内容が重要です！

下のスクショの様なエラーが出ると、DNSの設定がうまくいったということですね。

f:id:neet-utsu-taro:20170923142233p:plain

重要なのは、Hatenablogのエラーページに飛ぶということ。

DNS「www.neetaro.comさん？その方はhatenablog.comに居ますね」

↓ （この矢印が発生したかどうかが重要！）

はてなブログ「www.neetaro.comさん？そんな方は居ませんね」

という風なやり取りがされています。一見エラーのように見えますが、DNSはちゃんとはてなブログに飛ばしてくれています。一方、はてなブログの方にドメイン「www.neetaro.com」を登録していないので、はてなブログがエラーを出すのは当然というわけです。

ここまで来れば後は はてなproに契約し、独自ドメインを登録するだけです。

DNS登録で失敗しても焦らないこと

DNSの登録に失敗しても焦らないでください！DNSの登録が反映されるのに時間がかかることがあります。DNSに新規登録ならさほど時間はかかりませんが、変更等になると時間がかかることがあります。私の場合はDNSの情報を変更して反映するまで1時間程度かかりました。

焦って登録内容を変更したりするとドツボにはまってしまいます。しばらく放置しておくのがいいでしょう。

はてなpro契約をしよう

この記事でははてなproの契約を最後に持ってきました。はてなpro契約は最後にすべきだと思うからです。理由はドメイン料金が約1000円/年なのに対してpro料金が約8000円/年かかります。1か月コースの方は約12000円/年ですね。つまり、

先にはてなproを契約してドメイン登録で手こずると、逆の場合に比べて1日約8倍の損失が出るということです。

ですので、はてなpro契約は最後の最後に登録しましょう。1日1日が無駄になってしまいます。

はてなproへの登録

hatenablog.com

上記リンクから、はてなproに登録しましょう。クレジットカードを利用して無料期間を使うのがおすすめです。

独自ドメインの設定

自分のブログの設定画面から登録できます。どうしても設定画面やダッシュボードにいけない方はいつもはてなブログで編集しているブラウザでhttp://blog.hatena.ne.jp/にアクセスすると、ダッシュボードが表示されると思います。

f:id:neet-utsu-taro:20170923144654p:plain

間違ったドメインを登録して自分のブログにアクセスできない場合

http://blog.hatena.ne.jp/

に、はてなブログをいつも使っているブラウザでアクセスすれば、ダッシュボードに飛べます。そこからドメイン名を変更および削除するとよいでしょう。独自ドメイン名を削除すれば、前のようにIDを使ったアドレスからブログを見ることができます。

まとめ

始めに記述した結論です。

  1. 値段はあんまり変わらない（.comドメインのみの場合）
  2. WHOIS情報の代理入力サービスが無料でできるかを重視するべし
  3. DNSの設定に時間がかかる場合があるので焦るべからず
  4. はてなpro登録は最後にするべし
  5. はてなpro登録にはクレジットカードがおすすめである

以上です。

終わりに

ここまでご覧いただき、ありがとうございます。 ドメインを取得したい方、はてなproで独自ドメインを使用したい方の手助けになれば幸いです。

DNS登録は時間がかかる場合があるということは多分一生忘れないでしょうｗ

いつも見てくださって、ありがとうございます。

またね(‘ω’)ノ

  1. 2017年9月中旬の話です↩

  2. あくまで、私が参考にした時の値段で比較しました。キャンペーンによっては価格が変動する場合があると思います。↩

  3. 私が比較したのはcomドメインです。他の種類のドメインでは異なる場合があります。↩

  4. 私が調べた当時の話です。時期によってはなくなっているかもしれません。↩

  5. にしのさんごめんなさい…ここにもろにホスト名って書いてありますねｗ↩

ニートも長時間労働は自粛すべき

その他

こんにちは、鬱太郎です。ブログを始めて、自分のドメインを持ち、proに登録してから、毎日が楽しくなりました。毎日ブログの記事を書いたり、プログラミングしたり、動画を作ったりしても苦じゃない。

そう思ってました。

でも体が追いついてこなかったです

最近の記事もあまりクオリティが高いとは言えないものだと思います。ニートの私は、普段職場で働いてる方々よりも、仕事のストレスは少ないと思います。仕事をされてる方も「調子のるんじゃないよ」などと思ってるかもしれません。 でもやっぱり休憩は必要！好きなことだから、自分を変えるためにやっていることだから。といって自分に負荷をかけすぎるのはよくない。というのを身をもって今日、体験しました。

そう。今日めっちゃ頭が痛いです。風邪というわけではないのですが、おそらくディスプレイの画面を見すぎたのかなと思います。ちょっと体を休ませたいと思います。

何よりもメリハリが大事！家に居続けるからこそONOFFが大事！

ブログやプログラミングに関することは夕方の6時までに切り上げることにしました。その代り、できるだけ朝早く起きようと思います。

皆さんも、仕事や作業、いろいろなことをしていると思います。自分が楽しいと思っていることだから続けられる。そう思っていても体がついていけないこともあります。

ぜひ、休憩しましょう。

メリハリをつけましょう！

終わりに

ディスプレイを長く見続けるのはいけないですねｗ 眼は痛くないですが、頭がめっちゃ痛いです。そして頭の中で考え事がなかなかまとまりません。

職場などでパソコンの画面等をよく見る方は気を付けてください。頭が痛かったら、もしかしたらディスプレイ飲みすぎかもしれません。

読者登録数が60人になりました！ありがとうございます。 いつも読んでくださっている方々、本当にありがとうございます。

またね(‘ω’)ノ

自分の見出しのスタイルをコピーする方法

はてなブログ プログラミング CSS

こんにちは、鬱太郎です。この前投稿したはてなブログをカスタマイズ第1回という記事で見出し部分について勘違いしていました。ユーザーは見出し4~6をユーザーは使うぞ！と言ってましたが、見出し3~5を使うんですね…

neet-utsu-taro.hatenablog.jp

しかし、私のブログはもうすでに見出し4~6を使ってしまいましたし、今までの記事を編集するのも億劫です。

そこで自分のブログの見出しのデザインをずらすことで、ごまかそうと思います。

今日は自分の見出しのスタイルをコピーする方法をまとめてみました。

f:id:neet-utsu-taro:20170907212631p:plain

そう、気づいちゃいましたか！手抜き回です

構想

自分で今使われている見出しのスタイルをレベルごとに一つずらします。詳しく言うと、

  • h4にh3のデザインを上書き
  • h5にh4のデザインを上書き
  • h6にh5のデザインを上書き

しようということです。それではやっていきましょう！

Chromeのデベロッパーツールを使いCSSを見つけ出す。

自分で選んだテーマがCSSにどういった変化を与えているのかをユーザーは確認できません1。しかし、ブラウザのデベロッパーツールを使うことで事細かに確認できます。

今日はChromeのデベロッパーツールを使って説明してますね。

Chromeのデベロッパーツールを起動

右上の縦三つのちょんちょんちょん「GoogleChromeの設定」から

「その他のツール」->「デベロッパーツール」で起動できます。

f:id:neet-utsu-taro:20170913215053p:plain

対応する記事（見出し）を見つける

デベロッパーツールを開いたらElementsの項目のHTMLソースコードから対応する記事を見つけましょう。

「entry-inner」等で検索するとよいでしょう。

記事を見つけ、HTMLコードにカーソルを合わしていくと、通常の画面の対応している箇所がハイライトで表示されます。これを頼りに対応する見出しを探し出しましょう。

f:id:neet-utsu-taro:20170913221222p:plain

対応する見出しを見つけたら、HTMLコードをクリックしましょう。するとその見出しに関するCSSが表示されます。

その中から見出し部分（ここではh4）のCSSをメモ帳等にコピペしておきます。

上記図の○の部分はh4のみの要素です。△の部分にもh4の要素がありますが、すべての見出しに共通した要素なのでここでは省きます。二つの○の要素のうち上の要素がテーマからなる要素なので、それをコピペします。

.entry-content h4 {
    font-size: 135%;
    padding-left: 10px;
    border-left: 6px solid #111;
    border-bottom: 2px solid #111;
}

同様にh3、h5のCSSを抜き出しましょう。

.entry-content h3 {
    position: relative;
    font-size: 145%;
    padding: 6px 10px;
    color: #111;
    background-color: #eee;
    border-left: 12px solid #111;
}
.entry-content h3:before {
    content: " ";
    position: absolute;
    top: 100%;
    left: 28px;
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #eee;
}

.entry-content h5 {
    font-size: 120%;
    padding-left: 6px;
    border-left: 4px solid #111;
}

後はこのCSSのh3,4,5の数字部分を4,5,6にしてデザインCSSに貼り付けるだけです。

デザインCSSに登録

「デザイン」->「カスタマイズ」->「デザインCSS」に先ほど入手した見出しCSSを番号をずらして記入します。このとき、もとのスタイルに新しいスタイルを上書きするわけです。元のスタイルの要素を上書きできない場合は、要素:noneで上書きしておきましょう。

.entry-content h6 {
    font-size: 120%;
    padding-left: 6px;
    border-left: 4px solid #111;
}
.entry-content h5 {
    font-size: 135%;
    padding-left: 10px;
    border-left: 6px solid #111;
    border-bottom: 2px solid #111;
}

.entry-content h4 {
    position: relative;
    font-size: 145%;
    padding: 6px 10px;
    color: #111;
    background-color: #eee;
    border-left: 12px solid #111;
    border-bottom:none
}
.entry-content h4:before {
    content: " ";
    position: absolute;
    top: 100%;
    left: 28px;
    width: 0;
    height: 0;
    border-width: 12px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #eee;
}

ずらした見出し番号の差異として、border-bottom:noneを追加しました。これを追加しないと、h3のスタイルを表示しているつもりなのに、元からあるh4のスタイル「下線」が追加されてしまいます。

これを入力します。

f:id:neet-utsu-taro:20170913230952p:plain

確認

見出しを並べてみて記事のプレビューから、確認してみましょう。

f:id:neet-utsu-taro:20170913234642p:plain

変更前は

f:id:neet-utsu-taro:20170910000655p:plain

変更前のh3のテーマがh4に、変更前のh4のテーマがh5に、変更前のh5のテーマがh6に
見事にずれてますね。成功！

終わりに

この方法を応用すれば、h1、h2のスタイルもh3やh4にコピーすることができます。せっかく見事なテーマを作ってくださったのに、ブログのデフォルトではh3~h5しか使われないのはとても悲しいです。皆さんもお気に入りのテーマの見出しを見比べてみて、ずらしてみるのもいいかと思います。

CSSをコピーするときは全角スペースやコメントアウトに気を付けましょう。私はそれでしばらくにらめっこしてました。 ここまでご覧いただき、ありがとうございます。

またね(‘ω’)ノ

  1. 下書き完成後に知りました。「デザイン」→「カスタマイズ」→「デザインCSS」の中にあるURLhttp://hatenablog.com/theme/○○○.cssをブラウザで確認すれば見れます。↩

ニートの私が早朝にコンビニへ徘徊する話

その他

昨日の夕方。私は不意に思いました。自分だけのドメインが欲しい！

そう、proに登録して自分だけのドメインを使いたいのです。レンタルサーバーを借りて、自分で作ったプログラムを自動で動かしたい。たくさんしたいことがある。そう思ったんです。でも、ドメイン契約するためにはお金を振り込まなきゃいけないんですよね。クレカはproの無料期限のために使いたいですし。できるだけクレカ使いたくない。でも外に出なきゃ…って思っていたら、コンビニ支払いってのがあったんです。

コンビニによくあるATMのちっちゃいやつですね。ながーいレシートが出てくるやつです。

コンビニなら、人がいない時間もやっているんじゃ？人が少ないなら外に出ても大丈夫なんじゃないかな？

よし、早朝出かけてみよう！

ということで昨日は早く寝ることにしました。

翌朝…朝の5時半くらい

f:id:neet-utsu-taro:20170920190754j:plain

やばい、結構明るい…( ﾟДﾟ)

もうちょっと暗いのを想像してましたが、意外と明るくてびっくり！そして何よりも

人がいない

なんだか歩いてて、安心して泣きそうでした。久々に外を平常心で歩けた気がします。

コンビニまで歩行者2人、車5台とすれ違いました。1対1なら相手を見てこちらを見てないことが分かり、それほど動悸も上がりませんでした。これが複数人になると( ﾟДﾟ))))

コンビニも機械相手にピッピッ、店員さんにそっとレシートを渡す。一言もしゃべらずに済めるって素晴らしい。店員さんに聞こえていないけどぼそっと「ありがとうございます」と言ってミッション終了！

緊張しましたが、それほど苦しくなくてよかったです。それよりも久々に外に出れて嬉しい！

ただ、私完全に不審者ｗ

でも、この時間なら外に出ても大丈夫そうなので頑張って散歩してみようかな。
この後、DNSの設定で四苦八苦し、夕方まで格闘してたのは内緒

↓DNSの設定をして、試しにサイトを2つ立ち上げました。

neetaro.comの手前（サブドメインまたはホスト名1）を変えることで、別会社の別サーバーを使うことができました！

これがやってみたかったんだー

またね(‘ω’)ノ

  1. にしのさんのブログで自分の間違いに気づきました。追記日（9/22）どうやら間違いでない場合もあるようです。追記日(9/23)

    ネスペのあれれ？　その１　ホスト名・ドメイン名・ＦＱＤＮ？ - にしのくえすと

    さっき記事でサブドメインとか適当なこと言ってしまったー(´;ω;｀) ホスト名だったのかー ・・・(・ω..:..:..::..:.::.::

    2017/09/20 22:27
    ↩

祝！読者登録50人達成！＆月間PV1000初達成！ ニートの私がブログを続ける理由

はてなブログ その他

先日読者が20人になりました。 neet-utsu-taro.hatenablog.jp

ありがたいことに、昨日読者登録数が50人を突破して54人になりました！本当にありがとうございます。

f:id:neet-utsu-taro:20170919132657p:plainf:id:neet-utsu-taro:20170919132138p:plain

同時に月間PV1000を初達成しました！嬉しいです( ;∀;) (人'‘▽｀)ありがとう☆

改めて、記事を読んでくださった方々、スターをつけてくださった方々、ブックマークしてくださった方々、読者登録してくださった54名の方々

神様、なすねむさん、硬いアンパンさん、にーちさん、softwindさん、ノロい人さん、サクさん、改善10さん、高崎ちはるさん、自由気ままなねこさん、yojichichikunさん、ふみさん、関口にこすさん、川花書房さん、わしさん、sorairo2000さん、5セカンズシャインさん、エディットマンさん、Xi藤さん、ryozen0806さん、OWET45さん、A0Iさん、don_chanさん、こーちゃんさん、redphosさん、kimashufuさん、サラリーマンXさん、やがみんさん、tanisuke_strさん、LONさん、イワカズさん、nunkoro01さん、にしのさん、豆ゴロさん、ぶんちゃんさん、nari1080さん、すみさやかさん、逢坂和希さん、Akira1227さん、johさん、ランフィエフさん、VITAFULさん、takuouraさん、餅夫さん、はやぶささん、たんたんさん、bo-yutoさん、鵺さん、onlythegooddieyoungさん、Playlist4444さん、前 勉太郎さん、saooo28さん、かんいちさん、ポニーさん

本当にありがとうございます！

頑張るぞぉ

これから自己紹介というか、そういったものを書きたいと思います。見ていただけたら嬉しいです。

なぜニートになったのか

私は就活に失敗してニートになりました。いわばニート科就活失敗属ですね。といっても就活で失敗したのが引き金で、いじめを受けていたことや、両親の離婚等の昔からのストレスが積み重なって弾けたことだと思います。

人の視線や人前で話すことにすごく緊張して、外に出られないほどです。宅配便や郵便局の方が家に来ても、あらかじめ知っていないと動悸が激しくなって対応できません。居留守してしまいます(ごめんなさい)。

自分のことをこう分析することができても、いざ外に出ると直帰してしまいます。

なぜニートの私がブログを始めたのか

最初の理由はありません。たまたま始めました。今は自分の考えを文字に起こすことで、擬似的な会話の練習をしていると考えています。

なぜ就活に失敗したのか

数年引きこもり生活をしてようやく冷静に考えられるようになったので、いろいろと考えてみました。

1.コミュニケーション能力の欠如

そもそも人と話すことが苦手な私は、面接でまともな受け答えができませんでした。何を聞かれても答えを返さなきゃという圧迫感が高まって、質問の意味や、自分が何を言っているのかすらわからなくなってしまいます。

面接官「うちがどんなことやってるか知ってる？(どんなことでもいいから知ってるのかな？)」
私「（色々と調べてきたけど、社員しか知らないようなもっと深い部分を聞かれているのかな？）そんなに詳しくは知らないです」

など、落とされて当たり前のようなレベルのやり取りをしていたなぁと思います。まあ、面接官とも会話も続かなかったし、目もちゃんと合ってなかったんだろうな…(´;ω;｀)

2.相手（企業）に対する興味の欠如

そもそも友達もいなかった私は他人へ興味を持つことがなく、それが企業に対しても同じだったといえます。

3.自分への分析を怠ったこと

自分にどんな長所や短所などがあるのかを真面目に考えていなかったのかなぁと思います。

自分が面接での受け答えが苦手ならば、履歴書などに恥ずかしくてもその旨を伝えるべきでした。また、病院等に行って緊張や動機を抑える薬をもらいに行けばよかった。と思います。自分の欠点を認識してはいても、事の深刻さに気付かず、対処もしなかったなぁと今でも思います。

ブログを通して、外に出られる勇気と最低限のコミュ力を学びたい

私は見出しのようにブログを通して少しでもこの生活を抜け出す努力をしたいと思っています。

ブログの読者さんやTwitterの方々に直接会話することはなくとも、それぞれの関係を持つことで、ほんの少しでもコミュニケーション能力を高めることにつながると思います。ほんの少しでもです。何もせずに家でぼーっとするよりかはほんの少しでも伸びると思います。

また、読者さんのブログや日々のニュースを見ていろいろ考え、記事にすること。これは、自分が他人や物事に興味を持つという良い訓練になると思います。約50人もの読者さんのブログは十人十色の内容で、彼ら彼女らがどのような記事を書き、どのように感じているのかを目を通して感じていきたいと思います。人の目を見なければ少しは頑張れると思うんだ…

終わりに

ここまでご覧いただき、ありがとうございます。

頑張ってプログラムを書いたり、ネットやニュースを見て疑問に感じた事を自分なりに見つめて記事にしたり、読者さんのブログを見たりして、私の頭を少しづつほぐして勉強していきたいと思います。それが、自信となってニートからフリーターや社会人になれる日が来ると信じています。毎日外へ向かうことをあきらめずに続けたいと思います。

興味のない方もいると思われるプログラミングの話やちょっと変なことや変な文章を書いてしまうかもしれませんが、これからもよろしくお願いします。

本当にありがとうございます！

またね(‘ω’)ノ

Kuin言語をいじってみた 【くいなちゃん】

Kuin プログラミング 環境構築

こんにちは、鬱太郎です。今日は新しいプログラミング言語「Kuin」をいじってみたのでそれについてまとめたいと思います。いろいろな言語に手を出すのは大事（飽きっぽいとか言わないで）。

注意！ アニメキャラなどが登場します。アニメキャラ（いわゆる萌えキャラ）が苦手、生理的に無理な方はブラウザバックを！

Kuin言語とは

公式サイト

プログラミング言語「Kuin」 - Kuina-chan

Twitter

特徴

簡単

  • 2D・3Dグラフィックス描画やサウンド再生などを標準でサポート。
  • 高機能でありながら、余分な複雑さを徹底的に排除したシンプルな設計。
  • プログラムの開発効率を高めるオブジェクト指向言語。
  • ガベージコレクション搭載により、メモリ領域の解放処理が不要。
  • 文字列型、リスト、スタック、キュー、辞書型などを言語レベルでサポート。
  • 2進数が記述可能など、細かな部分まで実用を重視。
  • 他の言語で作成したDLLの呼び出しが可能。
  • そのほか便利な機能はなるべく標準でサポート。
  • 何もプログラムを書かなければ、自動で「Hello, world!」になる。

高速

  • コンパイル速度が極めて速く、1,000行程度のプログラムが0.2秒でコンパイル可能。
  • バーチャルマシンを介さないCPUネイティブの機械語を生成するため、実行速度も速い。
  • 画面描画にはGPUを駆使するため、2D・3Dグラフィックスの描画も高速

2Dや3Dの表示に特化した言語でしょうか？私はUnityやOpenGLといったグラフィックを対象としたプログラミング言語は全くなので楽しみです。GC機能がついてるのはいいですね（さらばmallocよ）。ゲームなどを開発すると 構造体のようなオブジェクト指向もどきをよく使うので、元からオブジェクト指向であるのはゲーム開発などがやりやすいと思います。

GPUを自動で使ってくれるようですね。初心者に優しい(‘ω’)

KuinとQueenが読み方が似てるのもなんかいいですね。高級感あふれる感じです。くいなちゃんが女王蜂でプログラマが働き蜂ということなのかも…

くいなちゃん

最近フォローして知ったもので、彼女？のことについて詳しく知らないです。中の人（開発チーム）が何人かいるらしいです。マスコットキャラですね。

f:id:neet-utsu-taro:20170918125142j:plain

日本特有の擬人化の業

なんでも擬人化する日本人のクリエイターたち… 嫌いな方もいると思います。私はそういう感想はなくやっぱりクレイジーだぜ…（褒め言葉）と感心してます。

戦艦

f:id:neet-utsu-taro:20170918131443j:plainf:id:neet-utsu-taro:20170918131451j:plain

刀

f:id:neet-utsu-taro:20170918131602j:plainf:id:neet-utsu-taro:20170918131615p:plain

プログラミング言語

f:id:neet-utsu-taro:20170918131856p:plainf:id:neet-utsu-taro:20170918125142j:plain

くいなちゃんがKuinの擬人化というわけではなさそうですが、こう見てみると皆さん業が深い！クールジャパンの象徴みたいな感じですね。

世界のプログラミング言語との比較

f:id:neet-utsu-taro:20170918133612p:plainf:id:neet-utsu-taro:20170918133615p:plain

左6つが外国発、右が日本発のプログラミング言語です。世界には数では勝てません（紹介した以上にプログラミング言語があります）がかわいさでは勝っています(ここ重要)

また、日本には参考書もキャラクターを付けて売り出しています。

f:id:neet-utsu-taro:20170918133953p:plain

当時の同級生曰く、「中身はわかりやすくてまとも」と言ってました。彼は恥ずかしくてカバーを外してましたがｗ

Kuinもそんなとっつきやすい言語なのかなぁと思って触ってみました。

Kuinをインストールしよう！

公式サイトからzipファイルをダウンロードする

公式サイトはプログラミング言語「Kuin」 - Kuina-chanです

f:id:neet-utsu-taro:20170918135421p:plain

ここからダウンロードしましょう。

f:id:neet-utsu-taro:20170918135553p:plain

2.9MB！小さいぞ

zipファイルを展開する

ダウンロードしたzipファイルをお好きな場所に展開！

f:id:neet-utsu-taro:20170918135737p:plain

これでインストールは完了。早い！

実際に動かしてみよう！

フォルダ内にある「kuin」もしくは「kuin.exe」をダブルクリック。

f:id:neet-utsu-taro:20170918140020p:plain

上のような画面が出るときは「実行」を押しましょう。実行すると開発エディタが出現します。右上の「コンパイル＆実行」をクリックして実行しちゃいましょう。

f:id:neet-utsu-taro:20170918140406p:plain f:id:neet-utsu-taro:20170918140351p:plain

…おや

f:id:neet-utsu-taro:20170918140556p:plain

ウイルス対策ソフトに引っかかってしまったようですね。私が使用しているavastはしばらく精査した後、ウイルスではないと判断し、コンパイル・実行が再開されました。

f:id:neet-utsu-taro:20170918140607p:plain

ウイルス対策ソフトに引っかかってしまいましたが、無事成功しました。

リリースビルドをしてみよう

Kuinは右側にあるリーリスビルドボタンからリリースファイルを自動生成してくれます！いぇい！

しかもzip形式にまでしてくれてとても親切です。早速ビルドファイルを作ってみたので良ければダウンロードして、実行してみてください。（ただHelloWorldと表示されるだけですが）

goo.gl

ウイルス対策ソフトに引っかかるかも(´;ω;｀)

avastの監視対象から除外しておこう

毎回プログラムを精査されてしまったら、せっかくのコンパイルや実行速度が速いというKuinの利点を失うことになります。そこで、ウイルス対策ソフトの監視対象から除外しましょう。自己責任です

avastの設定画面を開き、「一般」→「スキャンから除外」を選択し、

C:\Users\user_name\AppData\Roaming\Kuin

を選択しましょう。スクショのようになってればOKです。

f:id:neet-utsu-taro:20170918142358p:plain

kuin.exeの場所ではなく、プログラムがexeファイルを生成するtmpフォルダを含む場所を除外しないといけません。それが、

C:\Users\user_name\AppData\Roaming\Kuin

です。

私はAvastを使用しているのでAvastの対策方法を紹介しましたが、別のウイルス対策ソフトを使われている方も、上記のパスを同じようにスキャン除外フォルダの項目に追加すればウイルス対策ソフトの監視対象から除外できると思います。

サンプルプログラムを動かしてみよう！

Kuinにはいろんなサンプルプログラムがあるので動かしてみましょう。公式サイトにある100までの素数を表示させるプログラムをコピペしてみました。

func main()
  for i(2, 100)
    var b: bool :: false
  
    for j(2, i - 1)
      if(i % j = 0)
        do b :: true
      end if
    end for
  
    if(!b)
      do cui@print("\{i}\n")
    end if
  end for
end func

f:id:neet-utsu-taro:20170918144959p:plain

フォントや予約語に色がついて見やすいですね。言語はif～endifのように｛｝を使わないパターンですね。｛｝を使った言語は、コードが長くなると、その括弧がなんの括弧かを見づらくなってしまうんですよね。統合開発環境のようなリアルタイムでエラーをはいてくれるエディタを使えば問題ないですが、そういうエディタって重いですからね…

話がそれてしまいました。それでは、実行します。

f:id:neet-utsu-taro:20170918145503p:plain

ほげぇ…？あ！

cui@print(...)

ですね！今実行しようとしてるのがgui（ウィンドウ）なのでcuiのライブラリを使おうとしてエラーが出たわけです。ドキュメントを見るとgui用のデバッグ出力メソッドがあるようです。

dbg@print(...)

ですね！これにコードを変更します。そして実行します。

f:id:neet-utsu-taro:20170918145856p:plain

びゅーてぃふぉー

でも出力した数字の行間が気になります。ちょっと修正しましょう。

dbg@print("\{i}\n")

の改行を取ります。

dbg@print("\{i}")

そして実行！ f:id:neet-utsu-taro:20170918150059p:plain いいですね！

おそらくdbg@printメソッドそのものに改行要素が含まれているのでしょう。ドキュメントには書かれていませんでしたので謎ですが。

まとめ

Kuinのここがすごいところをまとめてみました。現段階でかつ、プログラマ初心者の私の意見で申し訳ありません。

  • 環境構築が1分で済む
  • 実行確認が1分で済む
  • エディタが軽い上に見やすい
  • エディタのデフォルトの状態で予約語等に色がついている
  • エディタがシンプルでコンパイル実行やビルド作成がしやすい

というところでしょうか？まだ私は深い部分まで使っていないので、開発した結果の使用感はお伝えできません。ごめんなさい(´;ω;｀)

あとドキュメントの設計の理由ってとこを見てるとなるほどなって勉強になります。

Kuin is Queen

ケアレスミス確認中に

記事の誤字脱字などを確認しながらプレビュー画面を眺めていたら、こんなものを発見しました。

f:id:neet-utsu-taro:20170918155030p:plain

よく見るとサンプルプログラムをコンパイルする前にエディタがエラーをはいていたんですね。エラー行が赤くなったりするわけではないので最初は気づきませんでした。

リアルタイムで監視してくれてたんですね！

素晴らしい！(‘ω’)

Kuin is Queen！

終わりに

Androidアプリの動画を作ろうと思ったらTwitterのタイムラインにKuinのことが流れてきて、少しはまってしまいました。電卓アプリを作った後、リバーシゲームのAndroidアプリを作ってみようと思っています。その後に、Kuinでリバーシゲームを作れたらなと思います。

ここまでご覧いただき、ありがとうございます。プログラムに興味のない方には申し訳ないと思っていますが、少しでもプログラムに興味を持っていただけたらなと思います。

読者登録ありがとうございます！すごい励みになってます。(人'‘▽｀)ありがとう☆

またね(‘ω’)ノ

Androidの簡単な電卓アプリを作ろう レイアウト編

Android Java プログラミング 未完成

こんにちは、鬱太郎です。今日は、念願のAndroidアプリの作成です。比較的、簡単そうな電卓アプリを（デザインだけ）作ってみましたのでそれをまとめたいと思います。四則演算だけ！マイナスも考慮しないよ！面倒だから！ f:id:neet-utsu-taro:20170914063241p:plain

過去の記事

Android Studioをインストールしていない方はこちら neet-utsu-taro.hatenablog.jp

解説動画

鋭意製作中(´;ω;｀) ごめんなさい！

どんなアプリを作るのかをイメージしよう

簡単な設計図を描いてみよう

なんとなくでよいので簡単な設計図を書きました。下手でごめん！( ;∀;) f:id:neet-utsu-taro:20170914042624p:plain 見た目だけでなく、いろいろと制約も書いておきます。できるだけ機能を削ったデザインにしておきます。

フロント（デザイン）部分を抜き出してみよう

最初に作った設計図にデザインに特化した説明を書きたしました。

f:id:neet-utsu-taro:20170914085806p:plain

定義

下の様な計算を電卓アプリでしようとします。

a + b = c

その場合、ここの記事では

要素 名称
a 被演算子(左方)
b 被演算子(右方)
c 計算結果および被演算子(右方)
+,-,×,÷,= 演算子

として扱います。

実際に作ってみよう

今回はGUI形式でレイアウトしていきます。よくわからない方はXMLファイルのところに設定ファイルがあるので参考にしてください。もしくは解説動画をご覧ください。

1.数値表示部分とボタン部分を分けるためのLinearLayoutを追加

f:id:neet-utsu-taro:20170914131942p:plain

上の図のように数値表示部分とボタン部分を大きく分けるためにLinearLayout（vertical）を最初にあるConstraintLayoutの中に追加します。

f:id:neet-utsu-taro:20170914132612p:plain

LinearLayoutの各要素を下の表にまとめました。

変数名 値
android:layout_width match_parent(0dp)
android:layout_height match_parent(0dp)
android:orientation vertical
android:layout_marginEnd 16dp
android:layout_marginLeft 16dp
android:layout_marginRight 16dp
android:layout_marginStart 16dp
android:layout_marginTop 24dp
android:weightSum 1
app:layout_constraintBottom_toBottomOf parent
app:layout_constraintLeft_toLeftOf parent
app:layout_constraintRight_toRightOf parent
app:layout_constraintTop_toTopOf parent

外周から一定のサイズ隙間を作ります。下のgifのように操作しましょう（説明放棄・・・( ;∀;)）。 f:id:neet-utsu-taro:20170914102757g:plain

同様に下、左右の隙間を作ります。もしくは、変数表を参考に数値を記入しましょう。下の図のようになったら完了です。 f:id:neet-utsu-taro:20170914101704p:plain

2.数値表示部分

f:id:neet-utsu-taro:20170914133401p:plain

2-1.上下のレイアウトを分けるためのLinearLayoutを追加

先ほど作ったLinerLayoutの中の一番上に数値表示部分を追加していきます。

f:id:neet-utsu-taro:20170914134045p:plain

LainearLayoutの要素を表にまとめました。

変数名 値
android:layout_width match_parent
android:layout_height 50dp
android:orientation vertical

これらの値を入力したら完成です。

f:id:neet-utsu-taro:20170914134931p:plain

2-2.上の部分に被演算子（左方）を表示するTextViewを追加

先ほど作ったLinearLayoutの上部に高さ15dpのTextViewを追加します。

f:id:neet-utsu-taro:20170914140344p:plain

追加するTextViewの要素を表にまとめました。

変数名 値
android:id sub_number_tv
android:layout_width match_parent
android:layout_height 15dp
android:text subNumberTV

これらの値を入力しましょう。その結果が下のスクショです。

f:id:neet-utsu-taro:20170914141544p:plain

2-3.下の部分に演算子用と被演算子（右方）と分けるためのLinearLayoutを追加

先ほど追加したTextViewの下の部分にLinearLayoutを追加します。

f:id:neet-utsu-taro:20170914142206p:plain

LinearLayoutの要素を表にまとめました。

変数名 値
android:layout_width match_parent
android:layout_height match_parent
android:orientation horizontal

この値を入力しましょう。

f:id:neet-utsu-taro:20170914142722p:plain

2-4.演算子用のTextViewを追加

先ほど追加したLinearLayoutの左側に演算子を表示するためのTextViewを追加します。

f:id:neet-utsu-taro:20170914143417p:plain

演算子は一文字なのでフォントサイズ大きめの30spで中央ぞろえにします。詳細を表にまとめました。

変数名 値
android:id op_tv
android:layout_width 50dp
android:layout_height match_parent
android:layout_weight 0
android:text ＝
android:textAlignment center
android:textSize 30sp

入力した結果がこちら

f:id:neet-utsu-taro:20170914144350p:plain

2-5.被演算子（右方）のTextViewを追加

今度は右側にTextViewを追加します。

f:id:neet-utsu-taro:20170914145027p:plain

右から文字が始まることに注意しましょう。

変数名 値
android:id main_number_tv
android:layout_width match_parent
android:layout_height match_parent
android:layout_weight 1
android:text mainNumberTV
android:textAlignment textEnd
android:textSize 30sp

入力結果はこちら

f:id:neet-utsu-taro:20170914145633p:plain

2-6.被演算子（右方）の右に詰め物を追加

実際にデザインを作ってみて、右揃えの際にもう少し余白が欲しいと思いました。そこで新しいレイアウトを追加して余白を作ろうと思います。TextViewのmarginやpaddingで事足りますね。勉強不足で申し訳ありません。 f:id:neet-utsu-taro:20170914153826p:plain

ConstraintLayoutの要素は主にwidthの10dpとweightの0です。

変数名 値
android:layout_width 10dp
android:layout_height match_parent
android:layout_weight 0

下の結果を見るとほんのちょっと隙間が追加されてますね。

f:id:neet-utsu-taro:20170914154048p:plain

3.ボタン部分

f:id:neet-utsu-taro:20170914154753p:plain

3-1ボタンを配置するためのTableLayoutを追加

1章で追加したLinearLayoutの中の下にボタン部分を表示させるTableLayoutを追加します。

f:id:neet-utsu-taro:20170914163350p:plain

TableLayoutは縦横ともにmatch_parentです。

変数名 値
android:layout_width match_parent
android:layout_height match_parent
android:layout_margin 10dp
tools:layout_editor_absoluteX 8dp
tools:layout_editor_absoluteY 8dp

入力した結果がこちら

f:id:neet-utsu-taro:20170914163239p:plain

3-2TableLayoutにTableRowを追加

TableLayoutにTableRowを合計5個追加していきます。デフォルトで4個追加されているのであと一個追加しましょう。

f:id:neet-utsu-taro:20170914164835p:plain

気を付ける要素としてそれぞれのTableRowにlayout_weight=0.2と設定することです。TableRowの要素を表にまとめました。各TableRowにこの値を入力していきます。

変数名 値
android:layout_width match_parent
android:layout_height match_parent
android:layout_weight 0.2

weightを設定するとしっかりと5等分されていると思います。

f:id:neet-utsu-taro:20170914165425p:plain

3-3TableRowにButtonを追加

各TableRowにボタンを追加していきます。4，4，4，4，2個Buttonを追加していきましょう！

f:id:neet-utsu-taro:20170914170004p:plain

Buttonにはlayout_widthとheightにmatch_parentを設定しておきましょう。追加すると次のようになります。

f:id:neet-utsu-taro:20170914170523p:plain

3-4各Buttonのフィールドを設定

各ボタンにそれぞれのIDや数値、textSizeなどを追加していきます。

f:id:neet-utsu-taro:20170914171127p:plain

追加する値は

変数名 値
android:id bn
android:layout_width match_parent
android:layout_height match_parent
android:layout_weight 1
android:text n
android:textSize 30sp

です。

nは0~9の数値です。演算子やC、ACなど特殊なものは

text id
+ bplus
- bsub
× bmul
÷ bdev
= beq
C bc
AC bac

としました。その結果がこちらです。

f:id:neet-utsu-taro:20170914172127p:plain

4.数値表示部分とボタン部分の間に詰め物を追加

上のTextViewとTableLayoutが少し近いと思ったので間に隙間を入れます。

f:id:neet-utsu-taro:20170914180010p:plain

ConstraintLayoutの各要素は

変数名 値
android:layout_width match_parent
android:layout_height 15dp

です。

f:id:neet-utsu-taro:20170914175349p:plain

これにてすべての作業が終了しました。やったぜ！

XMLファイル

GUIで作ったレイアウトの設定ファイルです。これをコピーすれば同じレイアウトが表示されます。

apkファイル

今回作った段階でアプリケーションインストーラを作りました。

goo.gl

良ければインストールして「ふーん」と思ってください。

レイアウトしか作ってないのでボタンとか押してもまだ動きませんが…ｗ(´;ω;｀)ｗ

AndroidのOSやブラウザ、ウイルス対策ソフトによってはうまくダウンロードできないかもしれません。 かなしい(´;ω;｀)

ブラウザ変えてダウンロードしてみるとダウンロードできるかも？(‘ω’)

動かしてみよう

レイアウトのビューで不具合がなくても実行してみるとレイアウトが崩れていたりすることもあります。試しに実行してみましょう

f:id:neet-utsu-taro:20170914071352p:plain

正常ですね！ちなみにボタンを押しても何も動きません。レイアウトしか作ってませんからね。

終わりに

自分でレイアウトするのと記事でまとめるのでは労力が段違いですね…

毎日ちょくちょく記事を書き貯めてようやく公開できました！

でもこれからも頑張っていきます

またね(‘ω’)ノ

話は変わりますが、読者登録してくださった方ありがとうございます。嬉しいです(´;ω;｀)

次回の記事

制作中