RailsでWEBアプリを作って海外移住

30歳にしてサラリーマンをリタイア、WEBの世界で、ご飯を食べて、海外移住に挑戦

scrollHeightについて調べてみた

こんにちは、ScrollHeightって何?

普通に生活していたら、こんな小さいなことは気にならないんだけど、プログラマーってすっごいちっさいことまで気にしないといけない。
今日は、このScrollHeightについて調べてみる。

まず、Javascriptといえば、MDNのサイトを調べるのが鉄則です。
このMDNでは、Web関係の開発者向けの情報が網羅されています。

で、ここから抜粋すると。

The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element's padding, but not its border or margin.

簡単に訳してみると、オーバーフローでスクリーン上で見えないコンテンツも含めた、エレメントの高さの測定結果だそうです。詳しく言うとエレメントのパディングも含まれているそうです。

また、こちらのサイトによると、ピクセルで整数のint型を返すと書いてあります。


さらに、注意深くよむと、値を四捨五入すると書いてあります。これは要注意です、。


じつはJqueryにもサイズを図る機能を持った関数があります。

InnerHeightってなんぞや


InnerHeightについては、ここで詳しく書いてありますね。書いてある内容はClientHeightと一緒ですが、気になる注意書きがありました。

  1. The number returned by dimensions-related APIs, including .innerHeight(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
  1. The value reported by .innerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .innerHeight(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

注意書きみたいな感じで書いてあった。でも、ClientHeightを知っている人にはこっちのほうが知りたい情報なはず。で、大事なポイントは、ユーザーがブラウザをズームしちゃうと、サイズが正確に取れません。。。って書いてある。あとは、Parentが表示されてなくてもダメなんだとか。でも、100%じゃなかったら、どっちみちClientWidthとかもあてにならないらしい。

ということは、JqueryのinnerHeightとClientHeightを比較してしまうと場合によっては値が違うっていうことですね。絶対にしないようにしましょう!!

で、このブログで何が言いたいかっていうと、LineHeightを変更すると、ScrollHeightも変わってしまうっていうこと。
そして、lineheightってfontsizeと深いかかわりがあるから、もし、lineheight が12pxで、fontsizeも12pxの時に、scrollHeightがオーバーフローしていたら、値が変わることがあるみたい。

言っている意味がさっぱり分からないと思います。笑 テストしてみた結果、ある決まったWidthとheightの中でScrollheightが48pxだったとして、このLineheightが24pxだったら、2行で表示されます。でも、もしこのLineHeightを12pxに変更して、高さが一定のままだったら?どうなるか。ScrollHeightは24になるかなって思ったら25になりました。。

実は、同じ12pxでも、若干、fontsizeのほうが大きくなってるみたいなんです。これは最初に書いた、四捨五入のせいだっりします。

もし詳しいことがわかる人は、ぜひ教えてください。

npm run server error No such file or directory エラー

みなさんこんにちは!

今日は、エラーのお話です。npm runってコマンドを打ってエラーがでてあせったことないですか?

こんな感じの。。。


ERR! enoent ENOENT: no such file or directory, open '/Users/justin/package.json'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! /Users/npm-debug.log


結論いうと、実行しているディレクトリの階層まちがえてる可能性大です。

よく見て!!!!

以上ですw

Lenovo ideapad yoga 11SをWindows10にアップグレードしたらWIFIが使えなくなった

みなさん、こんにちは!語学交換サイト39の管理人ケンタリートです。今回は私が愛用しているノートパソコン、Lenovo ideapad Yoga 11SをWindows10にアップグレードしてみたお話です。

f:id:kentarito:20160516135220j:plain

アップグレードをまず試みたのは、実は5月ぐらいです。試みたのではなく、自動で始まってしまいました。とてもびっくりです。新しいデスクトップは使いやすく、満足したのですが、WIFIが接続できませんでした。そもそも、LANケーブルの差し込み口がないパソコンでWIFIが使えないっていうのは最悪。ドライバーのアップデートもできないし、お手上げです。そこで、とりあえずwindows 8に戻してみたのですが、昨日の夜また、自動でアップデートが始まってしまいました。また、改めてWindows 10デビューです。しかし、嬉しいことに今回はWIFIに接続ができます。
もしみなさんも、同じようなことになっても、Windows 10を入れ直したら、うまくいくかもしれませんよ! それでは!

青年海外協力隊むけ健康診断とは?

f:id:kentarito:20160819185148j:plain

みなさんこんにちは語学交換サイト39の管理人ケンタリートです。今日は海外移住についての方法ということで、青年海外協力隊を取り上げてみたいと思います。その中でも、特に気になるのは、提出書類にある健康診断です。いや、私だけかな。笑

青年海外協力隊とは?

青年海外協力隊は、海外でボランティアをするプログラムです。種類も半年ぐらいの短期のものから、2年までの長期のボランティアがあります。
詳しくは、オフィシャルホームページでご確認ください。グーグルで検索するとたくさんの情報がヒットすると思います。しかし、健康診断についてはいまいちわからない。

健康診断とは

はい、海外青年協力隊のホームページ上では、2から3万円する?とありましたが、検索してみるとどうやら、14,000円(2016年8月現在)のようです。健康診断は、お近くの内科で受けることができます。住んでいる都道府県と健康診断で検索すると近くの健康診断を発見できますよ!このプログラムの血液検査はたくさんの項目の検査が必要なので都道府県でしている保健所では検査項目を網羅できない可能性があります。私の住んでいる広島県ではできません。ですから、必ず病院まで行って書類を見せて健康診断を受ける前に確認しましょう。

1元で日本から上海に行く方法

みなさんこんにちは!外国人を日本で案内するサイト 39の管理人ケンタリートです。友達が1元で上海にいける!と言っていたいので、紹介されていたホームページを確認してみました!やはりいつもの春秋航空です。しかし、日本語のページには残念ながらそのようなセールの情報はありません。

でも、中国語のページに行くと書いてある内容が違いました!

f:id:kentarito:20160819003934j:plain

おお!!量販式の性感!!私の中国語力?だとよく意味がわからないですが、このページをスクロールダウンすると!ありました!

f:id:kentarito:20160819004059j:plain

1元です!8月22日からの限定販売だそうです!見逃せないですね!はやくアカウントを作らないといけないのに、中国語がわからない。こういう時、中国語を勉強しておけば良かったと後悔しますよね。涙


上海のみなさんぜひ待ってください!また遊びに行きます!!

儲かるブログにする方法を実践しようとしてみた

こんにちは39の管理人ケンタリートです。一年ちかくも儲からないサイト運意をしてきました。そろそろ少しぐらいお金を稼いでいもいいのではないか?ということで、下記のサイトを参考に今回は、儲かる方法を実践(PVを稼ぐ)していきたいと思います。

bazubu.com


まず、私がもっているサイトたちはこちら。

  1. Language Exchange 39
  2. RailsでWEBアプリを作って海外移住ブログ
  3. Facebook Page
  4. Twitter Account (予定)

実は、今からやることはブログを始める前にやらないといけないそうです。

  • コンセプトの策定
  • 数字目標の設定
  • コンテンツカテゴリーの決定
  • キーワードポートフォリオの作成
  • コンテンツアイデアリストの作成
  • コンテンツ作成スケジュールの決定
  • デザインと導線の決定

1.ブログ・コンセプトの策定

さきほどのブログを参考に、5W1Hの方法で考えていきます。

RailsでWEBサイトを開設したい人と、海外で活躍したい人をターゲットに、WEBサイトの作り方と、語学学習の悩み、海外旅行で直面する問題の解決。語学学習、海外旅行の悩みは、39のページで言語学習パートナーを探してもらう。WEBサイト開発については、ここで私が直面した問題を紹介それから、解決方法をレクチャーしていきます。もちろん、語学学習等のサポートもここでできたらいいな!

2.数字目標の設定

冬までに一日のPVが50を超える

3.コンテンツカテゴリーの決定

なんだこれは!

難しくてもう何がなんだからわかないので従うのをやめよう。


それでは!