AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

ブラウザのLocalStorageにデータ保持させてみた

Pocket

初めましてこんにちは、今年度新卒入社しました大作です。

大学時代では、Hot Soup Processorというスクリプト言語で簡単なゲーム開発しかしておらず、本格的なプログラマとしてデビューしてからまだ間もないヒナ鳥です。今は技術レベルや理解がまだ低いですが、これから日々勉強していきたいと思います!(ぴよぴよ)

 

今回やること

今、新人研修ではHTML, CSS, JavaScript(jQuery)を用いてアプリ制作をしているのですが、

  • ブラウザのリフレッシュしても入力したデータを保持する
  • 保存するデータの中身は複数項目がある(日付とか件名とか)

 

以上の機能要件を満たすものを作っており(この時点で作っているものが大体想像つくであろう)、他の同期がサーバを用いた方法で紹介していますが、こちらでは入力したデータをブラウザのLocalStorageに保存する方法で実践します。

 

そもそもLocalStorageって何なんだ?

私自身の復習がてら調べました。

クライアント側のローカル環境にデータを保存するWebStorageの仕組みの一つで、もう一つにSessionStorageがある。それぞれの特徴は以下の通り。

  • LocalStorage‥‥永続的に保存される
  • SessionStorage‥‥ブラウザを閉じるまで保存される

 

LocalStorageが主に使用されているのがショッピングサイトの商品履歴だそうな。

 

 

やってみた実践コード

保存データは、配列の中にプロパティがそれぞれ入ったオブジェクトが入るようにします。ここでは、追加日付、名前、ラジオ(期限or予定)を入れてます

HTML

JavaScript

取得処理で、データの中身が空だった場合にparseしたものを直接配列に入れると、配列の中身を読めないエラーを吐いてしまうため、if文で制御して入れないようにしました。(この問題に同期から助言を頂きました。感謝!)

まとめ

学び始めは理解に苦しみましたが、やっていくうちになんとかLocalStorageを用いたデータ保存が出来るようになりました! 感想としては、LocalStorageへの保存は簡単ですが、オブジェクトデータから中身を取得するのがとても大変でした。

次はAjaxでも出来るようにしてみようかと思います・・・・

 

Pocket

1day outingを利用した話

Pocket

皆さまこんにちは。

弊社では1day outingという制度があり、週に1度自宅やコワーキングスペースで勤務することができます。

今回は特別にGWの2日間を1day outingし、社外での作業方法を検討してみました。

続きを読む 1day outingを利用した話

Pocket

BitZeny 〜わいCPUマイニング始めるんだってよ〜

Pocket

BitZeny 〜わいCPUマイニング始めるんだってよ〜

こんにちは、こんばんは。おはようございます。 2018年新卒社員の地福(じふく)です。 学生時代にちょっとした楽しみでマイニングしていたBitZenyについてお話しさせていただければと思います。

BitZenyってなに?

最近話題にも上がらなくなってきた暗号通貨です。
有名どころのBitCoinはGPUマイニング主でした。(近頃はASICというものが流行っているそうです。)
しかしBitZenyはCPUでのマイニング(GPUも可能になりました)に適しているため、古いマシンでも比較的簡単にマイニングができるようになっています。
知っている中では、タブレットやスマホでもできるとか・・・

以下BitZeny情報です。

  • シンボル : ZNY
  • アルゴリズム : Yescrypt
  • 最大発行枚数 : 2億5000万
  • プレマイン : 0(事前発行数)
  • ブロック生成時間 : 90秒
  • 難易度アルゴリズム : DarkGravityWave3(1ブロックごとにDifficultyを変更するアルゴリズム)
  • マイニング報酬:250(2017年12月現在62.5枚)
  • 半減周期 : 50万ブロックごと
  • 国産コイン!!!

 


ハッシュアルゴリズム、Yescryptを選んだ理由

Yescryptにした理由は、Scryptの後継になりそうなパスワードハッシュアルゴリズムだったためです。

良いパスワードハッシュアルゴリズムとは

パスワードのハッシュ化は必須ですが、どのようなハッシュアルゴリズムでも良いかというと、そうではありません。
例えば、SHA256でハッシュ化したパスワードを全探索する場合を考えます。
パスワードが仮に8文字かつ64文字種だった時、パスワードの種類は約281兆5000億個です。
これに対し、最新のASICは1秒間に1兆回、SHA256を計算することができます。
つまり、SHA256のパスワードハッシュが流出した場合、282秒あれば元のパスワードが分かってしまいます。
これではダメなので、標準化されているPBKDF2ではハッシュを2000回繰り返すことが推奨されています。繰り返しを大きくすれば、より安全になりますが、パスワード認証のためのサーバー負荷が増えることになります。
結局、普通のハッシュアルゴリズムでは、サーバー(CPU)の計算効率がASICの計算効率よりもひどく劣っていることが問題です。CPUとASICで同じような効率のハッシュアルゴリズムが良いアルゴリズムと言えます。そこで出てきたのがbcryptとscryptですが、scryptはASIC化されてしまいCPUよりずっと効率が良いのはご存知だと思います。
というわけで、より良いパスワードハッシュアルゴリズムを決めるためのコンペが開催されていて、 それがPassword Hashing Competitionになります。
現在、Password Hashing Competitionには22個のハッシュアルゴリズムがエントリーしていて、その中から良い物を選定中です。Yescryptはその中でもかなり優秀だと私は考えています。

出典 : BitZenyの総合案内所 解説より

 


マイニング方法

windowsの環境だとすぐにできるのですが、Macだとそうはいかないので今回は、 Ubuntuで行なっていきます。 続きを読む BitZeny 〜わいCPUマイニング始めるんだってよ〜

Pocket

入社式と新人研修の話

Pocket

入社式と新人研修の話

こんにちは、2018年新卒の川永です。
入社から1ヵ月という節目を迎えましたので、入社式からの流れと感想についてレポートいたします。
(当社に興味をお持ちの方の参考になれば幸いです。)

入社式

会場 : 渋谷オーチャードホール

ハンズラボのみではなく、東急グループ全体での入社式でした。
その数なんと!総勢約1500人、東急グループの一員としての自覚とグループの大きさを実感しました。
入社式後は本社に戻り入社書類の提出や会社の制度について詳しい説明を聞きます。 会社の規模は大きくないかもしれませんが、その分小回りが利き東急グループということで福利厚生もいいのがハンズラボのいいところかなと思います。

ビジネスマナー研修

他社との合同研修で、5日間行いました。 社会人として必要なコミュニケーションやチームワーク、働く上で欠かせない名刺交換や電話対応についても学びました。
他社との合同研修とのことで様々な会社の方がいらしたのですが、国際的な会社も多くインドやアメリカ、中国、スリランカ出身の方など国際色豊かな研修でした。
それに伴い、日本特有の文化や考え方など今まで疑問に思わなかったことについて改めて考えることができました。

本LT

本LTの様子


入社後の空き時間を利用して各人読書を行い、その内容をLTするというものLTする本については、会社の本棚から好きなものをチョイスしました。
私は、自動人形の城(オートマトンの城)という本をチョイスしました!
AIと人のコミュニケーションについて掘り下げられた書かれた小説でストーリーも面白くAIについての事前知識が無くても読み進められるのでオススメです!
また、プレゼンについてビジネスマナー研修で学習したので早速それを活かすことができました。

HTML、CSS、JavaScriptの外部研修

会場 : 株式会社クスールさん
外観

教室の様子

約1ヶ月間こちらで学習します。学習スケジュールとしては2日間でHTMLとCSSの基本について学びます。
その後、週3回でJavaScript、node.jsを学習します。
今まさに、JavaScriptを学んでいるのですが、疑問に思ったことをすぐに講師の方に聞くことができるので疑問点をそのままにせず学習ができます!

Goodpatch研修

会場 : 株式会社グッドパッチさん Tokyoオフィス

受付
クスールさんでの研修の合間を縫って研修にいきました!
グッドパッチさんのサービスProttを用いてチーム単位でワークを行いました。
ワークを通してデザインとは、表層的な装飾のことではなく
設計の段階からユーザーと関わり作り上げていくものだと学びました。

まとめ

自由な社風の分、自ら技術を学ぼうとする姿勢が非常に大切だとこの1ヶ月で感じました。間も無く仮想プロジェクトがキックオフするので今まで学んだことを生かしつつ新たに学んでいきたいと思います!

 

Pocket

FlaskのAjax通信でつまずいた話

Pocket

こんにちは2018年度新卒の清水です!
新人研修でHTML, CSS, JavaScriptを使いwebアプリを作っています。
私はフロントをあまり書いてこなかったので心機一転して学習しています。
ちなみに、学生のときサーバサイドをやってました(JavaとPythonはよく書いてました)。

やりたいこと

  • ブラウザをリフレッシュしてもデータが残るようにしたい
  • ローカルストレージはデータ構造が複雑になりそうなのでRDBでやりたい
  • サーバサイドを書きたい(できればPython)

 

方針

  • Ajax通信を使いロード時にデータを取得
  • RDBはMySQLを使用 理由:以前よく使っていた、SQL書きたい
  • サーバサイドはPythonのflaskを使用 理由:APIを作ったことがある

 

コード

Python

バージョンは3.6.5です
flaskをインストールします

MySQLからデータを取得するところは省きます

とりあえず curlコマンドでjsonが取得できるかテストします

ちゃんと取れました

HTML JavaScript

HTML

JavaScript

ボタンが押されたらajax通信をしてjsonを取得します
見た目はこのように

いざ実行

Chromeのデベロッパーツールを使用してテストを見ていきます
おや?エラーを吐きました

翻訳すると

なんだかよくわかりませんね

Access-Control-Allow-Origin + flask でググっていると以下のサイトを見つけました
Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource

どうやらPython3系以降は pip install flask-corsでflask-corsを使用して解決するそうです。
私はpip3 install flask-corsで入れました。

いざ実行(二度目)

解決していない…なぜだ

前記したサイトにはPython2系の解決法も記載されていたのでこちらもテスト

いざ実行(三度目の正直)

ついに成功!
なぜPython2系の解決法で成功したのかは不明

結局何が問題だったの?

  • Access-Control-Allow-Originがサーバ側で許可されないないのが問題だった
  • Access-Control-Allow-Origin', '*'を設定することにより、任意のドメインがサイト間でアクセスできるようになる

だんだん調べて行くとSame-Origin Policy(同一生成元ポリシー)やCORS(Cross-Origin Resource Sharing)制限などのネットワーク用語が出てきたので理解できるよう努力していきたいと思っています。

Pocket