スキップしてメインコンテンツに移動

エンジニアtonブログ

このブログを検索

投稿

Twitterでバズった動画、画像をまとめるサイトを作った

日付: 11月 13, 2020

Rails React twitter

+

リンクを取得
Facebook
Twitter
Pinterest
メール
他のアプリ

相関図作成ツールを作成

日付: 10月 01, 2020

相関図作成ツール

+

リンクを取得
Facebook
Twitter
Pinterest
メール
他のアプリ

その他の投稿

ton: Webエンジニアをやっています。日々思ったことや、読書レビュー、IT系の記事などを書き連ねています

プロフィールにアクセス

アーカイブ

11月 20201
10月 20201
8月 20203
7月 202019

ラベル

CentOS
javascript
package.json
Rails
React
Ruby
twitter
wordpress
オブジェクト指向
資格

静岡
相関図作成ツール
転職
読書レビュー
日光
旅行

もっと見る一部のみ表示

Webサイト

相関図作成ツール
ツイッターバズまとめ

人気の投稿

React 環境構築からHelloWorldまで

今回はJavascriptライブラリのReactについて！今まで聞いたことはあるけど、触ったことはありませんでした。学習を進めて、最終的には簡単なアプリケーションを作れたらと思います。今回のゴール ReactをPCに導入して「Hello World」をブラウザ表示させるまで Reactってなに？ Facebookが作った、Javascriptライブラリです。環境構築 ※前提として、Windows PCに環境を構築していきます。 Node.jsをインストール Node.jsはサーバサイドのJavascript実行環境。(なぜ必要なのかいまいち良くわかってません。後述のnpm用？？) 以下のリンクからインストーラをダウンロードしてインストールします。 Node.jsダウンロードサイト npmで必要なパッケージをインストール Node.jsをインストールすると、npmというものも一緒にインストールされています。npmとは色々と便利なパッケージをインストールすることができるものです。Reactもnpmでインストールできます。 mkdir hello cd hello まずはコマンドプロンプトからアプリケーション用のディレクトリを作成します。 \hello>npm init -y Wrote to \hello\package.json: { "name": "hello", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "",

Twitterとwordpressの連携のためにやったこと

自分のブログの記事投稿時に、twitterにも自動投稿させるようにしてみました。すぐにできるかなーと思ってたのですが・・・思ってたより苦労しました(泣) 概要簡単に言うと以下をしました。現在( 2019年6月)は取得方法が色々変わったらしく・・・。本当に苦労しました。 wordpressのSNS連携プラグインSNAPをインストール Twitter developer でなんやかんやしてAPI keyを取得 SNAPに自分のtwitterアカウントを登録 SNAPインストール wordpressに新規追加で「SNAP」を検索し、プラグインをインストールします。詳細な説明は割愛 twitterのAPI keyを取得次にtwitterのAPI keyを取得します。API keyは機能を使用するための鍵となるものです。 Twitter Developerに会員登録まずは以下のリンクにアクセスしてtwitter developerに会員登録します。 twitter developer サイト twitter developerサイトにアクセスし、自分のtwitterアカウントでログインすると上のような画面が表示されます。「create an app」ボタンを押して次に進みます。 twitter developer ツールを使用する目的を聞かれます。とりあえず適当にチェックし「Next」ボタンを押して次へどこに住んでいるか、アカウント名は何かを聞かれます。記入して次へ。 google先生いわく、以下を聞かれています。英語で書く必要があります。訳：英語で、TwitterのデータやAPIをどのように使用する予定かを説明してください。回答が詳細になればなるほど、レビューと承認が容易になります。僕は、以下のように回答しました。 My service delivers life information and technical information. By linking service and twitter, information can be delivered to users quickly.

[書籍]リーダブルコード感想まとめ

プログラマーのバイブルとして名高い名前付けに関する技術書「リーダブルコード」を読みました！こういう人におすすめ初級、中級者のプログラマー。コードを書いて、ある程度動くものを作れるようになったけれど、保守性、拡張性などは意識できていない。もう一段階上の優れたコーディングをしたい人におすすめです。概要「読みやすいコード」「理解しやすいコード」の定義、方法を説明した書籍になっています。説明に使用しているプログラミング言語は、C++、Java、Python、Javascript等を使用しています。複雑なコーディングはしていないので知らない言語でも理解しやすいかと思います。目次理解しやすいコード名前に情報を詰め込む誤解されない名前美しさコメントすべきことを知るコメントは正確で簡潔に制御フローを読みやすくする巨大な式を分割する変数と読みやすさ無関係の下位問題を抽出する 1度に1つのことをコードに思いを込める短いコードを書くテストと読みやすさ「分/時間カウンタ」を設計・実装する重要なことなぜ理解しやすいコードを書かなければいけないのか？将来的にそのコードを再利用するのは自分かもしれないし同僚かもしれない。理解しづらいコードは、工数の無駄となってしまう。コーディング後に「このコードは理解しやすいだろうか」と自問自答することが大切明確な単語を選ぶ。「get」「tmp」「ret_val」などはあまり明確な単語ではない。名前を見ただけで情報を読み取れること限界値には「min」「max」範囲には「first」「last」包含・排他的範囲には「begin」「end」ブール値には「is」「has」を使うコメントは読んだ人が「なぜ？」とおもう箇所を予想してコメントを書くコードからすぐに抽出できることはコメントすべきではない if/elseは肯定的・単純・目立つものを先に処理する三項演算子、do/whileなどはあまり使わないネストを削除するようにガード節を使用するまとめ分かりやすい、理解しやすいを売りにしているだけあって、書籍自体もとてもわかりや

日光観光！東照宮、江戸村などオススメのスポットについて

長期休暇を利用して、栃木にある日光へ家族旅行に行ってきました。旅行にかかった費用やオススメの観光スポットについて詳細にレポートしていきます！ [概要]日光観光のコース、旅行費用など観光コース日程は１泊２日。有名な観光スポットを周りました。コースは以下。パッと見、１日目に詰め込んでいる感はありますが、遊ぶというより観る目的のスポットを１日目に置いたので、時間もかからず、充分に堪能することができました。逆に2日目の江戸村はもう少し時間が欲しかった・・・(泣) [１日目] 日光東照宮（滞在時間：3h）東部ワールドスクエア（滞在時間：3h） [2日目] 日光江戸村（滞在時間：5h）旅行費用家族旅行ということで、僕、妻、子供(1歳)の計3人の旅行となりました。旅行費用は以下。尚、出発地点は新宿駅からになります。内訳()内には大人1人分を出しています。交通費：2万7840円 (内訳：特急 1万2800円、電車 620円、バス 500円)×2 宿泊費：3万2400円遊興費(入場料＋お土産代など)：1万6000円(内訳：東照宮 1300円、ワールドスクエア 1700円、江戸村 4000円 +α)×2 合計：7万6240円日光東照宮アクセス東部日光駅からバスに乗ります。最寄りのバス停は以下。表参道神橋子供を連れても大丈夫？いざ！日光東照宮へ！旅行の計画を立ててたときに、一つ気になったのが子連れで観光はできるのかどうかという点。総括すると、日光東照宮は以下のように感じました。ベビーカーでの移動：× オムツ替え：○ 離乳食：△ 画像のように、日光東照宮は階段や砂利道が多いためベビーカーでの移動は非常に困難です。まだ歩けない子供を連れての観光であれば抱っこひもがベストかと思います。オムツ替えについては、専用のトイレがあります。また、付近には離乳食を用意しているお店もなく、座ることができる場所もあまりなかったので与えるのは難しいと感じました。(僕たちの場合は、日光東部駅付近で離乳食と自分たちのお昼を済ませました。) 日光東照宮の観光神橋というバス停を降

ActiveModel::Serializersでundefined method `read_attribute_for_serialization'

ActiveModel::Serializersでエラー json出力するActiveModel::Serializersで以下のエラーが出ることがあります。たまに出るやつで、調べてもあまり情報がなかったので、serializerのソースを読んで原因究明してみました。 undefined method `read_attribute_for_serialization' 原因 getterがないためです。このエラーはモデルに紐づかないデータをjson出力するときに出ます。例 # コントローラ # jsonを返すメソッド def success_serializer # hashオブジェクトをjson出力する hoge_huga = { hoge: 'hogehoge', huga: 'hugahuga' } render json: ActiveModelSerializers::SerializableResource.new( hoge_huga, serializer: HogeSerializer ) end # シリアライザー class HogeSerializer < ActiveModel::Serializer attributes :hoge, :huga def hoge object[:hoge] end # hugaのgetterはない Modelの継承関係は以下。 XXXModel < ApplicationRecord ApplicationRecord < ActiveRecord::Base そして、ActiveRecord::BaseはSerializationモジュールをincludeしている。 Serializationで定義しているread_attribute_for_serializationはModelオブジェクトの属性値を取得するメソッド。以下のように定義して属性値を取得している。 alias :read_attribut

[書籍]ヒトはなぜ先延ばしをしてしまうのか感想まとめ

こういう人におすすめ ADHDのように大人の発達障害を持った人、部屋の掃除や洗濯などが出来ない人、課題に追われる大学生など、幅広い層におすすめです。概要大学教授の筆者は、自身も先延ばしをライフワークとしてきました。先延ばしを科学的に分析し「先延ばし方程式」を考案。先延ばしに関することを究明してきました。本書では学校や職場、私生活で利用できる実践的な対策を説明しています。目次先延ばし人間の実像先延ばしの方程式サボる脳のメカニズム現代社会は誘惑の巣窟私たちが失うもの、悔むもの企業と国家が払う代償自身喪失と自信過剰の最適バランスやるべきことに価値を吹き込む現在の衝動と未来のゴールを管理するさあ、先延ばしを克服しよう重要なこと先延ばし行動は(期待*価値)/(衝動性*遅れ)で表すことができる。例えば、課題の締め切りが遠い(遅れ)ほど、衝動性の高い人ほど、モチベーションが下がる=先延ばし。また、ご褒美がもらえる可能性(期待)が高いほど、質や量(価値)が良いほど、モチベーションが上がる現代社会が進歩するにつれて、先延ばしにつながる誘惑が増えた。テレビ、ゲーム、SNSなど先延ばしする人は成功できない人が多い。仕事の質、貯金、健康面など、様々なケースで代償を払うことになる手強くとも、達成可能な目標を設定し、一つ一つクリアすることで、自信を高める映画や書籍、身近な人の多くの成功体験談に触れて、モチベーションを上げる理想の自分を具体的に想像し、現実とのギャップを認識。その差を埋める方法を模索するリスクを予測する。自身が先延ばしをするパターンを書き出しても良い課題や困難に対して、ゲーム感覚、目的意識を持つ睡眠や空腹など、自身のエネルギー貯蔵庫を把握する課題に対して、自分なりのご褒美を作る自分にとっての、誘惑は何かを洗い出すまとめ先延ばしをすることでどのように人が堕ちていくかを実例を基に書かれているので、良い意味で危機感や焦燥感を煽られる本になっています。悩んでいる方は、ぜひ読んでみてください。

オブジェクト指向プログラミングについて

最近のプログラミング言語は大抵オブジェクト指向になっています。オブジェクト指向プログラミングについて記事を書きました。オブジェクト指向プログラミングとは object(オブジェクト)とは、「物体」「目的」などと和訳されます。オブジェクト指向においてはあらゆるものを「物体」として捉えます。「人間」も「パソコン」も「国」なども「物体」です例えば、「車」を「物体」として捉えてみましょう。「車」は基本的に以下のような動きを持ちますね。前に進む後ろに進む右に曲がる左に曲がる運転手は、車を操作するときに中の仕組みは理解していません。しかし、ハンドル操作やアクセルを踏むことで結果がどうなるかは知っています。このように、「こういう命令をすればこういう動きをする物体」を作成するのがオブジェクト指向プログラミングになります。オブジェクト指向プログラミング基本用語オブジェクト指向プログラミングには３大基本用語があります。カプセル化カプセル化とは中でどのような処理をしているか意識させないことを目的としています。先ほどの「車」を例にしてみます。アクセルを踏むという操作をすると車が前に進みます。ブレーキを踏むという操作をすると車が止まります。どのような仕組みで進んだり止まったりするのかは運転手が意識する必要があるでしょうか。いやないっ（反語）プログラムも同様です。他のプログラムがどういう仕組みで結果を返すかなどは意識したくないし、意識されたくないのです。結果を教えてくれるインタフェースだけ用意してくれるだけで良いのです。このカプセル化を利用することで、プログラム毎の独立性が担保され、プログラムの管理がしやすくなります。継承オブジェクトの動きを引き継いで使用することができる機能です。「ショベルカー」というオブジェクトを作ってみます。「ショベルカー」の動きは以下。前に進む後ろに進む右に曲がる左に曲がるモノを運ぶ動きをどこかでみたことないでしょうか。そうです「車」オブジェクトと共通の部分があります「車」オブジェクトを継承することで、共通の部分をまとめ

[書籍]仕事が早いのにミスをしない人は何をしているのか？感想まとめ

今日は、「お仕事の速さ」について。何か解決策はないかと、書籍「仕事が速いのにミスをしない人は何をしているのか？」を読んでみました。こういう人におすすめ「仕事が遅くて残業ばかり」「ミスが多くて怒られがち」というような、お仕事に悩んでいる人にはおすすめの本です。入ったばかりで慣れない新人の方や、未経験職種に就いたばかりの人にはとても役に立つのではないのでしょうか。逆に、単純に仕事の質やスピードをもっと高精度に仕上げたいという方には、「こんなこと既にやっている」という人も多いかもしれませんし、内容も物足りないかもしれません。概要本書では、スタンフォード大学工学博士の著者が、工学、失敗したことで得た知識や経験を展開していきます。それらを基に作業効率化する方法や、ミスをなくす具体的対策を挙げた本となっています。目次なぜあの人は仕事が速いのにミスしないのか？仕事の質とスピードを同時にあげる方法入門編うっかりを防ぐ「最小・最短・効率」仕事術メールを制するものが、ビジネスを制する自分のパフォーマンスを最大まで高める仕事術ずば抜けた仕事の決め手となる人間関係とコミュニケーションのコツ仕事の質とスピードが同時に上がる逆転の発想法自己流・万能術の作り方自己実現を最短で叶える仕事の取り組み方重要なこと大事だと思ったことをピックアップしましたチェックリストはアメリカ式 1作業1チェックができるように、一つ一つのリストを細かに書く。ダブルチェックを一人でするときは、1回目は上から順にチェックをし、2回目は下から順にチェックをすることで、見方を変える忘れないような仕組みを作る。例えば、大事な持ち物を、履いていく靴の上に置いておく仕事の本質を整理し、優先順位を見極める本当に大事なことだけ最小限に見極め、ミスを最小限にする日頃から自分の工数を数えるようにする仕事を依頼された時点で、どれだけ時間がかかりそうかを考えておく勘を取り戻すトレーニングをする時計を見る前に、「今何時か」、地図を見る前に「目的地はどちらの方角か」などを予想する癖をつける話をするポイント自分の話は短めに、結

React基本

JSX FaceBookが開発したjavascript拡張機能。HTMLタグをjavascriptの中に書ける。実際はBabelを使ってHTMLの部分をjavascriptのプログラムに置き換えている <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"></div> <script src="app.js"></script> </body> </html> // jsxを使用できるようにreactのモジュールをimport import React from "react"; import ReactDOM from "react-dom"; // 描画関数のReactDom.renderにh1タグを渡して'app'に描画する const app = document.getElementById('app'); ReactDOM.render(<h1> Hello </h1>, app); 注意点コンポーネント名は大文字から始める class属性は「className」と書く returnで戻すタグは一つ。複数返したい場合はdivとかでくくる閉じタグがない場合はエラー属性値は""でくくる。テンプレート文字列(``)は指定できない {}でくくるとjavascriptが使用できる import React from "react"; import ReactDOM from "react-dom"; // 関数コンポーネント。大文字から始める const App = () =>{ // class属性はclassName // 属性値は””でくくる // 戻すタグはdivなどで一つにま

連絡フォーム

名前

メール *

メッセージ *

Powered by Blogger