はてなブックマーク

とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if

会員ユーザーが問い合わせフォームを利用する際、ユーザー情報を自動で追加することができます。Contact Form 7を利用し、これらを実装してみます。 元記事 下記エントリの転載になります。 WordPressで会員制サイトを構築してみよう（Contact Form 7との連携） 利用プラグイン Contact Form 7 問い合わせフォーム管理プラグイン（バージョン 3.9.3 で試しています） 実装方法について 今回は、下記の２種類の方法を試しました。 （方法1）ユーザー情報を自動でフォームに入力 →　問い合わせページにアクセスした時に、既に入力済みの状態にします （方法2）ポスト時にユーザー情報を追加 →　フォームは最低限の項目だけにし、ポストされた後に情報を追加します （方法1）ユーザー情報を自動でフォームに入力 問い合わせフォームを作る 管理画面「お問い合わせ」で、フォームを

"Gianism" というプラグインを利用すると、最近流行りのSNS連携を利用したログインを簡単に実装することができます。今回はFacebookとの連携を試してみます。 元記事 下記エントリの転載になります。 WordPressで会員制サイトを構築してみよう（GianismでSNSログイン） 利用プラグイン Gianism バージョン 2.2.1 で試しています こちらの製作者さんは日本人で、プラグインの更新頻度も高いです。 Facebookの事前設定 Facebookアプリの作成 SNSログインを行うには、事前にFacebook Developersにてアプリの申請が必要になります。 まずDevelopersサイトにログインして、「Add a New App」を選択します。 今回はWebサイトへのログインなので、一番右の「Webサイト」を選択します。 サイト名を記述し、「Create〜」

GTmetrixやPageSpeed Insightsのスコアを上げを上げるための方法です。 細かい分析は専門家に丸投げしたいところですが、フロント寄りの人でも対応出来そうな、お手軽な項目をまとめてみました。 この記事に関連のあるキーワード： Nginx、Sass（Scss）、JavaScript、HTML5、CSS3、UI 元記事 下記エントリの転載になります。 Webサイトを分析してサイトを高速化させ、AA評価を目指す（お手軽版）- rokuro Fire 目次 GTmetrix、PageSpeed Insightsとは？ フロントエンドの対策 document.writeを一匹残らず駆逐 外部JavaScriptファイルの非同期読み込みと、読み込ませるタイミングの変更 ソーシャルボタン系スクリプトの対策 CSSのファイル数を減らし、@importを駆逐 CSSの圧縮（Compassを

canvasに表示した画像から、カラーパターンを作成するスクリプトを書いてみました。処理にweb workersを利用しています。 処理の流れ canvasで画像を読み込み、全ピクセルデータを取得 workerを作成し、ピクセルデータをworkerに渡す workerで、色取得の処理を行う workerから、取得した色データを返す UIスレッドでの処理 下記2つの処理はUIスレッド側に書きます。 canvasで画像を読み込み、全ピクセルデータを取得 workerを作成し、ピクセルデータをworkerに渡す // canvasで画像を読み込み、全ピクセルデータを取得 // canvasにはdrawImage済とする var pixels = canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height) // work

$ top top - 16:10:42 up 10:06, 2 users, load average: 0.00, 0.01, 0.05 Tasks: 75 total, 1 running, 74 sleeping, 0 stopped, 0 zombie %Cpu(s): 0.0 us, 0.0 sy, 0.0 ni, 99.7 id, 0.0 wa, 0.0 hi, 0.3 si, 0.0 st KiB Mem: 1012128 total, 477528 used, 534600 free, 44504 buffers KiB Swap: 1046524 total, 0 used, 1046524 free, 134900 cached PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND 821 mysql 20 0 6

# postのインスタンスを作成 irb > post = Post.new => #<Post id: nil, title: nil, created_at: nil, updated_at: nil> # 空のインスタンスを確認 irb > post => #<Post id: nil, title: nil, created_at: nil, updated_at: nil> # post.author_postsの確認 # 空のArray irb > post.author_posts => #<ActiveRecord::Associations::CollectionProxy []> # post.authorsの確認 # 空のArray irb > post.authors => #<ActiveRecord::Associations::CollectionProxy

元記事 下記エントリの転載になります。 【Ruby】RSSを取得し、DBに保存してみる - rokuro Fire 前提 ・mysqlを利用 ・DBの接続情報を外部ファイル（database.yml）にまとめてある ・ActiveRecordを利用 ・インサート処理はBULK INSERT RSSの取得 RSSを取得して、その情報をDBに入れてみます。 require 'date' require 'rss' require 'mysql2' require 'active_record' require 'activerecord-import' # database.ymlにDB接続情報を記述 # ActiveRecordを利用 config = YAML.load_file('database.yml') ActiveRecord::Base.establish_connection

Adobe Edge Inspectを、ローカル環境xバーチャルホストxWordPressで使う方法をメモ。 Adobe Edge Inspectとは？ Adobe Edge Inspect PCで表示しているWebサイトを、同時にスマホでも表示させることが出来るアプリです。クロスデバイスで表示確認することができ、レスポンシブの時には重宝します。 準備 面倒だけど、まずいろいろとインストール。 Creative Cloud（無料）にサインインし、PCに「Adobe Edge Inspect」をDL＆インストール Google Chromeに「Adobe Edge Inspect」というエクステンションをインストール スマホに「Adobe Edge Inspect」アプリをインストール 前提 PCとスマホが同じwifiネットワークに接続している。 ローカル環境にApacheがインストールされ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?