自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。~イベントによって表示・非表示を切り替える~こんにちは、マリンです。今回はボタンクリックなどのイベントによって簡単に要素の表示・非表示を切り替えようと思います。任意の要素の表示・非表示をボタンのクリックで切り替えます。ボタンを押すと要素を非表示に、もう一度押すと表示させます。<p>この部分を切り替えます。samples.switchDisplay();</script>上から順番に解説します。<p>この部分を切り替えます。</p></div>この部分が表示したり非表示にしたりする要素です。target-elementはjQueryでこの部分を特定するためのセレクタです。data-display="on"は、現状が表示中かどうかを判定するためのものです。switch-display">Switch</button>表示・非表示の切り替えボタンです。Bootstrapを使っているので、btnなどのクラスでスタイルを当てています。switch-displayはイベントの対象となるセレクタです。SamplesController上から順番に解説します。'on'.switch-display(ボタン)がクリックされたら、まず切り替え対象の要素の持つdata-displayの値がonであるかそうでないか検証します。切り替え対象の要素をhide()で非表示にします。切り替え対象の要素をshow()で表示にします。切り替えの着火剤となるイベントhideによる非表示showによる表示この3点です。今回はイベントをクリックにしましたが、hoverなどで自作のポップオーバーに使ったりなどイベントを変えればいろいろと応用が効くと思います。ツールこんにちは、まりんです。クライアントからこんなアイコン使って欲しい!といわれ、そんなのねーよ!!という事が多々あるようです。この前唐突に、上司からアイコン作るスキル身につけて欲しいんだけど。マジかよ!?という事で、今回ちょっとやってみました。「独自アイコンをWebアイコン化し、それをRails5で使ってみた。Chrome使用アプリicomoon今回は元素材はこちらでお借りしました。icooon-mono.com使いたいアイコンのページからSVG形式でダウンロードしてください。本当にアイコン作るところからやる場合は、IllustratorやInkscapeなど、SVGで出力できるアプリを使って作成して下さい。(イラレは高いので私はInkscapeにしようと思っています。)Webアイコン使用までの流れ素材(SVG)をicomoonでWebアイコン化するWebアイコンをダウンロードして必要ファイルをアプリケーションに移動ファイルの移動先に合わせてダウンロードしたstyle.cssを書き換えassets/stylesheets/application.scssからimportで読み込む詳細それでは一つずつの詳細を説明します。素材をWebアイコン化する今回はicomoonというアプリを使って行います。元となる素材をアップしてそこからダウンロードするだけでできるのでとてもお手軽です。1まずは左上のボタンから素材のファイルをアップロードします。今回は1枚だけですが、複数アップロードすることが可能です。2Webフォント化する素材を選択します。ここでも複数選択が可能で、今後アプリで使用したいアイコンをまとめてダウンロードすれば、オリジナルのアイコンリストを作れます。今回はアップロードしたものの他に、追加したBrandsと言うライブラリのニンテンドーswitchのアイコンと、デフォルトで表示されているIcoMoonのHomeアイコンを一緒にダウンロードしてみます。*ちなみに写っていませんが、ページの一番下にライブラリ追加のリンクがあります。3選択すると、下部の真ん中のSelectionの数が増えます。4右下のボタンでWebアイコンを作成。Webアイコン化するファイルの確認ページに飛びます。1ここで付いている名前がそのままアイコン使用時のクラス名になります。アップロードしたアイコンが日本語になっているので編集します。他にもアイコン画像をクリックすれば、拡大縮小や反転などの簡単な編集も可能です。2編集、確認が終わったら右下のボタンでダウンロードして下さい。必要ファイルをアプリケーションに移動ダウンロードしたフォルダを解凍したら、必要なファイルをアプリケーションに移動します。必要なファイルは上記のfontsフォルダ下のものと、style.cssです。railsアプリのvendor下に置きます。vendorの中にassetsをまず作り、その下にfontsとstylesheetsを作ります。一応専用のフォルダをそれぞれ作ってそこに入れます。style.cssstyle.cssの書き換え先ほど移動した構造に合わせて、ダウンロードしたstyle.css内のurlの部分を書き換えます。私はここの指定が不十分だったがために余計な時間や手間を使ってしまいました。assetsなので、追加した専用フォルダ名からで大丈夫です。*今回はRails5なのでconfigの方の設定は入りませんでした。確認はしていませんが、もしかしたらRails4以下ではプリコンパイルなどの設定がいるかもしれません。こちらで大変詳しく説明して下さっています。qiita.comapplication.scssで読み込む最後にassets/stylesheets/application.scssからimportでライブラリを読み込みます。ここでも専用フォルダ名が必要になるのでご注意ください。*直置きの場合は入りません。以上で実際にviewで使用するまでの準備は完了です。Awesomeなどのようにクラスにicon-~のアイコン名を入れて使います。icomoonの場合は<span>にクラスをつけるようにしてください。class="icon-nintendoswitch"></span></div>無事表示できました。まとめWebアイコン化して表示させるまでは簡単ですね。問題はアイコンを作れるかどうかです。画力も計算もデザイン能力も全く自信がないのですが。それはさておき、途中にも書きましたがこれはRails5での方法になります。Rails4以下ではvendorに置いたものをデフォルトで探してはくれなかったりするようなので、おそらくconfig/initializers/assets.rbなどに設定する必要があるかと思います。今回はこちらの記事を参考にさせていただきました。プログラミングこんにちは、マリンです。今回はjQueryでの式展開についてです。ググってみたのに見つからない。調べているうちに「はっ!!」と気付いたのです。「これ、式展開だ!!」と。ことでこういった副題が付いています。基本、記述方式はCoffeeScriptです。今回検証で使いました例のソースコードです。2まあボタンはどうでもいいんですけど、これ押すとコンソールに表示されるって使用でつけました。このクリックイベントの中に後述の式展開を書いていく感じで。以後そこのみ書いていきます。jQueryでの式展開の色々やり方は3つあります。#{}+,#{}これが純粋な式展開ではないかと思います。1}]")console.log(classC.text)[実行結果]AAABBBCCCそれぞれ属性値の指定に、予め値を入れておいた変数を使用しています。その中でさらに計算させることも可能です。"を区別しないみたいなんですが、これはcoffeeだからだなんでしょうね、#{}の式展開はダブルクォーテーションの中じゃないと使えませんでした。+こちらは前後の文字列と+を使って連結する方法。']')console.log(classC.text)実行結果は前回と同じです。classBに注目していただきたいのですが、これは単純に一つの文字列を前後に分け、その間に変数を入れて繋げる方法ですので、クォーテーションはシングルでもダブルでも大丈夫です。その次のさらに計算をする方法ですが、こちらは計算部分をカッコで囲ってください。計算の順番が関係するということですね。「は?」と怒られます。ここまでやってきて初めて計算の順番を意識しました。最後は文字列の後ろに展開したものをくっつけるときに使えます。文字列の間には入れられませんので、表題とはズレた番外編です。classA.text)の部分です。文字列の後にカンマで区切ったclassA.textを展開してくっつけています。式展開の一種ではないかと思います。まとめ今回そもそもの問題だった「記述が理解できない」部分に関しては、おそらく式展開の問題ではなく、コードの読解力だと思います。変数という構造であることを理解できていればこんなことにはなりませんでした。+'という塊で捉えてしまったんですよね。他人が書いたコードを読むときなどにちょびっとだけ役立てるのではないかな?なんて思ったりなんかして。SQLこんにちは、マリンです。前回の続き、次は外部結合についてです。結合したテーブルの指定したカラムの値が一致するものに加え、どちらかのテーブルにしかないレコードも取得します。どちらかというのは、基準とするテーブル(つまり左か右か)によって変わります。例に使うテーブル構造を記述しておきます。条件LEFTまたはRIGHTはどちらのテーブルを基準にするかを示しています。並び順や、前述したこちらのテーブルにしかないレコードもテーブル1の物が表示されます。詳細それでは例を使った詳細です。railsでの方法には私が職場でよく使用するincludesをご紹介します。内部はjoins、外部はincludesのみご紹介させていただきます。JOINなので、carsが基準テーブルになります。[Rails]Cars.includes(:owner)こちらが基本形。同等の値を取得することができます。4)と言うSQLが発行されます。ご覧の通り、まずcarsの全カラムを呼び出し、その後上記のowner_idを元にownersの該当レコードを取得しています。二度手間感がありますね。そんな時はreferencesを使います。includesとreferencesをセットで使う先ほどの基本形でも取れる値は同じなのですが、もっとスマートに1回のSQLでinclude先のレコードも取ってくることができます。それがreferencesメソッドです。"cars"."owner_id"となります。ご覧の通り、SQLは1回のみでownerのレコードも取得できています。JOINになっていますね。外部結合として使うのであれば、こちらがお作法的には正しいのかな?なんて思ったりしました。出てきてしまうと思います。オーナーのいない車もテーブルに入っているため、そこのオーナー名が引っかかってしまっているわけですね。このような時はtryを使うと便利です。try:対象がnilでない場合のみメソッドを呼び出す。owner.nameと同じことをやってくれるということです。tryの方が短く済んで良いかなと思います。car.owner.try(:name)endこれできちんとオーナーの名前も取得でき、もしオーナーが空の場合には取得しない。いうことが実現できます。他にもeager_loadやpreloadなどもあります。内部結合でも様々な方法がありますので、ご興味のある方は調べてみてください。自分で色々試しながら理解してきましたが、まだまだ自信がない部分も多々あります。何か間違っているところなど御座いましたらぜひご教示ください。最後に、今回こちらの記事に大変助けられましたのでご紹介しておきます。SQLこんにちは、マリンです。今回はSQLの内部結合と外部結合についてです。〇〇結合とは?まずはそもそものお話しです。〇〇結合とはなんぞ?は?そこから?と思った方は飛ばして下さい。基本は「一つのテーブルから条件に合致するデータを取り出す」だと思います。sample_tablesだけでは探せないですよね。この場合検索条件に出せるのはここで出たsample_tablesのカラムだけです。こんな時に使えるのが〇〇結合です。結合させて取得する事が可能になります。次からはその結合方法について解説しますので、その前に例として使うテーブル構造をば。それぞれのテーブルから指定したカラムの値が一致するレコードだけを結合します。ポイントは、「一致するレコードだけ」という点です。一致しないものや、そのカラムがnilのものなどは除外されます。一致したものを結合します。SELECTを指定しなければテーブル1の全カラムが対象になります。詳細では例を使って詳細を解説します。ここからはRailsでの書き方も追加します。owners.id[Rails]Car.joins(:owner)carsテーブルとownersテーブルを結合し、cars.owner_idとowners.idの値が一致するレコードをくっつけます。16:08:08">]>こんな感じで条件に一致するレコードが取得できます。"elgrand"は除外されています。JOINのownersの値も取得できます。そちらも検証してみました。JOINの方のカラムを取得する場合にはSELECTでそのカラムを指定する必要があります。詳しくは補足をご覧ください。【番外】結合した方のカラムの値を取得してみる結合後のレコードからownersのnameを取得してみます。nameというカラム名が両テーブルでかぶっているので、結合時に別名をつける。owner_name")endSELECTの中でowner.nameをowner_nameに変更して値を取得します。次に、上で取得・連結したレコードの中からrailsでowner_nameを取り出します。"jiro"]と結果が出るはずです。並び順はcars.idの順番に並んでいます。まとめ最後に内部結合のポイントをまとめておきます。値が一致したレコードのみを取得、結合する基準となるテーブルは右側(FROM)のテーブル基準テーブルは並び順などに関係してくる基準テーブルについては結合全体で関係してくることです。JOINのownersの値も取得できます。書きましたが、これはその後の番外で解説したSELECT句に結合する方のカラムを指定した時のみ、そのカラムの値を使用できるようです。試しにOwnerモデルの方でCarsをjoinして以下のようにやってみましたが、NoMethodErrorが出ました。%>モデルを以下のように書き換えるときちんと表示できました。ー内部結合ーTweet広告を非表示にするもっと読むコメントを書く2018-03-28【jQuery】Ajaxでサーバー側にアクセスするjQuryこんにちは、マリンです。「Ajaxでサーバーのアクセスする」と言う意味がわかりました。嬉しくて思わず書き記したくなりました。Ajaxとは?従来とAjaxの違いつまるところAjaxを使ってサーバーにアクセスする使い方Ajaxとは?ウィキペディアによると、Ajax(エイジャックス、アジャックス)は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。動的にページの一部を書き換えるというアプローチを取る。......え、なんて??理解力の乏しい私にはなかなかです。順を追って噛み砕いてみましょう。従来とAjaxの違い通常のデータ通信は同期通信と言って、クライアントがサーバーへリクエストを送り、そのレスポンスを受け取って画面遷移を行うという流れです。クライアントとサーバーのリクエスト・レスポンス、それぞれの送受信のタイミングが揃っていないといけないので、レスポンスが帰ってくるまでの間他の処理はできません。双方が同期しているので、同期通信です。「リクエストは送るが、レスポンスが帰ってくるのを待たない」という通信方法です。待たないということは、その間に別の処理を行えるということです。「ウェブブラウザ内で」という点もポイントです。画面遷移をしなくて済むということです。mapで見てみましょう。mapは地図をドラッグすると、自動的に新しい未表示部分を表示してくれますよね?これはJavaScriptが足りない地図を非同期通信でリクエストしてくれているからです。画面遷移しないのでいちいちリロードすることもありません。動的にページの一部を書き換えるというアプローチを取る。結果出たらそれに合わせて画面調整するから教えてね。その間に先進んどきます!ということを可能にする仕組みがAjaxです。語弊があったら指摘してください!!Ajaxを使ってサーバーにアクセスするさてここからが本題です。理解が浅かったせいで気づかなかったんですね。JavaScriptを使ってサーバーにアクセスするってことは、ブラウザ側でデータ扱えるってことじゃないですか!仕事でjQueryとかも書くようになってきた最近。ここJSだからデータ取ってこれないもんなぁ〜。」ってことが度々ありました。これを解決してくれるわけですね!いや、そもそもそのためでしょ?ってのはよくわかってますから!なので今更ながらAjaxの利用価値に気づいたというお話です。