読者です 読者をやめる 読者になる 読者になる

窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

javascript:子画面から親画面のメソッドの呼び出し※配列を渡したかったけど渡せなかった話

javascript

javascriptで下記のようなことが、がやりたくてハマったので、φ(..)メモメモ

  1. 親画面から小画面の呼び出し
  2. 子画面から親画面のメソッドに値(配列)を渡す。

親画面の呼び出し

親画面の呼び出しは、window.openを使用する。

  window.open('childWindow.html'
    , 'childWindow'
    , 'width=600, height=500, menubar=no, toolbar=no, scrollbars=yes'
  )

子画面に値を受け渡したい場合は、URLにパラメータを設定することで可能。

  window.open('childWindow.html?param=' + param
    , 'childWindow'
    , 'width=600, height=500, menubar=no, toolbar=no, scrollbars=yes'
  )

developer.mozilla.org

子画面から親画面のメソッドに値(配列)を渡す。

子画面から親画面のメソッドを呼び出すにはwindow.opener.親画面のメソッド名で可能。

window.opener.parentMethod()

lightgauge.net

このときに配列を引数として渡したかったが、エラーとなるため、暫定的に下記実装で対応した。

// 子画面側
var hoge = {}
hoge.fuga = $('#val1').val()
hoge.piyo = $('#val2').val()
                
// 親画面へ値の受け渡し
// 配列をそのまま渡すとundifinedとなるため「,」区切りの文字列として渡す
// window.opener.taskEdit(hoge) // 親画面で受け取った際にundifinedとなる
window.opener.taskEdit(hoge.fuga + ',' + hoge.piyo)
// 親画面側
function taskEdit(str) {
  var hoge = str.split(',')
  hoge.fuga = str[0] // 子画面のhoge.fuga
  hoge.piyo = str[1] // 小画面のhoge.piyo
}

エラーの原因は、javascriptが配列を渡す際に参照渡しとなっているためのようだが、どう解決すればいいのかまでは、わからなかった。。。 detail.chiebukuro.yahoo.co.jp

RubyonRails:RailsチュートリアルでImageMagickをインストールしたのでメモ

RubyonRails

Railsチュートリアルでローカルに開発環境(CentOS)を作った際にImageMagickをインストールする手順が乗ってなかったので、メモメモφ(..)

第11章の下記のように修正すると、

class PictureUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick       # 追加分
  process resize_to_limit: [400, 400]   # 追加分 

  storage :file

  # アップロードファイルの保存先ディレクトリは上書き可能
  # 下記はデフォルトの保存先
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # アップロード可能な拡張子のリスト
  def extension_white_list
    %w(jpg jpeg gif png)
  end
end

ImageMagickがインストールされていないため、エラーになる。 f:id:madogiwa0124:20170121171935p:plain

install方法

下記を実行すればOK

$ sudo yum -y install ImageMagick

javascript:form上でエンターキーを無効にする方法

javascript

webページ上でエンターキーを押したときにSubmitされるのを無効にしたくて、色々調べたのでメモ

方法:javascript内でエンターキーを検出し、falseを返す。

// エンターキー押下時のsubmitを無効化
$('input').on('keydown', function(e){
  if ((e.wich && e.wich === 13) || (e.keyCode && e.keyCode === 13)) {
    return false
  } else {
    return true
  }
})

onSubmitイベント時にfalseが返されると処理を中断されるため、ページの書換えが行われなくなるようだ。

参考ページ qiita.com

blog.livedoor.jp

javascript:beforeunloadにメッセージを設定できなかった話

javascriptで、ページ遷移時にalertを表示したくて下記ページ等を色々と調べた。

ezolab-blog.net

www.koikikukan.com

// ページ遷移時にalertを表示
$(window).on('beforeunload', function(e) {
  return 'タスクが消えてしまいますが、ページから離れてもよろしいですか?';
});

alertは表示出来たけど、任意のメッセージが設定できない・・・。 f:id:madogiwa0124:20170119004234p:plain

なんだかchromeの仕様みたいなので、あきらめる。

qiita.com

RubyonRails:stack level too deepでハマった話

RailsTutorial中にstack level too deepでハマったのでメモ

エラー画面

f:id:madogiwa0124:20170117000619p:plain

原因

現在ログインしているユーザの取得処理とその呼び出し元のメソッド名が重複していた。

class MicropostsController < ApplicationController
    before_action :logged_in_user,only:[:create,:destroy]
    before_action :current_user,  only: :destroy

    def destroy
        @micropost.destroy
        flash[:success] = "Micropost deleted"
        redirect_to request.referrer || root_url
    end

    private
    def micropost_params
        params.require(:micropost).permit(:content)
    end
   
    def current_user
        # この行のcurrent_userが再起呼び出しになっていた
        # ※本来は、ログイン中のユーザを取得したかった
        @micropost = current_user.microposts.find_by(id: params[:id])
        redirect_to root_url if @micropost.nil?
    end
end

解決方法

呼び出し元のメソッド名を重複しないよう変更した。

class MicropostsController < ApplicationController
    before_action :logged_in_user,only:[:create,:destroy]
    before_action :set_micropost,  only: :destroy

    def destroy
        @micropost.destroy
        flash[:success] = "Micropost deleted"
        redirect_to request.referrer || root_url
    end

    private
    def micropost_params
        params.require(:micropost).permit(:content)
    end

    # メソッド名変更
    def set_micropost 
        @micropost = current_user.microposts.find_by(id: params[:id])
        redirect_to root_url if @micropost.nil?
    end
end

[参考ページ] teratail.com

javascript:HTML上のtableをCSV出力する。

javascript

自作アプリ(TaskBorderTaskBorder)で、HTML上のtableをCSV出力したかったので、色々調べたことをメモ

やりたかったこと

tableタグの内容をCSV出力したかった。

実際にやったこと

jQuery pluginの「table2csv」を使ってみた。

www.jqueryscript.net

下記な感じで意外と簡単に使えたので、メモメモ ①htmlファイル内でtable2csv.jsの読み込み

<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- table2csvの読み込み -->
<script src="src/table2csv.js"></script>

②tableの準備

    <div>
        <table id="table">
            <thead id="head">
                <tr><th>title</th></tr>
            </thead>
            <tbody id="body">
                <td>value</td>
            </tbody>
        </table>
            <button type="button" id="downloadCsvBtn"> 
                 CSV download
            </button>
    </div>

③buttonのclickイベント内にCSV出力処理を追加

$('#downloadHisCsvBtn').click(function () {
    // CSV形式に整形
    $("#table").table2csv('output', { appendTo: '#out' });
    // ファイル名の定義(table.csv)
    $("#table").table2csv('output', { filename:  'table.csv' });
    // CSV出力
    $("#table").table2csv();
})

2016年振り返り:開発・転職・やっぱり現職

日常 振り返り

年末なので、今年を振り返り記事を書いてみる。

2016年の振り返り

アウトプット

年収シミュレーター

jsdo.it

 

キーワードミキサー

 

TaskBorder

 

 Ruby on Rails Tutorial演習回答記事

madogiwa0124.hatenablog.com

 

アプリは、Github.ioでjavascript + html + css(Bootstrap)で作ったものを中心に何本か公開しました。(しょぼいですが。。。)

それとRubyonRailsチュートリアルの演習回答記事を何本か上げました。

インプット

書籍

1.イノベーション・オブ・ライフ ハーバード・ビジネススクールを巣立つ君たちへ 感想 クレイトン・M・クリステンセン,ジェームズ・アルワース,カレン・ディロン - 読書メーター

2.仕事は楽しいかね? 感想 デイル ドーテン - 読書メーター

3.幸せになる勇気―――自己啓発の源流「アドラー」の教えII 感想 岸見 一郎,古賀 史健 - 読書メーター

4.確かな力が身につくJavaScript「超」入門 感想 狩野 祐東 - 読書メーター

5.ムーブ ユア バス 感想 ロン・クラーク,Ron Clark - 読書メーター

6.マンガでやさしくわかる経理の仕事 感想 栗山 俊弘 - 読書メーター

7.プロジェクトの失敗はだれのせい? ~紛争解決特別法務室“トッポ―"中林麻衣の事件簿 感想 細川 義洋 - 読書メーター

8.たのしいRuby 第5版 感想 高橋 征義,後藤 裕蔵 - 読書メーター

9.ピープルウエア 第3版 感想 トム・デマルコ,ティモシー・レスター - 読書メーター

10.アメリカ海軍に学ぶ「最強のチーム」のつくり方: 一人ひとりの能力を100%高めるマネジメント術 感想 マイケル アブラショフ - 読書メーター

11.はじめての社内起業 「考え方・動き方・通し方」実践ノウハウ 感想 石川明 - 読書メーター

12.マーケット感覚を身につけよう---「これから何が売れるのか?」わかる人になる5つの方法 感想 ちきりん - 読書メーター

13.なぜ、あなたの仕事は終わらないのか スピードは最強の武器である 感想 中島聡 - 読書メーター

14.大ヒット連発のバンダイナムコが大切にしているたった1つの考え方 感想 石川祝男 - 読書メーター

15.Think Simple―アップルを生みだす熱狂的哲学 感想 ケン・シーガル - 読書メーター

16.自分の時間を取り戻そう―――ゆとりも成功も手に入れられるたった1つの考え方 感想 ちきりん - 読書メーター

17.職場の問題地図 ~「で、どこから変える?」残業だらけ・休めない働き方 感想 沢渡 あまね - 読書メーター 

webページ

mozer.io

railstutorial.jp

学習会

devlove.doorkeeper.jp

 

振り返ると書籍は、自己啓発本、チームマネジメント、仕事の進め方、アイデア、開発系が多い気がする。

webでは、MOZER(html,css)とRubyonRailsチュートリアルを使った。

 あと学習会(devllove)に始めて参加した。ちょうど転職活動を始めたところで、タイムリーすぎる!と思って勢いで参加したいけど、勉強になった。

日々勉強する習慣を身につけられたのは、今年の大きな収穫だった。

Tweetダイジェスト

 

 

 

 

 

 

 

 

 

  

 

 

結構、暗いTweetが多い気がする。。。

来年は、明るい話題をTweet出来るようにしたい。

 今年の目標

①自分で考えたアプリのリリース

 ▶一応達成したが、もう少しきちんとしたものをリリースしたかった。。。

②実装力の強化(C#・Swift)

 ▶当初考えていた言語とは違い、HTML・CSSJavaScriptRuby(+RubyonRails)を中心に勉強をしていたなぁ。

③転職活動

 ▶これは、結局転職しなかったけど達成。いい勉強になった。

来年の目標

Ruby on Railsを使ったサーバーサイド + フロントサイド両方を実装したwebサービスをリリースする。

②現在行っている社内起業プロジェクトに力を入れて、社内稟議を通す。

③会計システムのリプレース案件を成功させる。

④社外の学習会に3回以上参加する。

⑤本を年間36冊以上読む。

⑥プライベート・ビジネス両面で自分の今後の方針を決める。

⑦webVRに少し手をだす。

 

今年は、色々と大変な一年だったように思う。

決断をするタイミングが多かったけど、先延ばしにしてしまった課題がそこそこある。

今年は、目標と残してしまった課題をきちんと精算し、明るい一年にしていきたい。