好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

【EC-CUBE3.x】ログイン後のリダイレクト周りを制御する

最近よくEC-CUBEを触るようになったのでメモ代わりに。 ほんとはRiotとRailsとSwift触りたいけど、これはこれで楽しい。 ケース ログイン前にカートに商品を追加する 追加した状態でログインする ログイン後のリダイレクト先をカートに変更したい (通常のロ…

setTimeout()メソッドのひみつ

こんばんは。 GJ部おもしろいんじゃあ^〜 setTimeout()とは? setTimeout()はご存知の通り、引数に指定した関数を遅延して実行するメソッドです。 setTimeout(function() { console.log("ほげ"); }, 1000); ※今回はサンプルなのでclearTimeout()でタイマー…

2015年なにしようかね

あけましておめでとう ございました。 2014年はどんな年だったか 前半はあんまり覚えてません。 2014年後半はひたすらUI考えてデザイン組んでました。 自分がフロントエンドエンジニアだってことを忘れることがあったくらい(; ・`ω・´) もちろんコード書いた…

【SQL】バックエンドド素人によるMySQL及びSQLメモ

あけましておめでとうございます。 接続 mysql -u username -p dbname; 接続解除 exit データベースの追加 CREATE DATABASE dbname; データベースの確認 SHOW DATABASES; データベースの削除 DROP DATABASE dbname; ユーザーの設定 grant all on blog_app.* …

【レポート】面白法人カヤックのフロントエンド「面白コーポレートサイト」の演出手法!Canvas、スクロール芸、ゲーミフィケーション、etc.

これに行ってきました。 カヤックのHTMLファイ部部長による講演です。 参考になった部分を挙げていきます。 面白法人がつくるコーポレートサイト 面白コーポレートとは 従来のポートレート 大量のページ 堅いイメージ カヤックの作るコーポレート シンクスマ…

-スマホUI勉強会 iPhone6で変わるUI、変わらないUI-に行ってきました

更新 スピーカーさんのslideshareへのリンクを張らせていただきました。 まだアップされていない方も、アップされ次第追加する予定です。 dots.経由で参加してきました。 開催日 2014/10/20 会場 シナジーカフェ GMO Yours 余談なんですがこのシナジーカフェ…

理想的なCSSの設計について

css

ついこの間仕事でクソみたいなcss書いて修正時に死んだ経験を踏まえて、設計をしっかり勉強することに。 現行のCSSが持つ問題点 定義が全てグローバル扱い スコープ?なにそれおいしいの? <div class="alert-btn"> <a href="#">送信する</a> </div> .alert-btn a { text-decoration: none; } a { text-dec…

transitionでheightをautoにしても動かない

困った経緯 インターン先で、ボックスを固定の高さに折りたたみ、クリックで元の高さに広げる処理を実装することになった。 これは仕様 リファレンスにtransitionでアニメーション可能なプロパティが掲載されている。 height, min-height, max-height : leng…

【jQuery】on()メソッド内の関数に引数を渡したい

時って結構多い気がします。 function greet(phrase) { console.log(phrase); } $("hoge").on("click", greet("おはようございます")); コードをこう書くと、 ページが読み込まれたタイミングでgreet()が実行される。 これを回避するためには、 1. 無名関数…

Javascriptでスクロール量を取得する時の話

今更だけど、自分はパララックスデザインが好きです。 好きなものが流行ってると見る機会が多くなってニヤニヤできるからとってもうれしい。 ちなみにパララックスを導入する時にはjQueryプラグインを使うとめちゃめちゃ簡単に導入できる。 skrollrとか。 で…

canvasで花火(らしきもの)

前回ホタルを描いてみたので、今回はその応用として花火です。 サンプル サンプル クリックしてみてね。 コード(Javascriptのみ) // 定数 var HANABI_NUM = 75; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var GRAVITY…

canvasでホタルを描いてみた

canvas使ってる色々なサンプル眺めてたら作ってみたくなりました。 夜、明かりを消してディスプレイを見た時(目に良くないけど)、画面いっぱいにホタルが舞ってたらなんとなく癒やされるなーなんて。 ライブラリやフレームワークを使わず、純粋なJavascript…

オブジェクト指向を意識してコードを書いてみた

今までオブジェクト指向に則ったコードの書き方とか全く意識したことがなくてですね、 ワークショップとかセミナーとかで現場で働いている方のコードを見た時に「なんだこれ」っていう顔にならないように確認しておこうと思いました。 そもそもオブジェクト…

Javascriptを使ってテキストフィールドの内容をリアルタイムで表示させる

これまたお仕事関係で使いそうなので先回りでコードを書いてみました。 コード ※chrome想定 <textarea id="text"></textarea> <div id="output"></div> window.onload = function() { var txtEl = document.getElementById('text'), outputEl = document.getElementById('output'); txtEl.addEventListener('keyup',…

Javascriptを使って選択しているテキストを取得する

今インターン先で担当しているお仕事に使えそうなのでメモします。 コード ※chromeでの使用を想定しています <div>あいうえお</div> <button id="btn">取得する</button> window.onload = function() { var btnEl = document.getElementById('btn'); var str = ''; btnEl.addEventListener('click'…

クロージャを本能的に理解できない理由を考えたらあっさり解決した話

Javascriptを勉強している方なら誰でもぶち当たる壁、クロージャ。 「クロージャを理解する=Javascript初心者卒業」とまで言われてたりしていますよね。 サンプルを見たりコードを書いたりしてなんとなくどういうものかは掴めてたのですが、 「関数内でretu…

Javascriptの関数定義、実行についてのおさらい

タイトルまんまです。 クロージャとかスコープチェーンとか調べてる間にこんがらがってきたので確認のため。 関数定義と実行のパターン 1:function命令 function test() { console.log('hoge'); } test(); // hoge 関数funcを直接定義しています。 関数名()…

cssで三角形を表現する

css

見出しのデザインする時って、大体デザインのパターンが決まってますよね。 アイコン使ったり、下にボーダー引いたり、背景塗りつぶして文字を白抜きにしたり。 ボーダーや白抜きはCSS2だけで完結できちゃうんですが、アイコンを使う場合はbackground-image…

ブログはじめました

書こう書こう思って結局こんな遅くなっちゃいました。 ブログを書くことで自分の頭の中を整理しつつ、公開することで勉強した内容を定着できればと。 これまで自分の陳腐な勉強内容を公開するのも恐れ多いと思っていたのですが、そんなこと気にしてたら成長…