俺のクソレシピ

おもにプログラミングについて俺の趣味についてテキトーに書いています。

JavaScriptでdocument.getElementByIdを使わずid取得

みなさんこんにちは。次のJavaScriptの記事はアラームだとか書いたんですが、ちょっと面白いこと見つけたので、この記事を先にアップしちゃいました。

f:id:myprogramming:20170626201822p:plain

document.getElementById

皆さん、JavaScriptでidを取得するときどうしていますか?俺は、document.getElementByIdを使っています。ですが、さっきdocument.getElementByIdを書き忘れていることに気づいて、しかも、それでエラーも起きないでちゃんと動いていたんです!

document.getElementByIdを使わないid取得

詳しく説明させてもらうと、そのままなんですが、document.getElementByIdを使わないで、他にも何も使わないで、idを取得できたんです。実際にプログラムを載せておきます。

f:id:myprogramming:20170715184037j:plain

これで、ちゃんと画像のようにalertされるんです。ちなみに、確認したのはandroidwindowschromeです。

まとめ

皆さん、どうでしょうか、あの長いメソッドを書かなくてもすみますよ!でも、どのブラウザが対応しているのか分からないので、これが本当に使えるかは分かりません。俺も普段、document.getElementByIdを使っていて、考えもしなかったので、よく分かりません。何か詳しく知っている方がいたら、ぜひ教えてください!!では、さようなら!

スマホでHTML編集!

今回は、スマホで使いやすいHTMLエディタがあったので紹介します。

an Writer free HTML editor

というアプリです。

f:id:myprogramming:20170704071442j:plain

インストー

Google Play で手に入れよう

使い方

使い方はすごくシンプル。プログラムを書いたら、▶をおして実行することができます。上のボタンでファイルを開くことも保存することもできます。
そして、このアプリでは、キーボードを記号入力にしなくても一発で記号を入力できます。タグキーもついていて、色付けもバッチリ!予測変換機能もついていて、スマホながら非常に使い勝手がいいです。また終了タグは

まとめ

このアプリには、俺も非常にお世話になっていて、外でちょっとHTMLを編集したいなってときに使わせてもらっています。とても便利なので皆さん使ってみてはどうでしょうか?ではサヨウナラ!

スマホ(ネット)でプログラミング!

はい、どうもこんにちは。おはよう?こんばんは?まぁ、いいや。今回はなんとスマホでプログラミングしていきたいと思います。なんかめんどくさい設定とかするんでしょ、と思ったかもしれませんが安心してください。この記事ではなんの設定もなくやっちゃいます!

なぜこんな記事を書いたかといいますと、今パソコンが壊れてスマホで記事を書いてるんですよ。で、スマホで書いたプログラムを紹介してたわけなんです。でも、
プログラムは書けても実行できない!
ってそのプログラムが正しいかすらわかりませんでした。それでスマホで実行できないかと思ったら、意外と簡単にできたので記事にしてみました。

f:id:myprogramming:20170703175755j:plain

サイトで実行

今回紹介するのは、プログラムを実行できるサイトです。この記事を読んでいる人はすでにオンラインの実行環境ぐらいは知っているかもしれません。実際、そのようなサイトはたくさんあります。ちょっとこの言語試してみたいけど実行環境整えるのめんどい、というときに便利ですよね。俺もpaiza.ioというのを使っていました。日本語だし保存もできたし、使いやすかったんです。でも、今回スマホでpaiza.ioを開いてみたら、スマホに対応してないんです。レイアウトはグチャグチャだしコピペできないし。他のサイトもほとんどそうで・・・そこで見つけたのが、

ideone.com

というサイトです。スマホで開いてもらえるとわかると思うんですが、スマホでもきれいに表示されて、コピペもできます。ただ、色付けと自動インデックスは無理みたいですが、実行したあとは色付けされていてダウンロードも出来ます。言語も豊富でたくさんあり、50言語以上あります。英語版しかありませんが、使い方はとても簡単で困ることはないと思います。

実際に使ってみた

試しに実行してみました。実行したプログラムは、

myprogramming.hatenablog.com

こちらの実行できてなかったPython3のプログラムです。

f:id:myprogramming:20170703184002j:plain
プログラムをコピーして

f:id:myprogramming:20170703184050j:plain
ideone.comでPython3を選択して

f:id:myprogramming:20170703184110j:plain
ペースト!
そしてRunをクリック!

すると・・・

f:id:myprogramming:20170703184235j:plain
色付けされて

f:id:myprogramming:20170703184313j:plain
素数が表示されているではありませんか!

まとめ

みなさんもちゃんと実行できたでしょうか?スゴ〜く簡単でした。みなさんも、ちょっとこの言語やってみたい!とかスマホでプログラミングしたい!とか俺みたいな緊急事態のときは使ってみたらどうでしょうか?俺も他のオンライン開発環境を全部試したわけではないので、スマホでもっと使いやすいの知ってるよ!っていう方がいたら教えてくれるとうれしいです。ではまた今度!

歌詞同期できるスゲえアプリ見つけた

突然ですが、俺は洋楽が大好きでよくYouTubeとかで洋楽聴くんですよ。でも洋楽ってたぶん聴いて歌詞がわかる人なんてほとんどいないと思うんですよ。俺もそうで前に歌詞同期してくれるアプリないかな、なんて探してたんだけどYouTubeはバックグラウンド再生できなくて、ちゃんと使えるアプリがなくてあきらめてたんですけど・・・

この前ふと検索してみたらあったんです!!

いやぁ、もぅ感動しちゃいましたね。Musixmatchというアプリなんですけど、時代はどんどん進化していきますね。というわけで今回はそのアプリを紹介していきたいと思います。

f:id:myprogramming:20170702112845j:plain

アプリのインストー

Musixmatchのインストールはこち
Google Play で手に入れよう

App Store からダウンロード

実際に使ってみた

実際に使ってみました。いやぁすごいですね。使ってみればわかると思うんですが、YouTubeの曲にピッタリ歌詞が流れるんです。しかも対応しているアプリがYouTubeだけじゃなくGoogle Play MusicAmazon MusicApple Musicなども対応しているんです。

対応しているアプリ一覧

アプリ 静的歌詞 動的歌詞
Youtube
Spotify
Deezer x
Google Play Music
Pandora x
Rhapsody
Amazon Music x
Double Twist
Gaana x
n7 Player x
JetAudio x
PlayerPro
Poweramp x
Rocket Player x
Saavn x
Shuttle
Sony Music
Apple Music x
Anghami x

f:id:myprogramming:20170702113455j:plain
facebookアカウントかgoogleアカウントで簡単にログインできるみたいです。ログインしなくても使えるけど、せっかくなのでgoogleアカウントでログインしてみました。

f:id:myprogramming:20170702110422j:plain
YouTubeで使っているところ

さらに自分のスマホに入ってる曲はイコライザーがついてて普通に音楽プレイヤーとしても優秀だと思います。ロック画面に歌詞を表示することもできるんです。

f:id:myprogramming:20170702111949j:plain
ロック画面に歌詞を表示してみた

ちなみに、僕はあまり使いませんが対応していないアプリでも流れている曲を特定して歌詞を表示してくれるみたいです。

まとめ

まとめと言ってもスゴイ!!しかないです。詳しい使い方は説明しませんでしたが、使ってみれば使い方がわからないといったことはないと思います。無料でこの機能、使いやすさ、ホントにすごいと思います。感想を全部書いたらすごくなりそうなので今回はこのへんで終わりにします。ぜひみなさんもMusixmatch使ってみたらどうでしょうか。

Pythonで素数を求めてみた。

こんにちは。えーと、まず見事に僕のパソコンがぶっ壊れちゃいました。なんでしばらく記事はスマホで書くので、プログラムがきちんと動くかは検証していません。もし掲載したコード通りにやってもうまくいかなかったらコメントで教えてください。

さて、では今回の内容に入っていきましょう。このブログで初のPythonプログラムを書いていきたいと思います。で、題名でわかっていると思いますが今回はただ素数を求めるだけです。なんの実用性もありませんが、なんとなく大きい数字の素数ってなんだろうと思って知りたくなったからです。
※このブログではPython3で解説しています。

f:id:myprogramming:20170627164334j:plain

素数の求め方

えーと、素数はいろんな方法で求められると思うのですが、今回はコンピューターの計算速度を活かして人間じゃものすごく大変なやり方で求めたいと思います。その方法とは・・・ただひたすらに全部の数で割って、割り切れた数が1とその数だけなら素数としたいと思います。でも、その方法だと割り切れた数を記録しておかなければならないし1も素数とされてしまうので、割り切れた回数を数えてその回数が2回なら素数としたいと思います。こんな感じで。

まぁ、解説は一応しますが、だいたい分かると思います。
まず、変数aに素数を求めたい範囲を指定します。今回では、1000です。次にfor文で1〜1000まで順番にiに代入します。そしたら、さらに繰り返しで1〜iまで順番にjに代入します。そしてi÷jの余りが0、つまり割り切れたら変数bに1を足していきます。そうすることで割り切れた回数が分かります。で、割り切れた回数が2回だったら素数と判定して表示しています。

プログラムをアレンジしてみる

このプログラムをアレンジすればwhile文で一定時間ごとに永遠に素数を求め続けるようなこともできたりします(パソコンにとても負荷がかかるのであまりやらないようにしましょう)。今回は、引数に指定された数値が素数か求める関数も作ってみました。

素数の求め方さえ分かってしまえばあとは簡単ですね。いくらでもアレンジできます。他の言語で作ることも簡単ですね。

まとめ

今回は、別に使うこともないだろう素数を求めてみました(俺は確認できてない⤵)。まぁ、とにかく簡単ですね。こんなふうに計算をうまく組み合わせれば、素数のような人間だと求めるのが大変なものもかんたんに求めることができてしまいます(俺はPythonを普段電卓としても使ってます)。みなさんも何か求めてみたいけど大変というときにプログラミングで解いてみてはどうでしょうか。今回はこんなところにして、また今度!

JavaScriptで時計を作る(アナログ編)

さて、前回はJavaScriptでデジタル時計を作りましたが、今回は予告どおりアナログ時計を作ってみたいと思います。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

時刻を表示するベースを作ろう

まず、時刻を表示するベースが必要ですね。ベースは、前回使ったベースを少し変えて使います。

あらら、前回とだいぶ変わっちゃいましたね。まず、今回は時計の針を画像で表示するので文字盤、短針、長針、秒針の4つの画像を表示するための、それぞれidを設定したimgタグを用意します。画像のサイズは300px×300pxにしています。4つの画像は重ねて表示する必要があるのでpositionと座表を指定します。画像を、親要素内に絶対配置するabsoluteで上から0px、左から0pxのところの配置しますが、親要素のpositionがstatic(デフォルト)だと親要素の位置を無視して絶対配置してしまうので(他の要素がある場合その要素とかぶってしまったりすることがあります。)、親要素のpositionを相対位置で配置するrelativeにします。ちなみに、ここで画像はhtmlファイルと同じディレクトリに配置しています。

※前回とdiv要素のidがclockからbaseに変わっていることに注意してください。

cssのpositionについて

position-スタイルシートリファレンス

時刻を取得しよう

ここは、前回の記事でも全く同じことをやっているので詳しい解説は載せません。

はい、前回と全く同じ(JavaScript)ですね。コンソールに取得した時刻を表示しています。
詳しくは、前回の記事を参照してください。

時刻を表示しよう

では、実際に取得した時刻をアナログ時計で表示してみましょう!

今回は前回と違って時刻をテキストで出力するのではなく、それぞれの針をidで指定してcssで画像を回転させて時刻を表しています。要素を回転させるには
transform:rotate(回転角度deg);
を指定して回転させることができます。2D(平面)回転でプラスで時計回り、マイナスで反時計回り回転します。このとき、短針の角度の計算に+が含まれているのでカッコでくくらないと数値が文字列に自動変換されて、計算されないで連結されてしまうので注意してください。ちなみに、degとは度のことです(例 90度=90deg)。

それぞれの針の角度の求め方の一覧。

説明 計算方法
短針 12時間で360度回転し、1時間(60分)で30度回転、1分で0.5度回転します。 時×30+分×0.5
長針 1時間(60分)で360度回転し、1分で6度回転します。 時×30+分×0.5
秒針 1分(60秒)で360度回転し、1秒で6度回転します。 時×30+分×0.5

JavaScriptでのidの取得方法について

id名で要素を特定してその属性を操作してみる | JavaScript入門編

JavaScriptでのcssの操作方法について

JavaScriptでCSSを操作する方法 | スターフィールド株式会社

cssでの画像の回転方法について

CSSでテキストや画像を回転させる方法

時刻を更新しよう

時刻はちゃんと表示できたでしょうか?できたら前回と同様、時刻が更新されないので更新しましょう。

やっていることは前回となにも変わらないので詳しい説明は前回の記事を参照してください。ちなみに、このコードでは針がスムーズに動きませんが、もしスムーズに動かしたかったら短針と同様に長針は秒、秒針はミリ秒の角度を考えて足して更新する時間をもっと細かくすればスムーズに動くはずです。応用としてやってみてもいいと思います。

デモ



ダウンロード

ここからプログラムと画像ファイルをダウンロードできます。

アナログ時計.zip - Google ドライブ

まとめ

今回は前回のデジタル時計に引き続きアナログ時計を作ってみましたが、どうでしたでしょうか。前回とは時刻の表示が全く違うので新たにいろいろなことを知ることができたのではないでしょうか?でも、全くと言っていいほどこの時計は機能がないですね。なので、次回のJavaScriptの記事ではデジタル時計とアナログ時計を組み合わせてアラーム機能をつけていきたいと思います。では、また今度!!

JavaScriptで時計を作る(デジタル編)

今回の記事では、JavaScriptでデジタル時計を作ってみたいと思います。この記事ではHTMLとJavaScriptがある程度理解できる人を対象にしていますが、理解できなくても一応コピペして動かすこともできます。

f:id:myprogramming:20170626201822p:plain

時刻を表示するベースを作ろう

さあ、作っていきたいのですがまず時刻を表示する場所がなければどうにもなりませんね。実際に書いたコードはこんな感じです。

divタグ内に取得した時刻を表示します。あとでJavaScriptで指定するためにidをclockとしておきます。

時刻を取得しよう

JavaScriptで時刻を取得するにはnew演算子を使ってDateクラスをインスタンス化します。Dateクラスにはたくさんのメソッドがありますが今回は使うメソッドだけ紹介しておきます。

メソッド 説明
getFullYear() 西暦を取得する(現地時間)
getMonth() 月を取得する(現地時間) (0 ~ 11)
getDate() 日を取得する(現地時間) (1 ~ 31)
getHours() 時を取得する(現地時間) (0 ~ 23)
getMinutes() 分を取得する(現地時間) (0 ~ 59)
getSeconds() 秒を取得する(現地時間) (0 ~ 59)
getMilliseconds() ミリ秒を取得する(現地時間) (0 ~ 999)

詳しくは以下サイトで説明されています。

JavaScriptプログラミング講座【日付/時間について】

では、実際にJavaScriptで時刻を取得してみましょう。

取得した時刻をコンソールに表示しています。ここで注意が必要なのが、月です。月のデータは、0~11の数値で、出力されるので+1をしなければなりません。

時刻を表示しよう

では、取得した時刻を、body内に表示してみましょう。今回はidがclockのdiv要素内に表示します。コードは以下のようになります。

まず、document.getElementById()でidがclockのdiv要素を取得します。そして取得した時刻をinnerHTMLを使ってdiv要素内に取得した時刻を表示するHTMLを追加します。でも、これを実際に実行して見るとわかると思いますがこれでは左上に小さく表示されてしまいます。皆さん自由に見た目をカスタマイズしてみてください。

document.getElementById()について

id名で要素を特定してその属性を操作してみる | JavaScript入門編

innerHTMLについて

HTML要素の中身を変えるinnerHTML | JavaScript入門編

時刻を更新しよう

さて、時刻はちゃんと表示されましたが、実行したときの時刻になったまま、時刻が変わりません。時刻を更新してないからです。では、時刻を更新してみましょう。

今回はsetTimeout()で繰り返すので、時刻を取得して表示するプログラムを関数にします。そして、問題の繰り返す時間ですが、1秒毎に繰り返していくと処理速度によっては少しずつずれていって1秒飛ばしてしまうというようなことが起きてしまいます。なので、1000ミリ秒から現在時刻のミリ秒を引いて次の秒になるまでの時間待って時刻を更新することによってズレをなくしています。

setTimeout()について

JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン

デモ

 

ダウンロード

ここから、プログラムをダウンロードできます。

デジタル時計.zip - Google ドライブ

まとめ

今回は、JavaScript(とHTML)でデジタル時計を作ってみました。今回の内容が理解できれば、JavaScriptはだいぶできていると思います。また、今回ではJavaScriptの基本的な機能をほぼ使っているので、わからないと思っている人でも調べながら理解していけばJavaScriptがだいぶ得意になると思います。まずは、❝習うより慣れろ❞です。いろんなプログラムに触れながら覚えていくといいと思います。次回は、アナログ時計を作ってみたいと思います。わからないことがあったら是非コメントください。では、さようなら!