Railsからはじめるプログラミング日記

駆け出しプログラマー(主にRuby on Rails)の業務で役立ったコードをメモしていくブログです。自分だけでなく誰かの役に立てれば本望です。

【jQuery】ホバーで動くドロップダウンメニューを実装

ちょっと大きなホームページを作ると、グローバルメニューに下層メニューを置きたくなりますよね。

jQueryを使えば簡単にドロップダウンメニューを実装できます。

【html】

<nav>
  <ul class="dropdown">
    <li><a href="./index.html" title="HOME">HOME</a></li>
    <li class="hover">
      <a href="./about/about.html">大メニュー1</a>
      <ul class="dropmenu cf">
        <li><a href="./about/about.html">下層1-1</a></li>
        <li><a href="./about/greeting.html">下層1-2</a></li>
        <li><a href="./about/history.html">下層1-3</a></li>
        <li><a href="./about/member.html">下層1-4</a></li>
      </ul>
    </li>
    <li class="hover">
      <a href="./activity/upcoming_list.html">大メニュー2</a>
      <ul class="dropmenu cf">
        <li><a href="./activity/upcoming_list.html">下層2-1</a></li>
        <li><a href="./activity/annual_list.html">下層2-2</a></li>
      </ul>
    </li>
    <li class="hover">
      <a href="./publication/journal.html">大メニュー3</a>
      <ul class="dropmenu cf">
        <li><a href="./publication/journal.html">下層3-1</a></li>
        <li><a href="./publication/rmb.html">下層3-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

【js】

$(function(){
    $('.dropdown li.hover').hover(function(){
        $(this).children('ul').show();
    }, function(){
        $(this).children('ul').hide();
    });
});

今回は2階層のシンプルな構造ですが、もっと階層を増やすことも可能です。

【jQuery】同一ページ内の複数タブ機能を実装

HTMLをいじってるとタブを実装したい場面はよく出てきますよね、トップページのお知らせとか。

ページ内にタブ1つだと実装はかんたんなのですが、複数あると全てのタブの動きが連動しちゃうとか、1つはうまくいっているのにもう一方は表示されなくなったとか…

この悩みはけっこうかんたんに解決できるので紹介します。

※コードは該当部分のみ抜粋
※js部分はscriptタグでくくってhtmlに書いてもいいし、別ファイルにして読み込んでもOKです

【html】

<div class="news">
  <h1>お知らせ</h1>
  <ul class="tabs">
    <li class="tab current"><span>お知らせ1</span></li>
    <li class="tab"><span>お知らせ2</span></li>
    <li class="tab"><span>お知らせ3</span></li>
    <li class="tab"><span>お知らせ4</span></li>
  </ul>
  <div class="news_wrap">
    <div class="scroll">
      <div class="panel is-show">お知らせ1の内容</div>
      <div class="panel">お知らせ2の内容</div>
      <div class="panel">お知らせ3の内容</div>
      <div class="panel">お知らせ4の内容</div>
    </div>
  </div>
</div>

<div class="reqruit">
  <h1>求人情報</h1>
  <ul class="tabs">
    <li class="tab current"><span>求人情報1</span></li>
    <li class="tab"><span>求人情報2</span></li>
    <li class="tab"><span>求人情報3</span></li>
    <li class="tab"><span>求人情報4</span></li>
  </ul>
  <div class="news_wrap">
    <div class="scroll">
      <div class="panel is-show">求人情報1の内容</div>
      <div class="panel">求人情報2の内容</div>
      <div class="panel">求人情報3の内容</div>
      <div class="panel">求人情報4の内容</div>
    </div>
  </div>
</div>

【js】

$(function(){
  $('.tab').on('click',function(){
    var idx=$('.tab').index(this);
    $(this).addClass('current').siblings('.tab').removeClass('current');
    $(this).closest('ul').next('.news_wrap').find('.panel').removeClass('is-show');
    $('.panel').eq(idx).addClass('is-show');
  });
});

$(this)とsiblings()やnext()、find()を使って、動作させる.panel要素を限定しています。

これでタブがいくらあっても干渉し合うことはありません。

【Ruby 正規表現】開発環境に本番のデータを入れ込んでテストするときのメアド一括変更方法

ある日届く1通の不吉なメール

「○○のシステムについて、利用者からエラーが出るとの不具合報告があります」

こういうメールは心臓がヒュッとしますよね。

開発環境ですぐに原因が判明するような不具合ならいいですが、本番のデータで試さないと再現がとれないんじゃ困ります!

そんなときは本番のデータをdumpして情報書き換えてテストしちゃいましょう!

まずはデータをdumpする

まずは本番のデータを落としましょう。

sshでユーザログインし、データをdumpします。

pg_dump -O dumpするデータベース名 > 書き出すファイル名.dmp

これで「書き出すファイル名.dmp」というファイルができるので、scpで手元に転送します。

例えばこんな感じです(デスクトップに落としてます)。

scp sshユーザ名@サーバ名~/書き出すファイル名.dmp ~/Desktop

テスト用DBを作成してデータを流し込む

dmpファイルを落としたら、Rails側でテスト用DBを用意してあげましょう。

config/database.ymlに適当な名前でDB名を記載してcreateします。

rake db:create

DBができたらmigrateせずに、dmpファイルを流し込みます。

psql 新規作成したDB名 < ~/Desktop/書き出すファイル名.dmp

これで作成したDBに本番のデータが入ります。

本番用からテスト用にデータ整形

ここからが本題です!

本番データを流し込みましたが問題があります。

ユーザ管理があって、メールを飛ばす機能があるシステムだったら本人にメール飛んじゃいますよね?

そういう機能がないものならいいですが、だいたいユーザ管理ありますよね(ログインとか)。

そこでメアドを3行(省略すれば1行)で一括変換してしまいます。

※今回はgmailを想定し、先頭に「自分のアドレスの@以前+」を挿入し、@以降(ドメイン)を「gmail.com」に変換
例)自分のアドレスが「test@gmail.com」だったら「test+○○@gmail.com」に変換

まずは「rails c」でコンソールを立ち上げます。

そして下のコードを1行ずつ入れていくと…

User.all.each do |u|
  u.update(email: u.email.gsub(/\A(.*?)@.+\z/, 'test+\1@gmail.com'))
end

※先頭に文字列を入れないで@以降のみ変更したい場合はu.email.gsub(/@.+/, '@rabbix.jp')でOK

ユーザのメアドを一気に変換しちゃいます!

正規表現とgsubを使った便利な処理でした。

プログラミングを始めてみたけど意味分かんない!挫折しそうになったときの対処方

f:id:oe526:20190925150504j:plain

最近「プログラミング」という言葉をよく聞くようになった気がします。

私はプログラマーなので当然ですが、テレビやネットでもよく取り上げられるようになったからでしょうね。

2020年に小学生のプログラミング授業が必修化するのが大きいみたいですね。

思い切って始めてみたけどまず何からやるべき?

これからはプログラミングだ!手に職の時代だ!

と張り切って始めてみた人も少なからずいるんじゃないでしょうか?

でも参考書を買ったけど何を言っているか分からないし、サンプルコードに「省略」が頻繁に入っててどこに何を書いたらいいか分からない!なんて人が山程出てくるのが容易に予想できます。

私も今の会社に就職するまでHTMLとCSSの知識しかなかったので、先輩や上司が何を言っているか、まるで理解できませんでした。

最初におすすめされた参考書(Ruby on Rails↓)をやってみましたが、やっぱりどこに何を書いたらいいのか分からなくなってしまうんですよね。

初心者が参考書で勉強するときに躓いてしまう原因は

  • プロジェクトファイルが多すぎる
  • 参考書のページ数都合によるコードの省略が多い
  • 紙なので流れや動きが分かりづらい
  • 参考書のコードにタイポがあってエラーになる

という点だと思います。

1つずつ見ていきましょうか。

プロジェクトファイルが多すぎる

私が最初に手を付けたRuby on Railsでプロジェクトを作成したとき、すごい量のファイルがデフォルトで作成されるんですね。

railsに限らずフレームワークを使う場合はどれも同じようなファイル数になるかと思います。

中身を見ると、appの中にviews、controllers、modelや、assetsの中にjavascripts、stylesheetsなどアプリの構成に関するファイルがたくさん、さらにconfigの中には設定系のファイルがまた盛りだくさんです。

最初から多いのに、開発を進めればさらにファイルは増えていきます。

これでは初心者は迷子になってしまいます。

参考書のページ数都合によるコードの省略が多い

コードをいちいち全部載せていたら、めちゃくちゃ分厚い参考書になるのは分かりますが、省略が多い!!

ひどい参考書だとファイル名と書き込むメソッドだけ記載して、「上記メソッドを書き込んでください」の指示だけのものがあったりします。

もちろんちょっとかじった人や中級者ならそれでも伝わるんでしょうが、初心者には厳しいです。

メソッドだけよこされてもファイル内の構成も分からないのにどこに入れたら良いか分かりません。

とりあえず入れてブラウザで確認したらエラー吐いて、もう嫌になって挫折してしまいます。

紙なので流れや動きが分かりづらい

これも参考書での勉強の問題なのですが、制作しているものの完成形がイメージできないんですね。

参考書では上手く行った結果のスクリーンショットを貼っているだけなので、その結果に行き着くまでのプロセスの動きが分からず、イメージができません。

結局メソッドやテンプレートの意味が分からずに「なんか知らんけど表示はできたぞ」と本質を理解できずに進めてしまいます。

こういう場合は何度もやって覚える必要があるため効率が悪いです。

参考書のコードにタイポがあってエラーになる

これけっこうあります。

参考書のコード通りに書いているのにエラーが出る。

自分が写し間違えたかと確認するが、1字1句間違いはない。

経験者は参考書のコードと自分が作ってきたアプリのコードを見たときにエラーの原因が実はメソッド名のタイポだったというのを特定し、修正できますが、初心者にはかなり難易度が高いと思います。

エラーの原因が分からず、参考書では上手く行っていて、「もうダメだ、詰みだ。」と挫折してしまいます。

実はしょうもないことなんですが、これに気づくのにかなり経験が必要になります。

オススメの勉強法

上で紹介してきた参考書の問題をふまえると、私のオススメは動画での勉強です。

動画だと講師の作業を確認しながら取り組めるので、コードの省略が無いし、ブラウザで確認したときにエラーならちゃんとエラー画面が出ます。

エラーが出たら、原因を見つけて解説付きで直してくれるので、すごく勉強になります。

どのファイルを選択して書き込んでいるかも、動画なので巻き戻しや一時停止で確認しながらできるので便利ですよね。

なにより開発の流れをつかめるのが1番の利点ではないでしょうか。

無料で始められる動画サイトだとドットインストールとProgateがおすすめです!

※本当に基礎の部分のみ公開というサイトが多いです、有料プラン契約でしっかり学ぶことができます

脱・初心者!次は何をしよう?

アプリの作り方や基礎がだいたい分かったら、あとはとにかく経験です!

とにかく手を動かす!セオリーを知る!経験を積むと作りたいものをどうやって作っていけばいいかすぐに判断できるようになります。

Udemyで有料講座を買ってアプリを作る

私も利用しているUdemyという動画サイトがあります。

こちらはドットインストールやProgateと違い、実際にアプリを作成しながら学べる講座が豊富にあります。

講座は1回買い切りで、1度買えばいつでも閲覧できるし、ダウンロードしてオフラインでも見ることができます。

ただ、値段が高いです!1つの講座で¥10,000〜¥24,000が多いです。

しかし、その値段でも損をしたと思わないほどクオリティが高い!!

参考書を2〜3冊かったらあっという間に¥10,000を超えますが、ここの講座はそれ以上の価値があります!

参考として私が購入したことのある講座を紹介しますね。

ここの利点は動画で学べるだけでなく、講師に質問ができることです!

やっているとライブラリのバージョンの違いや、タイポなんかでエラーを起こして詰まってしまうことが多々あります。

しかし、詰まったらスクリーンショットを撮って講師に質問すれば解決策を提示してくれますよ。

私も実際に質問したことが数回ありますが、翌日には返事をもらえました。

さらに動画にはブックマーク機能というものがあり、自分が「タメになった!勉強になるなあ!」という箇所にコメント付きで印をつけることができます。

これから何度も見返すことになるので、気になった箇所はバンバンブックマークしましょう!

講座はかなりボリュームがあるのもが多く、やり遂げたときの達成感はハンパないです。

そして1通りアプリ作成の流れをやるので、かなり力と経験が身につきますよ!

【耳寄り情報】

Udemyではよくセールをやっています。

このセールを利用すると¥24,000の講座が¥1,200〜¥1,500ほどの料金で購入することができちゃうんです!

約90%OFFですよ!利用しない手はないので、受講したい講座があったらお気に入りに入れておいて、セールのときに買ってしまうのがオススメです!

今まさにセール中ですよ!!

世界最大級のオンライン学習サイトUdemy

自分でオリジナルアプリを作ってみる

基礎を学んだ、アプリ開発の流れも学んだ、次は自分のアイデアを形にしましょう!

今まで学んで来たことをフル活用してオリジナルアプリを作りましょう!

でも動画で学んだからといってすぐにすごいアプリを作れる様になる訳ではありません。

しかし確実に欲しい情報を察することだったり、学んだ技術を応用できるようにはなっているはずです。

学んできた動画を見返しながらシステムを設計していきましょう。

Udemyの動画は買い切りなので、何回見ても、何回ダウンロードしても追加料金がかかることはありません。

せっかくお金を出しているんですから、フル活用しましょう!

プロを目指すならスクールに通う

今まで紹介した勉強方は主に独学でやる人向けで、それなりに時間がかかります。

質問・疑問に対してすぐに答えが帰ってくる環境というのはなかなかないんですね。

IT企業に新卒で入って1から教えてもらえるのならいいですが、本業の片手間や、転職のために勉強するなら1人で学ぶ方のほうが圧倒的に多いですよね。

てっとり速くかつ、しっかり覚えたいならオンラインスクールに申し込んでみるのも1つの手段です。

料金はかなり高いですが、熟練の先生が担当についてくれ、いちいち調べていたことを聞くだけで、すぐに答えてくれるのでめちゃくちゃ時間短縮になります。

また、自分からここが分からないということを発信し、相手が答えを教えてくれるというコミュニケーションが生まれるため、記憶に定着しやすいです。

結果、技術の習得が早まり、現場のプロのテクニックを教えてもらえるため、高い料金を払う価値があります。

業界の人と出会うことでツテや人脈も広がり、IT企業への就職につながるかもしれませんね。

申込みの前に無料カウンセリングをやっているスクールもあるので、自分に合ったスクールを探してみてくださいね。

【プログラミングスクール一覧】

まとめ

始めはみんな初心者です。

いきなりコードの意味が分かる人なんて1人もいません。

早く上達するコツは「できる・分かる人に教えてもらう!」に尽きます。

ネットでも動画でもスクールでも同じです、先生が必要です。

指導者がいて、取り組み続けていれば必ずプログラミングができるようになります!

1人でやっているとどうしても続かないですからね、挫折しそうな方はすぐに助けを求めてください!

あなたなら絶対できます!!

【jQuery】リストから1行を削除する

確認画面でのテーブル表示とかでよくやるやつ。

氏名 メールアドレス 申し込み内容 取消
テスト太郎 test@gmail.com 焼き肉 取消
テスト次郎 test2@gmail.com すき焼き 取消

こんな感じのテーブルがあったとき、「取消」をクリックでその1行(tr)を消す方法。

aタグにonClickでちょっと処理を入れたらできちゃいます。

<td><%= link_to "取消", 'javascript:void(0);', onClick: "$(this).closest('tr').remove()" %></td>

※リンクなのでjavascript:void(0);を使ってリンクを動かなくしています

これで1行(tr)が削除される。

氏名 メールアドレス 申し込み内容 取消
テスト太郎 test@gmail.com 焼き肉 取消

【Android】railsで作ったwebアプリをスマホのネイティブアプリのように見せる

railsで作ったアプリをスマホアプリ化したいという仕事があったので手順をメモします。

ざっくり言うとwebView設置してデフォルトのURLをrailsアプリのものにするだけです。

Android編です!

iOS編はコチラ↓ oe526.hatenablog.com

プロジェクトを作成する

Android Studioを立ち上げ、Projectを作成します。 ※このときのバージョンは3.4です

webViewを表示するだけなのでEmpty Activityを選択。 f:id:oe526:20190419100721p:plain

その後、アプリの必要情報を入力。 f:id:oe526:20190419101310p:plain

activity_main.xmlでパーツを設置

設定が終わったら必要なパーツを配置していきます。

activity_main.xmlを開いて…

f:id:oe526:20190419101707p:plain
赤枠の箇所をAndroidからProjectに

WebViewを選択し、画面中央に配置します。

制約を設定

パーツの配置が終わったので、制約をつけてパーツを整えていきます。

といっても簡単で、画面いっぱいに広げたいので、webVIewを選択し、Declared Attributesのlayout_widthとlayout_heightに「match_parent」を設定してやるだけです。
(ついでにidもつけてあげましょう) f:id:oe526:20190419102210p:plain

MainActivityに処理を記載

onCreate()の中にデフォルトURLを設定するコードを記述します。

【MainActivity.kt】

package パッケージ名(自動入力されてる)

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById(R.id.webView) as WebView
        webView.setWebViewClient(WebViewClient())
        webView.loadUrl("http://192.168.10.176:5000/")
    }
}

WebViewとWebViewClientが赤くなる場合はimportが必要なので、赤くなった文字にカーソルを合わせて「option + Enter」でimportできます。 f:id:oe526:20190419103822p:plain

※ローカルのrailsアプリを読み込む場合は、「rails s -b 0.0.0.0」とやってrailsサーバーを立ち上げると読み込めます(同一のネットワーク上にある場合)

また、アプリがインターネットと通信できるよう許可を出す必要があります。

【AndroidManifest.xml】

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="パッケージ名">

    <!-- ↓この1行を追加 -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

動作確認

ビルドしてみると、ドロイド君がエラーを告げていますね。 f:id:oe526:20190419104742p:plain

webviewでhttpのサイトは見れませんよということです。
暗号化されたhttpsのものなら問題なく表示されます。

httpでも表示できるように

AndroidManifestに1行追加するだけで解決します。

【AndroidManifest.xml】

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="パッケージ名">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            <!-- ↓この1行を追加 -->
            android:usesCleartextTraffic="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

これでサイトを表示することができました。

筆者のオススメ技術書

【iOS】railsで作ったwebアプリをスマホのネイティブアプリのように見せる

railsで作ったアプリをスマホアプリ化したいという仕事があったので手順をメモします。

ざっくり言うとwebView設置してデフォルトのURLをrailsアプリのものにするだけです。

iOS編です!

Android編はコチラ↓ oe526.hatenablog.com

プロジェクトを作成する

xcodeを立ち上げ、Projectを作成します。 ※このときのバージョンは10.2.1です

webViewを表示するだけなのでsingle view appを選択。 f:id:oe526:20190418133358p:plain

その後、アプリの必要情報を入力。 f:id:oe526:20190418133903p:plain

ストーリーボードにパーツを設置

設定が終わったら必要なパーツを配置していきます。

Main.storyboardを開いて…

Webkit Viewを選択し、画面中央に配置。

次にToolbarを選択肢、画面下部に設置。

Bar button itemをあと2つ追加します。

そして、2個目のItemと3個目のItemの間にFlexible space barを設置します。

f:id:oe526:20190418135535p:plain

制約を設定

パーツの配置が終わったので、制約をつけてパーツを整えていきます。

webViewは4方向すべて0に(下はToolbarを基準)。

Toolbarも4方向を0に(上はwebViewを基準)。

f:id:oe526:20190418142101p:plain

パーツとViewControllerを紐づけ

パーツを設置して制約をつけたら、ViewControllerとの紐づけです。

アシスタントエディターを立ち上げて、各パーツをcontrolを押しながらドラッグアンドドロップします。 webViewと各itemの4点をOutletで接続しましょう。

WKWebViewの箇所で下の画像のようにエラーになると思うので、import UIKitの下に「import WebKit」を追記します。

f:id:oe526:20190418145440p:plain

また、Toolbarのitem3つはActionも登録していきます。

itemの処理も入れるとこんな感じになります。

【ViewController.swift】

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var browserWebView: WKWebView!
    @IBOutlet weak var backButton: UIBarButtonItem!
    @IBOutlet weak var forwardButton: UIBarButtonItem!
    @IBOutlet weak var reloadButton: UIBarButtonItem!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func goBack(_ sender: Any) {
        self.browserWebView.goBack()
    }
    @IBAction func goForward(_ sender: Any) {
        self.browserWebView.goForward()
    }
    @IBAction func reload(_ sender: Any) {
        self.browserWebView.reload()
    }
}

WebKit.frameworkの追加

ここまで作ってビルドしてみると…

AppDelegateでエラーが出ますね。 f:id:oe526:20190418145446p:plain

これは、WebKit.frameworkを読み込んでやると解消します。

アプリ名→TARGETSのアプリ名→General→Linked Frameworks and Librariesから設定します。 f:id:oe526:20190418145654p:plain

これでビルドできます。

ViewControllerに処理を記載

viewDidLoad()の中にデフォルトURLを設定するコードを記述します。

【VIewController.swift】

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var browserWebView: WKWebView!
    @IBOutlet weak var backButton: UIBarButtonItem!
    @IBOutlet weak var forwardButton: UIBarButtonItem!
    @IBOutlet weak var reloadButton: UIBarButtonItem!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // デフォルトのURLを指定
        let urlString = "http://192.168.10.176:7000/"

        // URLの読み込み
        let urlRequest = URLRequest(url: URL(string: urlString)!)

        // 上で読み込んだURLをwebViewで表示
        self.browserWebView.load(urlRequest)
    }

    @IBAction func goBack(_ sender: Any) {
        self.browserWebView.goBack()
    }
    @IBAction func goForward(_ sender: Any) {
        self.browserWebView.goForward()
    }
    @IBAction func reload(_ sender: Any) {
        self.browserWebView.reload()
    }
}

※ローカルのrailsアプリを読み込む場合は、「rails s -b 0.0.0.0」とやってrailsサーバーを立ち上げると読み込めます(同一のネットワーク上にある場合)

動作確認

ビルドしてスマホの画面でrailsアプリが表示されればOKです。

筆者のオススメ技術書

【Android】Androidでjqueryが動かない時の対処法

railsで作ったwebアプリをwebViewを使ってネイティブアプリにしているときに遭遇。

onclickでモーダルを閉じる処理をjqueryで入れている箇所で、onclickが効かずにモーダル閉じれない問題がAndroidのみで起こった。

アプリの中はこんな感じでwebView読み出してるだけ

【MainActivity.kt】

val webView = findViewById(R.id.webView) as WebView
webView.setWebViewClient(WebViewClient())
webView.loadUrl("http://www.○○○.jp")

jsが悪いのか?Androidが悪いのか?と記事を探しました。

そしたら下の記事を発見。

【参考】 shinonome.hatenablog.jp

セキュリティ対策のためデフォルトでJavaScriptの実行が無効になっている模様です。

とのこと。

1行入れたら解決しました。

【MainActivity.kt】

val webView = findViewById(R.id.webView) as WebView
webView.setWebViewClient(WebViewClient())
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://www.○○○.jp")

筆者のオススメ技術書

【Android】Android Studio3のwebViewでchromeなどのブラウザを開かないようにする方法

webアプリ(rails製)をスマホアプリ化したいという依頼がありました。

スマホアプリの作り方はドットインストールでちょこっとだけ学んだことがあったので、webViewでウェブアプリを表示するだけのアプリを作ります。

リンクをタッチするとどのブラウザを立ち上げるか聞かれる

webViewを設置し、webアプリを読み込むまで作ったのでシミュレーターで確認すると、「おお!いい感じ!」

が、リンクをクリックすると「chromeで開く」「その他で開く」というようにデバイス搭載のウェブブラウザで開こうとしてしまう。

これを他のブラウザではなく、制作しているアプリのwebViewで表示させるためにはこの1文が必要!

webView.setWebViewClient(WebViewClient())

具体的にどこに入れるかというと…、webViewのloadUrlの上ですね。

【MainActivity.kt】

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById(R.id.webView) as WebView
        webView.setWebViewClient(WebViewClient())
        webView.loadUrl("http://192.168.10.176:3700/")
    }
}

これでいちいちchromeで開くか聞かれなくなりますよ。

筆者のオススメ技術書

【rails】whereで同一項目内の複数条件を指定したい場合

業務で企業の業務サポートシステムを作っているときに使いました。

企業のユーザにはいくつか権限があって、「管理者(admin)」と「担当者(manager)」「一般ユーザ(general)」がいたとします。

権限のあるadminとmanagerだけを取り出したいときどうするか

同一項目で検索したいとき

値の部分を配列で複数指定することで持ってこれます。

User.where(type: ['admin', 'manager'])

違う項目で検索したいとき

例)権限が「admin」か名字が「鈴木」だったら

whereに.orをつなげて検索することができます(rails5から)。

User.where(type: 'admin').or(User.where(family: '鈴木'))

おまけ

modelにscope書いておいたら楽に使い回せますよね

【user.rb】
scope :administrators, -> {where(type: ['admin', 'manager'])}

【users_controller.rb】
@users = User.administrators

筆者オススメ技術書