チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

【AWS】サーバーレス(API Gateway+Lambda+DynamoDB)でお問い合わせフォームを作った

今年の5月くらいに作ったのだが、そういえばブログにかいてないのを思い出したのでかいておく。普段サイトを作っていて、ものによってはテレビで紹介されたりバズったりすることもある。 そういうときにCDN置いたりいろいろと対策をすると思うが、その場合静…

2018年上期の振り返りと今後の展望

2017年12月にも記録していたが、気づいたら6月。 今の自分を振り返るにはちょうどいい時期になった。前回の記事 hiromode.hatenablog.com 半年を振り返ってできるようになったこと 振り返ると正月休みが暇なのでCakePHP2系でブログアプリを作った。 そもそも…

MySQLでCSV形式の大量データを一括で取り込んだときに改行コードでハマった

通常使うInsert文とかをターミナルとかでたたくと恐ろしく時間がかかるので、 通常は下記のようにLoad data文で外部ファイルを読み込むらしい。mysql> load data infile "/var/www/html/hoge/import.csv" into table Answer fields terminated by "," lines …

inputタグとlabelタグをつなげて中身のリンクだけはクリック出来るようにする方法

タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。こういうの ただの同意ボタンならlabel内にinputタグ書けば文字まで全部クリッカブルになるのでそれでおしまい。けど今回はそうじゃなくて画像のようにチェックボ…

WEB技術者なら最低限知っておきたいアドテクノロジーについてのおさらい

すっごく久々に自社の広告提案営業担当が勉強会やってくれたので参加した。 普段コーディングばっかりやってると激しく忘れてるんだけど、どこかでそれじゃだめだろうという危機感があったのでとてもありがたい。 元々営業でやってたのもあり実践的かつ具体…

【保存版】WEBサイト制作における便利なチェックツール一覧 ※随時更新中

WEBサイトをつくってると脆弱性のチェックやコードのチェックなどやらないといけないことが沢山ある。 とてもじゃないが手を動かしてチェックなんてしてる暇はないので下記にあげたツールを使うことはむしろ必須といえる。なぜこんな記事を書くかというと、…

【勉強法】20時間で新しいスキルを習得するにはちょっとした4つのコツ

なかなかモチベーションの上がる内容だったのでメモ。 ほぼ抜粋だが、要点だけまとめた。0からプロになるまでは1万時間必要というのはよく言われているが、 時間がかかりすぎる。 そこで、0からまあまあいい感じのレベルまで持っていくのは20時間でいけんじ…

ダミー画像を簡単に作る方法

前にメモしたつもりが出てこないので改めて記載。これを書くだけ。 画像名変えるだけで出てくるのが超絶便利。 https://placehold.jp/460x320.png 本家サイトはこちら https://placehold.jp/

【JS】今更ながらReact.js入門として触ってみた

はじめに、この記事はCodezineを見ながら手を動かして、一部自分のメモなどもしたかったので加筆修正したものなのでリンクしてきます。 Reactの概要と基礎技術要素を理解する (1/3):CodeZine(コードジン)古い記事だと記法や手順が違ったりして面倒なこと…

【Photoshop】コーディング時の役立ちメモ

要素を選択してもレイヤーが選択されないときの対処法 どういう作り方なのか、普通にvモードにしていて要素をクリックしたら右のレイヤーが選択されるはずだがそれがでない。 もちろん、自動選択とバウンディングボックスを表示にはチェックが入っている状態…

Youtubeを使わずにGoogleDriveで動画埋め込み

これは知らなかった。WEBサイトを作ってると動画埋め込み、もといYoutube動画埋め込みはよくある。 なんといってもサーバーに動画置かなくていいのでサーバー負荷も違うし勝手にYoutube側で画質調整してくれるらしいし。ただデメリットが ・Youtubeに動画の…

【JS】共通ヘッダー、フッターをjQueryを利用して簡単に実装する

PHP、SSIなどが使えない、もしくはデータ納品だから先方で使えるかわからない場合に使える。 html 任意の箇所に埋める <script type="text/javascript"> writeHeader(); </script> <script type="text/javascript"> writeFooter(); </script> JavaScript //共通ヘッダーフッター読み込み function writeHeader(){ $.ajax({ url:"/inc/header.ht…

【JSライブラリ・bxSlider】videoタグが自動再生されないとき確認すること

スライドの中でVideoタグを自動で再生させたいことがあった。 適当に入れただけだとautoplayとか入れても動かないので調べてみたら そのままでは動かないらしい。結論 bxSliderはコールバック関数が豊富に用意されているので、 その中のonSliderLoadを使えば…

【CSS】個人的Reset.css

CSS

自分はCSSのfloat:left;をよく使うので、いちいち要素ごとにclearするのがめんどい。 ええーい、このあとは回り込ませたくないんだよ!Flat!!ってときに使う手法だったりフォントだったりをまとめておく。てことで下記。 html, body, div, span, applet, obj…

【AWS】サーバーレス入門、掲示板システムをつくる〜Schoo生放送のメモ〜

環境構築 今回わかること ・掲示板システムを作る仕組み ・実行に必要なロール ・DynamoDBの基本操作 ・API GatewayとLamdaの仕組み 1.掲示板アプリの構成を考える 関数は2つ、読み込み用と書き込み用を作る必要がある。 2.Lambda実行用のIAMロールをつくる …

【AWS】サーバーレス入門におけるLambdaとは〜Schoo生放送のメモ〜

schooというオンライン講座を久々に見たらちょうど今勉強始めたサーバレスについてやってた。 http://schoo.jp/知ってることも多かったが、本とかネットも断片的なところがあるので、 復習の意味も込めて記載しておきます。 ※2018年3月25日(日)現在の情報 …

【Postfix+Dovecot】新規にメールサーバを立てたときに送受信できなくてハマった

Postfix,dovecot やりたいこと AWSでEC2をたてて、別サーバから接続してメール送受信をしたい。 環境 EC2(AWS、CentOS7) VPC、セキュリティグループは既存で作れたとある場所と同じものを当て込んだ。 ただし既存のセキュリティグループでは受信ポートが空…

【AWS】2章ハッシュイベントによるビューのルーティング~サーバーレスシングルページアプリケーション(OREILLY本)まとめ~

この章でわかること ・Jasmineを使ったテスト従来のMVC WEBフレームワークはサーバーサイドルータを使用してURLをコントローラに対応づけ、ビューとモデルで動的コンテンツを生成していた。 シングルページアプリケーションではクライアントサイドルータを作…

【AWS】1章シンプルに始める~サーバーレスシングルページアプリケーション(OREILLY本)まとめ~

ちょっと前に掲題の本を買いました。 平日の朝早く出勤して1時間程+土日数時間使って勉強を始めてます。 総学習時間はどれくらいになるか。。 この章でわかること ・サーバーレスの概要とメリットデメリット ・AWS CLIからS3へのデプロイ 1.1.1 サーバーレ…

【Twitter OAuth】もうツイートを見逃さない! 自分のフォローしてる一覧のツイート一覧をいいね数などで表示

またもTwitterOAuthでプログラムを作った。自分のような個人としてはデータがないとなかなかにプロダクトが作りづらいので Instagramと違って審査がないTwitterは手軽に作れて面白い。今回は個人的に欲しいと思ったもの。 すなわち、 一つのサイト内で、Twit…

【PHP】JSONの値を連想配列にしてforeachで取り出すメモ

PHP

Twitterで吐き出されるJSONをループでうまく取り出せなかったのでメモ。JSONだとよくあるだろうが、Twitterで取り出す場合は少なくとも3つくらいの階層になるっぽい。 $test['users'][0]['name']みたいな。 1つずつなら$test['users'][0]['name']とかでとり…

【JS】オブジェクト指向〜Chapter1 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

今回のChapter1の概要と達成できること 優れたプログラムのための機能について理解する。 すなわち ・プロトタイプ ・クロージャ ・オブザーバー ・this を理解し、最終的にはリアルタイムバリデーションを実装するところまで本記事にてまとめた。 オブジェ…

【JS】vol. 3/3 データ表示(テンプレートエンジン)〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

なんだか急に難しくなった気がするw 多分基本をちゃんと理解していないからだと思うのでここはすっとメモしてまたChapter1から整理してみます。 テンプレートエンジンとは テンプレートとデータを合体させて文字列を作る仕組みのこと。 いろんなライブラリ…

【JS】vol. 2/3 データ検索(Underscore.jsライブラリの便利なメソッド)〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

Underscore.jsとは 配列を扱う上で役立つライブラリ。 JavaScriptは多言語に比べて配列操作に弱いので補完してくれる。 プロトタイプ汚染もなく、map,filter,invoke,bindAllなど便利な関数が100以上用意されている。 mapメソッド 引数として与えられた関数を…

【JS】vol. 1/3 データ取得(Deferredを使った非同期通信)〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

1〜2は前に読んだので省略。 3はCanvasだからすぐには使わない。 ということでChapter4からスタートです。このChapterでの目的は非同期通信処理でデータを取得、 ソート及びフィルタ機能をつけてHTMLに表示するサンプルプログラムを作ること。 データ操作の3…

【TwitterOAuth】Twitterライブラリ+PHPで卒業証書のアプリをつくった

タイトルのものを作った。 OAuthとかたまにしか使わないと忘れるのでメモ的にはっておきます。 ソースコードコピペでそのまま動くようにしました。毎週なんかをつくるっていう課題の元、今週は何にしようかと思っていたらこんなの見つけたので作って見た。 …

【JS】ハッシュタグつきのURLでアクセスしたらページの特定の場所に飛ばす

index.html#sec1とかにしておいたら 押したら通常はページのsec1のIDのところにいくが、そこがアコーディオンだったりタブだったりした場合、 それを押させるんじゃなくてJavaScriptで押させるということがしたい。 そんなときのTips <script> $(function(){ // URL…

【JS】jQueryでAjaxを実装〜JavaScript本格入門 Chapter9〜

汎用的なAjax実装 $.ajaxメソッド <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $( function (){ $('#btnsend').click( //通信開始時にメッセージ表示 $('#result').html('通信中.....'); //Ajax通信開始 $.ajax({ url:'yahooJson.php', type:'GET', dataType:'json', //フォーム内容ハッシュ変換 data…

【JS】ブラウザを自在に操る(ブラウザオブジェクト)〜JavaScript本格入門 Chapter6〜

ここからはブラウザ環境以外では利用できないため注意。 イベントが発生したら処理を行うーイベントドリブンモデルー クライアントサイドJavaScriptとイベントドリブンモデルを理解する イベントドリブンモデルとは ブラウザ上でページ読み込み完了、テキス…

【JS】大規模開発でも通用する書き方を身につけるオブジェクト指向構文(prototype,クラスライクな継承)〜JavaScript本格入門 Chapter5〜

JavaScriptにおけるオブジェクト指向の特徴 クラスではなくプロトタイプ 他言語と違ってインスタンスの概念はあるものの、クラスがなくてプロトタイプという雛形の概念だけがある。 プロトタイプとは要するに「より縛りの弱いクラスのようなもの」と思って差…