Code Serendipity

Keyword: Ruby, Python, javascript, RoR, heroku, AWS...

Code Serendipity

Keyword: Ruby, Python, wordpress, javascript, AWS...

wordpressに独自のユーザープロフィール項目を追加する<textarea形式/input形式>

wordpress のユーザープロフィールに新しい項目を追加したいとき、 それをテキストフィールドとしてインラインのフォームで表示する方法はたくさん載っているけれど、 テキストエリア形式にするにはどうしたらいいんだろうか、ということを調べましたのでま…

OAuthの仕組みとchrome拡張機能への利用

OAuthとは? 「facebookの自分のアカウントを今使っているサービスと連携したいと考えている花子」を例に出すと, facebookに花子が登録した情報や投稿、花子がアクセス権限を持つ各種機能(facebookの友達の情報を見たり投稿を読む)に対し、 花子の許可を受…

Rails5 user_idじゃなくてusernameでusers#show

twitter.com/kansiho みたいな感じでuser nameでusers#showにつなげたいときありますよね。 config/routes.rb Rails.application.routes.draw do get '/:username' => 'users#show', :constrain => { :username => /[a-zA-Z-]+/ } end このとき、最終行に書…

Rails5でDeviseにプロフィール画像項目を追加するときのTips

gemを入れる deviseはインストールされている前提で進めます。 gem 'devise' # 以下、追加 gem 'carrierwave' gem 'mini_magick' uploaderを作る $ rails g uploader Avatar avatar_uploader.rb で, include Carrierwave::MiniMagick をコメントアウトして有…

WebSocketとはなにか

WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つ。 XMLHttpRequest(いわゆるAjax)の欠点を解決する技術として開発された。Ajaxの弱点というのは、クライアントからサーバーに通信できても、サーバーからクライアントに通信を行…

【Rails5】ActionCableリアルタイムチャットを実装。

Action Cableは、 WebSocketとRailsのその他の部分をシームレスに統合するためのものです。Action Cable が導入されたことで、Rails アプリケーションの効率の良さとスケーラビリティを損なわずに、通常のRailsアプリケーションと同じスタイル・方法でリアル…

Ruby on Railsユーザ向け速習CoffeScript + vim のシンタックス設定

Ruby on Railsの生みの親であるDHHが、次期バージョンのRails3.1でjQueryやSCSSと合わせて、CoffeeScriptをデフォルトとして採用するとTwitter上で発言して注目を集めた. Rubyist, Pythonia にはとっても馴染みやすいので, 手っ取り早くこれを頭に入れておけ…

RailsではじめてのVue.js :サンプルコード

Vue.js とは Vue.jsはMVVMと呼ばれる設計パターンを採用しているフレームワークです。MVVMフレームワークではModel、View、 ViewModel の3つでアプリケーションを構築します。このシリーズでは、設計パターンに関するややこしい話については触れません。双方…

全然Windows開発したことのない人がVisual StudioでVisual C++でHello Worldやる時に読むといいまとめ(超基本)

Visual Studio とはmicrosoft の統合開発環境である。今回はMacに入れたwindows でVisual StudioからC++でコードを書くという初めての試みの3乗をやるので、念のためブログに調べたことを書いておく。ちなみに私は今までターミナルのvimでRailsアプリを作る…

Macしか使ったことのない人間がBootCampでWindowsを入れてMacライクにする

Windows OSでしか動かないソフトウェア, ハードウェアをどうしても使いたかった。macbook2016 8gbでは、Virtual Boxみたいな仮想環境だと動作が鈍くなりそうだと思い、Mac 標準機能であるBootCampを利用することにした。 なおparacellという選択肢もあったが…

WebSocketとはなにか

WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つ。 XMLHttpRequest(いわゆるAjax)の欠点を解決する技術として開発された。Ajaxの弱点というのは、クライアントからサーバーに通信できても、サーバーからクライアントに通信を行…

3Dプリンタから4Dプリンタまで。デジタルファブリケーションについて調べてみた

暦本先生の授業を受けて、気になったので調べてみた。 まずは総務省サイトより引用。 デジタルファブリケーションとは、デジタルデータをもとに創造物を制作する技術のことである。3Dスキャナーや3D CADなどの測定機械により、自分のアイデアや個人の身体デ…

Wordpressで独自のユーザー項目を追加し表示する

ユーザー項目の追加 functions.phpにて、 $wb['フィールド名'] = '表示名'; の規則に従い、追加していく。 // ユーザープロフィールの項目のカスタマイズ function my_user_meta($wb) { //項目の追加 $wb['twitter'] = 'twitter'; $wb['facebook'] = 'facebo…

wordpressの子テーマのheader.phpに独自jsファイルを挿入する(例:smooth scroll ライブラリ)

header.php に, smooth_scroll.js を挿入する smooth_scroll.jsは、 jQueryに依存せずに、 スクロール速度や加速度を制御できたり、 コールバック関数を作れたりする素敵なライブラリです。 子テーマ内の、header.phpファイルのheadタグにて、 <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/追加したjsファイル名"></script> としてあげま…

javascriptのスコープとprototypeについて

スコープ JavaScript には、グローバルとローカルの 2 つのスコープがあります。 関数定義の外部で宣言された変数はグローバル変数になり、プログラム内のどこからでも値の参照や変更を行うことができます。 関数定義内で宣言された変数はローカル変数になり…

今日からfloatは使うな!便利すぎるflexボックスについてまとめてみる

flexプロパティは、横並びの要素に対してとても便利なプロパティです。float, clearを使っていた時と比べ、コードが1/3くらいになるというのが体感値です。要素を逆並べするなど、float, clearのセットでは実現できないような挙動もシンプルに実現できます。…

javascriptでDOMを操ろう. バックエンドエンジニアのためのDOM操作関連スニペットまとめ

バックエンドエンジニアがjavascriptを学ぶメリットはたくさんあります。javascriptメソッドを活用すると、数十行かかっていた挙動がjavascriptの1コードで達成できる、といったことも。「JavaScriptを1行書くだけで、バックエンド専業エンジニアが不要にな…

コードと公式ドキュメントから読む:Chrome拡張機能開発、ゼロから解説

Chrome拡張機能開発のイロハからマネタイズモデルまで説明します。 Chrome 拡張機能を利用するメリット 拡張機能にしか提供されていないChromeのネイティブのAPI群を利用してアプリケーションが開発・連携できるところ。 例えば、Chrome Tab API で開かれて…

font-awesomeに飽きたら使いたい、いろいろなアイコン

リンク末尾のハッシュの値によって開くタブを変える【Bootstrap, jQuery】

ウェブブライザごとの仕様をオフにするstylesheet #随時追記

【Carrierwave, devise, omniauth, Rails】なぜかユーザーが作成できない時のデバッグ方法

pry.binding でエラー箇所確認 User.createでエラーが出ていると判明 User.create! に直してエラー文表示 imageMagickのローカルPCへの未インストールが原因だった

【新型mac関連】周辺機器の規格についてまとめ【USB-C、thunderbolt、HDMI、DVI、VGA、その他色々なUSB規格】

新しいmacbook12inchにして、初めてパソコン周辺機器の規格を意識した人も多いのでは。新型macを取り巻く、いろんな規格と経緯についてまとめてみました。

ボタンを押したらスクロールダウンが始まり、指定の位置まで下がっていく実装をデザインまで[javascript, jQuery, css]

被扶養者だった学生がいきなり起業するときのお金のことまとめ【税務署への届け出・社会保険・会計ソフト・法人口座開設・役員報酬・Mac購入は経費になるのか】

学生として親の扶養に入っていた自分が、法人登記をするにあたって調べたことのまとめです。基本的には自分用まとめなので、見にくいかもです。

いろいろなjQueryプラグイン

よく使われるフロントライブラリを集めてみた。 あくまで「使う」ではなく、「読める」「適切な位置に置く」ための参考程度の情報。

herokuでmysqlを使う

git で100MB超えファイルをcommit してしまい push reject された時

たとえばvendor/bundle以下のgemファイルを全部コミットしてしまった!といった場合。

ストアとかで買ったhtmlテンプレートをrailsプロジェクトに埋め込む

Themeforestとか、bootstrapwrapなどのテンプレートサイトで購入したテンプレートを、railsで埋め込む際のTips。

【Rails, ajax】remote:true なリンクでデータベース操作とビューの書き換えをやる【noticeも出す】

基本 前提: users_controller.rbのactivate_userアクションにおいて、ajaxを使う ajaxとは何か:WEBブラウザに実装されているJavaScriptのHTTP通信機能使って、Webページのリロードを伴わずにサーバーとデータのやりとりを行う処理。asynchronous JavaScrip…

herokuでカスタムエラーページ&メンテナンスモード

javascriptイベントで作成した要素に対してonイベントが効かない

対処法:動的に変化する要素のイベントは、変化しない親の要素に仕込む。

rails メール一斉送信 #自分用メモ

/tmp/users.csv にデータを出力 SELECT * FROM users INTO OUTFILE ‘/tmp/users.csv’ FIELDS TERMINATED BY ‘,’ OPTIONALLY ENCLOSED BY ‘“’; 一斉送信 User.all.each do |user| MessageMailer.send_diffusion(@message, user).deliver! end 管理画面からメ…

railsの画像はどこに置くのが良いのか?

どう選ぶのか 結論、assetのコンパイル対象にしたいならassets以下、ブラウザのキャッシュコントロールのためのバージョン管理化に置かれなくていいならpublic以下に置くと良い。 基本的にはシステム側で作る画像はassets以下、ユーザー側のアップロードする…

かんたん自作シェアボタン | Ruby で動的にツイート内容を変える

Ruby で日本語を含む文字列を扱うために、URLモジュールを入れる ブラウザは、URLにエスケープされた文字列が含まれていた場合それを展開して表示するが、通信するときはエンコードしている。そのため、a href =“"に入れる日本語はエンコードしておく。

delayed_job

※ githubの重点箇所を英訳。 delayed_job 3.0.0は Rails 3.0以上しかサポートしていないのに注意。 delayed_job を Active Recordで使いたいなら, delayed_job_active_record をGemfileに加える. gem 'delayed_job_active_record' Active Record バックエン…

すごいシンプルなログインなしセッションでのユーザー情報保存機能【rails】自分用メモ

シチュエーション クイズアプリで、わざわざログインさせたくないけど10分間くらいユーザー情報を保存して(次の問いに繋げるといったことをして)いたい。 ECサイトのカートに入れる機能 ECサイトのお気に入り機能 投票機能で、同一セッションで多重投票さ…

rubyのバージョンを2.4.0に上げてRails 5を導入【自分用メモ】

ruby はバージョンを上げるほど高速になりますし、ruby 最新版を使うためにはrailsアップグレードも必要です。

Deviseで管理者が承認したらユーザーのアカウントをアクティベートする実装【Rails】

userカラムにapprovedを足す class AddApprovedToUser < ActiveRecord::Migration def self.up add_column :users, :approved, :boolean, :default => false, :null => false add_index :users, :approved end def self.down remove_index :users, :approved…

私のSanDisk16GBが唐突に壊れて思い出の写真が消えたがMini_Tool_Recoveryのおかげで復旧できた話

意気揚々と、SDカードをmacに入れた私。 だがしかし、「なんか読みとれないよ」的な文章が現れる。 macの「写真」アプリも起動しない。 一眼レフにセットした状態ではプレビューできるのにな〜と思い、 もう一度カメラに入れて見ようとしたところ… 「画像が…

女子大学生が法人設立(LLC)をしてきたので感想・苦労したことをまとめます

フリーランスとして請けていたweb制作ですが、だんだん規模が大きくなってきたのと、個人で開発しているウェブサービスもより本格的に運用していきたいとの思いから、法人化を行うことにしました。

letsencryptの更新が上手く行かなかった時のメモ。自動化までの道のり【rails, nginx,AWS,capistrano環境】

既存のletsencryptディレクトリを消しやり直す letsencryptの更新が上手く行かなかった時のメモ。 新しく認証し直す。 まず /etc/letsencrypt/ ディレクトリを削除。 sudo git clone https://github.com/letsencrypt/letsencrypt /usr/local/letsencrypt sud…

君が22歳なら、人生の7割はもう終わっている【ジャネーの法則】

思うところがあったので、きょうは技術メモ以外のトピックを書く。 私は死に焦りを持たない若い人が苦手だ。 人間が時間を測る基準なんで、年といった単位に特に意味はなくて、究極的には体感でしか測ることができない。1000年の重みを私たちは 1生、知るこ…

Railsアプリで自動でURLが含まれたテキストのURLにリンクを貼ってくれるようにしたい

正規表現でやろうかと思いきやセキュリティ的にアレだったりするのかもしれないしgemを利用することにした。 gem で解決 rails_autolink というgem rinkuというgem がある。 <%= raw Rinku.auto_link(h(some_text)) %> 参考 ria10.hatenablog.com qa.atmarki…

railsからfacebookにnotification APIで通知を送る

頻繁にユーザーが見るfacebookに通知を送る方法。 jp.techcrunch.com https://graph.facebook.com/{recipient_userid}/notifications?access_token={application_access_token}&template={Your_Message}&href={URL_to_your_app_or_request} にPOSTする。 2つ…

herokuをletsencrypt使って無料で簡単にSSL化しよう

heroku のSSL化の記事はたくさんあるが、とにかく正確な「最新」の日本語情報がすくない。あとローカルでやる作業か否かがわかりにくい。なので、需要あるかと思い記事にします。 ※ heroku でSSLを使用するには$20/month のアドオンSSL endpointを使わなくて…

ローカルのmysqlでdumpファイルを作りheroku本番環境に流し込む

AWSからherokuに移行するときに必要だった作業。 ダンプとは、デバッグやデータ修復のために、ファイルやメモリの内容をディスクに出力(記録、あるいは表示)すること。 ダンプをつくる mysqldump -u ユーザ名 -p DB名 > 出力先ファイル名 で特定データベース…

Processing入門 ③キーボードやマウスから値を受け取って操作する、画像を表示してフィルターをかける、合成する

キーボードとマウス キーボードのアクションといったイベントにトリガーさせられる。 keyPressed() :キーが1つでも押されているとtrue。 key: 最後に押されたキーを表す文字 keyTyped(): キーが押されるたびに呼び出される関数 (CTRLキー等は除く) keyReleas…

Processing 入門② マウスに反応させインタラクティブに図形を作る、フェードイン、文字の表示

マウスの位置に反応させるには mouseX, mouseYの変数に自動的にその座標が割り当てられる. 簡単! ホバーさせてる位置に図形を描いてみる。 void setup(){ size(855,480); background(0,0,0); frameRate(10); // the less it is , the slower drawing become…

Processing 入門① 動きまくる円を作ってみた

つねづねやってみたかったprocessingをついにいじってみました。 プログラミング初心者でも大丈夫!Processingでデジタルアートを作ろう | 株式会社LIG を参考に基本的なファンクションを押さえます。 setup() 初期設定 背景色 画面サイズなど size([よこ], …