読者です 読者をやめる 読者になる 読者になる

karashi39とはいったい

夢と希望と明日と正義を讃える

自動リロードのON/OFFを切替えられるやつ

IT

PGはじめて半年がいつの間にか経ちましたが、実際はほとんどコードを書いてなくて*1、まずいと思っていました。使ってる言語もPythonオンリーだったし、配列こね回すだけのプログラムだしみたいな、ショボさがあり、本当に自分はPGと名乗って良いのか疑問があります。勉強会行っても技術の話あんまりしないし…

というわけで、めっちゃ簡単な一枚のWEB画面を書く仕事をもらって、やりました。なにげに、ほぼ初めてjavascriptを使いました。本当は2回目です。師匠の作ったテトリス.jsに3行くらいの修正をしたことがあります。いまどきテトリスって…。

つくりたいもの

  • 数分間隔でテーブルが更新される何かがある
  • その様子を社内プレゼンでデモする(らしい)
  • 画面をほったらかしにしてもデータの更新が見たい
  • でも前のレコードがこうでしたというのも見たい

という話だったので、PLが、

  • 自動更新するページ
  • 手動更新するページ

というのを2つ作ってください、あとは全部同じ仕様で!と言ってきました。

しかしこう、めんどくさいし、どうやって作ったら良い感じなの?というのがわかんなかったので、 じゃあいっこのページで切り替えられるようにして、ページ2つ表示すれば良いんじゃね、 どうせ最初から2種類のページ表示するんだし、と思いました。

つくったもの

結果的には、こういう感じになりました。

f:id:karashi39:20170312152146p:plain

基本的には手動更新です。自動更新をONにしても手動更新はできます。自動更新のON/OFFは、見た目的にどうしたらお客さんに説明しなくて済むか*2、わかんなかったので、ON/OFFのボタンは2個用意して、ONになってたらONにするボタンは押せないようにする、という方法でやりました。

コードはこういう雰囲気のものです。家に帰ってから書き直したから、細かい所とか、文字列とかはだいぶ違います。

window.onload = function(){
    var set_auto_reload_button = document.getElementById("set_auto_reload");
    var stop_auto_reload_button = document.getElementById("stop_auto_reload");
    var isAutoReloadEnabled = location.search.substring(1);
    if(isAutoReloadEnabled){
        set_auto_reload_button.className = "pure-button pure-button-disabled";
        stop_auto_reload_button.className = "pure-button pure-button-active";
        setTimeout("location.reload()", 1000 * 10);
    }
}
function set_auto_reload(){
    alert("Auto Relode Mode Start.");
    location.search = "isAutoReloadEnabled";
}
function stop_auto_reload(){
    alert("Stop Auto Relode Mode.");
    location.search = "";
}

うーん、これはいい感じなんですかね?不明。上のコードはサンプルです。実際仕事で作ったやつは、本体はphpも使ってたりとか、なんだかインドの伝統料理みたいな名前のテンプレートエンジンとか使ったりとか、よくわからないながら実装しました。CSSPure.cssです。WEBページが1枚しかないプロダクトなので、おしゃれだけどシンプルなのが良いかな、あと、サイズが小さいのが良い、みたいな発想で選びました。シンプルすぎて、中央に寄せるために自分でcssを書いたりして、だめじゃねえか、って思った。

わからんこと

私自身の課題です。

  • window.locationlocation の違いがよくわからない
  • 「クエリパラメータはよくない」「そんなことはない」という会話についていけない
  • class属性の値を変化させるというやり方が良いのかわからない
  • なんだよ "location.reload()" って、なんでダブルクオートつけんの

つまり、全面的にWEB方面のやりかたの理解が不足してます、というか勉強不足、というか無です。

かんそう

というわけでこう、技術的な成長が全然できていませんが、PLは、「僕の考えたのよりいい感じですね!」ってべた褒めしてくれて、プログラマがどうやったら「明日も頑張ろう!」って思えるのかをちゃんとわかっている感じで、この人たちと一緒に働けるよう、転職してよかったという感想です。ダメなやつでも、初心者のうちはディスりを我慢して褒めれば頑張るし、そのうち成長するよきっと!でも、技術的にもっとこうしたら良いよ!というアドバイスもください。是非ください。お金をください。


*1:たぶんまだスクリプトファイル単位で、10個書いてないと思う

*2:わたくしはヘルプだったので、ご説明に伺う機会もなさそうだったので、説明の手抜きが求められた