フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

RailsでDeviseを使おうと思って、自分なりに手順をまとめてみた。 --- 全体の流れ --- その1　導入編 ←今ココ その2　ViewとControllerのカスタマイズ編 その3　Deviseの日本語化編 その4　ユーザーIDで、ログイン認証編 まずは、導入編。 1. 事前準備 Railsプロジェクトを作成しておく Postfixの設定を済ませておく(ユーザー登録の際、メールを飛ばしたい場合) 2. Gemfileに以下を追加 create config/initializers/devise.rb create config/locales/devise.en.yml =================================================================== Some setup you must do manually if yo

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.

このAdvent Calendarについて 今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。 React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。 ※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。 React.jsについて なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。 React.jsはFaceboo

はじめに react-railsという、ReactをAsset Pipelineに乗せて使えるようにしてくれるruby gemsがある。 この記事では、これを使用してReactの公式tutorialを進めていく。 公式のtutorialではサーバ側はすでに実装済みとして進んでいる。 今回はせっかくなのでtutorialを進める中でサーバ側も実装していくことにする。 ちなみに使ってみた個人的な感想としては、RailsのAsset Pipelineに乗せるならすごく順当かなー、という感じ。 browserifyを使いたい。bowerもオワコンと呼ばれてしまう。そんなこの時代。 Asset Pipelineは捨てたい感じがあるけど、既存のアプリケーションを徐々にReactコンポーネント化していく、みたいな時には良いと思う。 方針 きまぐれで、必要そうなところはReactの説明する。けど英訳とかは

0.はじめに 0-1.はじめに AmazonのAWSの無料枠を利用し、小さくRailsアプリケーション開発をはじめることにしました。AWS導入の備忘録を兼ね、所感をまとめました。 私は、プログラミング初心者のため、記載している内容に誤りがある可能性があります。誤りや、改善した方が良い点などあれば、コメントなどでご指摘いただけると幸いです。 0-2.作ったサービス https://door2.me 現在β版です。 こんな感じのプロフィールが簡単に作成できます。 0-3.対象読者 私と同じようにWebアプリケーション開発初心者の方 これからAWSを触ってみようと思っている方 上記のような方に、AWSの敷居がそう高くないことが伝われば幸いです。 0-4.大まかな流れ 1.AWSについて知る 2.アカウントを登録する（IAMユーザの作成、MFAの設定） 3.EC2でサーバを立ち上げる 4.負荷分散

概要 もともと存在していたアプリケーションをhttpsでアクセスできるようにすることとなりました。 それまでにやったことと思ったことをつらつら書いていこうと思います。 最初からhttpsでアクセスする前提で作っていると楽なんでしょうけど、 世の中がみんなそうだったらきっと世の中は平和ですよね。 さぁ頑張りましょう。 目次 まず環境 rails自体の変更 AWSの設定 heroku周りの変更 余談:わけあってwordpressの変更 データベースの変更 デプロイなど 環境 Rails 4系 Ruby 2.2系 サーバ: heroku データ置き場: AWS CloudFront/S3 データ連携にWordpress Railsの設定 アクセスを強制的にhttpsにする すべてのアクセス？をhttpsに流す設定はconfigで設定が可能です。 これだけでhttpsでアクセスしてくれます、よかっ

もうちょい後にしようと思っていたのだが昨日作成したWEBサイトにドメイン名をつけてみることにする。 今回はこちらの記事を参考にさせていただきました。 お名前.com で取ったドメインを Amazon Route53で管理し、サブドメインをはてなブログに割り当てるまで - 銀の光と碧い空 ドメインの取得 一応まえまえから、どんなドメイン名をつけようか検討してたので早速申し込み手続きを。 お名前.comでドメインの取得しました。詳細は割愛します。 EC2インスタンスにパブリック固定IPの割り当て EC2ダッシュボードにある「Elastic IP」を選択し「新しいアドレスの割り当て」を選択。 作成済みのEC2インスタンスへ関連付けする。 ※ これの割り当てをするEC2インスタンスに固定用のIPアドレスが付け直されますので注意しましょう。 AWS Route 53 のDNSサービスを利用する AW

n+1問題対応でincludesを書くときに色々と悩んだのでメモ。 例えば下記のようなテーブル構造だった場合。 teams ｜ players　－－ ｜ ｜ countries　types ｜ translations includesはこんな感じで記載する。 Team.includes(players: )

という箇所があるはずなので、ここの # gem 'unicorn' のコメント外してください。 この1行がなければ gem 'unicorn' をどこかに追加してください。 編集したら保存して Unicorn をインストールします。 $ bundle install これで Unicorn がインストールされます。 Unicorn の設定ファイルを作成 Rails アプリケーションがあるディレクトリの config ディレクトリに unicorn.rb というファイルを新規作成します。 そのファイルに以下を追加します。 worker_processes Integer(ENV["WEB_CONCURRENCY"] || 3) timeout 15 preload_app true listen '/home/vagrant/myapp/tmp/unicorn.sock' pid '/hom

source 'https://rubygems.org' gem 'rails', '4.2.0' gem 'sqlite3' gem 'sass-rails', '~> 5.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.1.0' gem 'therubyracer', platforms: :ruby gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 2.0' gem 'sdoc', '~> 0.4.0', group: :doc gem 'bcrypt', '~> 3.1.7' gem 'unicorn' group :development, :test do gem 'byebug' gem 'web-console', '~> 2.0' gem 'sp

本記事は2021年版にアップデートされ、下記URLに移転いたしました。 https://zenn.dev/naoki_mochizuki/books/1471ce20222227 本記事では、アップデートされた記事の冒頭部分を抜粋して記載させていただきます。 =====以下、記事抜粋部分===== それでは、いよいよAWSアカウントにログインして作業を進めていきます。 まずは、EC2サーバを作成するための周辺環境を構築していきましょう。 1.VPC VPCとは、Virtual Private Cloudの略です。 AWSという広大な領域の中で、「ここからここまでは俺の土地だから皆立ち入るなよ！」と、自分の敷地を勝手に作ってしまうようなイメージを持ってください。 そしてこの自分の土地の中に、サーバやデータベースなど、アプリケーションを上げるために必要なものを作成していきます。 作成手順 1-

「情報の交差点」「オープンコラボレーションスペース」として多様な業種・職種の方にご利用いただいたLODGEは、2020年10月よりリニューアルします。ヤフーの新しい働き方に併せて、オンライン中心へと活動の場を移行。「情報技術で日本をもっと便利に」を共通テーマとしたさまざまな仕掛けでオープンイノベーションの創出を目指します

こんにちは。AWS担当のwakです。今回はAWS監視の話をします。 本文とは特に関係のないかわいい猫 CloudWatchのおさらい AWSにはCloudWatchという監視サービスが用意されています。CPU使用率やDBコネクション数といった監視条件を事前に設定しておくと、EC2やRDSといったサービスが この条件を満たしたとき（ALARM) この条件を満たさなくなったとき (OK) 判定する情報が不足しているとき (INSUFFICIENT_DATA) のタイミングで何らかの通知を行うことができます。また、アプリケーションのログ、top dfなどの結果をCloudWatchに送信して、監視・通知を代行してもらうこともできます（カスタムメトリクス）。 SNS……CloudWatchの通知先として ではその通知はどこに行くのでしょうか。それを知るにはまずAmazon SNSについての説明が必

カスタムメトリクス情報をCloudWatchへ送信し、閾値を過ぎたらメール送信します。 環境：amazon Linux 64bit S3backet名 mnttest ※rootで作業 1. CloudWatchコマンドラインツールをダウンロードする wget http://ec2-downloads.s3.amazonaws.com/CloudWatch-2010-08-01.zip2. ファイルを解凍する unzip CloudWatch-2010-08-01.zip 3. アクセスID、シークレットアクセスキー情報を設定する cd CloudWatch-1.0.13.4 cp credential-file-path.template credentials vi credentials AWSAccessKeyId=xxxxxxxxxxxxxxxxxxx AWSSecretKey=

スマートフォン向けアプリ開発やサーバサイドの開発に関する技術ブログです。 エンジニアdommyのつぶやきは@shonanshachu、ソースコードはGitHubで配信中。 AWSにサーバ監視ツールのCloudWatchが追加されて随分経ちますが、 DiskReadやDiskWriteの監視はあっても、 DiskUsageや、FreeSpaceがありません。 EBSに付随するのか、EC2に付随するのかも良く分からない為、 とりあえず英語で検索して出てきた結果を使ってCloudWatchによる監視を追加しました。 CloudWatchコマンドラインツールのDLまずはCloudWatchコマンドラインツールをダウンロードし、展開します。 最新版はhttp://aws.amazon.com/developertools/2534にあります。 cd /usr/local/src/ wget http

AWSのLinuxインスタンスのCPU, メモリ, ディスク, ロードアベレージ等をCloudWatchで監視するスクリプトを作ってみた 前回、前々回とAmazon CloudWatch Monitoring Scriptsについて見てきました。 今回は、LinuxのCPU, メモリ, ディスク, ロードアベレージ等をCloudWatchで監視するスクリプト、aws-mon-linuxを作ってみました。 特徴は下記の通り。 Amazon CloudWatch Monitoring Scripts for Linuxとほぼ同一のオプションを用意しているので、同等の操作感で使えます。 Amazon CloudWatch Monitoring Scripts for Linuxで監視可能なメモリ、ディスクに加えて、さらにCPUのsystem,user,wait等の詳細な値やロードアベレージ等まで

こんにちは、AWS担当のwakです。前回に続きAWS Lambdaの話をします。 良い角度を知っている猫 【インデックス（予定）】 CloudWatchの監視結果をSlackに流す（AWS Lambdaバージョン） AWS LambdaでWebサイトの死活監視を行ってSlackに結果を流す（今回） DynamoDBにパラメーターを入れてハードコードをなくす CloudWatchの監視結果をTwilioに流して電話をかける SlackからEC2インスタンスを起動・停止するコマンドを作る 今回の目的について 前回に続いて、Lambda (Node.js)を使ってWebサイトの監視を行います。 任意のWebサイトにアクセスし、HTTP 200が返るかどうかを確かめる その結果をSlackで通知する この処理をN分おきに実行する（cron形式でスケジュールを設定可能） これに似たサービスはいくらで