著者アーカイブ 村上

村上 著者:村上

【CSS】IEでのみ適用されるスタイルを指定する方法

今回は久しぶりにスタイルシートについての記事です。
Chromeとかでは問題ないのに、IEで閲覧した時だけ、ここのアイコンの位置がずれる…ってことあるかと思います。
そういったときに、IEでのみ余白のサイズを○pxにするなど、ブラウザを指定してスタイルを適用する方法です。

参考にさせていただいた記事はこちら。

IE11にのみ適用するスタイルシート – Qiita
https://qiita.com/eturlt/items/d43b1e19d7878ed41456

 

記述方法は、下記のとおりです。

image {
    width : 300px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    image {
        width : 250px;
    }
}

上記のようにメディアタイプを指定し、閲覧に使われているブラウザが IE だと判断したら、その中で記述した CSS を適用するという方法です。
こちらを使うと、例えば上記のコードでは、Chrome などで閲覧したときは画像の横幅は 300px で表示されますが、IE で閲覧したときのみ、画像の横幅は 250px で表示されます。
こちらを指定したところ、狙い通りに IE でのみ特定のスタイルを指定することができました。

が、こちらの方法、実はあまり推奨されていない方法なのだとか。
そのことについてまとめてあるサイトはこちら。

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
https://jeffreyfrancesco.org/weblog/2017042601/

また、こちらの方法では、依然として Microsoft Edge でデザインが崩れたままでした。

 

やはり IE、Edge は癖があって苦手です…!
が、とりあえずは IE では意図したとおりのデザインで表示させることができたので、一旦これでOKとしようかな…。
もし、他にいい方法があるようでしたら、あらためてご紹介します。

村上 著者:村上

【Android】「Could not find method runProguard() for arguments」エラーの対処法

今回は、Androidアプリのビルド時に遭遇したエラーについて。

【Android Studio】「Error:error: uncompiled XML file passed as argument. Must be compiled first into .flat file..」エラーの対処法
https://cpoint-lab.co.jp/【android-studio】「errorerror-uncompiled-xml-file-passed-as-argument-must-be-compiled-first-into-flat-file-」エラーの対処/

こちらで紹介したエラー同様、他のスタッフが少し前に開発したアプリをビルドした時に発生したエラーです。
こちらが遭遇したエラー2つ目で、実はもう一つあります。

 

で、こちらのエラーですが、対処法自体は、build.gradle ファイルの1行を書き換えるだけと、かなり簡単だったのですが、エラー文がかなり長くて、初見でちょっとビビってしまったので、今後驚かないようにまとめます。
まずは、エラー全文はこんな感じ。

Could not find method runProguard() for arguments [false] on BuildType_Decorated{name=release, debuggable=false, testCoverageEnabled=false, jniDebuggable=false, pseudoLocalesEnabled=false, renderscriptDebuggable=false, renderscriptOptimLevel=3, minifyEnabled=false, zipAlignEnabled=true, signingConfig=null, embedMicroApp=true, mBuildConfigFields={}, mResValues={}, mProguardFiles=[], mConsumerProguardFiles=[], mManifestPlaceholders={}} of type com.android.build.gradle.internal.dsl.BuildType.

name=release, debuggable=false, testCoverageEnabled=false …など、等式がずらずら並んでいたので、これはややこしいのでは!?と思い込んでしまったんですよね。

で、対処法ですが、build.grade ファイルに下記の1文が記述されているかと思います。

runProguard false

これを、下記に書き換えるだけ。

minifyEnabled false

あとは、いつも通りビルドするだけです。

 

エラー文にビビりましたが、思ったよりも簡単に直せたので一安心でした。
同じエラーにお困りの方は、是非参考にしてください。

村上 著者:村上

【Android】Buttonのデザインを変更する方法

最近 Android の開発ネタばかりで申し訳ありません…が、今日も性懲りもなく Android について!
今回は、ボタンのデザインを変更する方法です。
デフォルトのデザインって、グレーに角ばった形をしていて、かなり味気ないというか素っ気ないデザインなので、これを変更していきます。

参考にさせていただいたサイトはこちら。

Android UI基本 Buttonをカスタマイズする
http://tech.pjin.jp/blog/2016/02/09/android ui基本-buttonをカスタマイズする/

 

さて、今回のコードで作成できるボタンのデザインは下記の2つです。

まず、ボタンのデザインを指定するxmlファイルを、drawable フォルダ以下に作成します。
左側の、背景色が水色の丸角ボタンのコードはこちら。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#4cb4fa"/>
    <corners android:radius="8dp"/>
</shape>

ファイル名は、entry_button.xml としています。

右側の、背景色が白色で枠線が水色の丸角ボタンのコードはこちら。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#FFF"/>
    <corners android:radius="8dp"/>
    <stroke android:color="#4cb4fa" android:width="1dp"/>
</shape>

こちらのファイル名は、entry_button_noactive.xml としました。

で、ボタン自体は下記のように指定します。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#FFF">
    <Button android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="公開"
        android:textColor="#FFF"
        android:background="@drawable/entry_button"
        android:layout_margin="3dp"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="下書き"
        android:background="@drawable/entry_button_noactive"
        android:layout_margin="3dp"/>
</LinearLayout>

重要なのは、12、19行目android:background を指定している箇所です。
ここで、先程作成した xmlファイルを指定すると、xmlファイルに記述したデザインがボタンに反映されます。
レイアウトファイルがごちゃごちゃしないので、分かりやすくていいですね。
xmlファイルの記述については、ググれば色々出てくるので、難しくはないはず。

 

以上、ボタンのデザインの変更方法でした。
味気ないデフォルトのデザインや、背景色変えるだけよりも、ぐっとお洒落になるので、Androidアプリを開発している方は是非取り入れてみてはいかがでしょうか。

村上 著者:村上

【Android】リリース版アプリをビルドするときにkey aliasを忘れた場合の対処法

会社の人に教えていただいた方法ですが、これは覚えておかねば!と思ってまとめ。
Androidアプリをリリースする際に、リリース版APKのビルドを行いますが、その時に入力する key alias という項目を忘れてしまったときの対処法です。
こちらは、Android Studio のメニューバーの Build > Generate Signed APK をクリックしたときに表示される下記のウィンドウの入力欄に入力する項目です。

教えてもらった記事はこちら。

もしandroid.keysotreのkey aliasを忘れてしまったなら – Qiita
https://qiita.com/mmusasabi/items/e0dbd1fb01c0410f791a

なお、こちらの投稿には、パスワードを忘れてしまった場合の対処法へのリンクも貼ってありますので、こちらも是非ご参考にしていただければと思います。

 

さて、その方法ですが、コマンドプロンプトなどのツールを起動して、下記のコマンドを実行するだけ!

keytool -list -keystore <アプリのキーストアのパス>

こちらを実行すると、キーストアのパスワードを聞かれるので、パスワードを入力してエンターキーを押します。

実際の実行画面はこんな感じです。

ちょっとアレかな?と思われるところは白塗りにしましたが、重要なのは、赤く塗りつぶした箇所です。
正常に動作すれば、こちらに key alias が表示されます。
あとは、こちらを使って、リリース版ビルドを実行して完了です。

 

他の人が開発&リリースしたアプリだったので、パスワードしかわからず、どうしよう…となっていたので非常に助けられた記事でした。
同じ事で悩んでいる方がいらっしゃれば、是非参考にしていただければと思います。

村上 著者:村上

【Android】ボタンなどのパーツを横並び&横幅均等で配置する方法

久しぶりにAndroidアプリの開発をして、大分忘れていたので備忘録としてまとめ。
今回は2つ以上のボタンを横並びに配置し、かつボタンの横幅を均等に揃える方法です。

参考にさせていただいた記事はこちら。

PercentRelativeLayout で均等配置 – Qiita
https://qiita.com/kojionilk/items/50b0d1c111791a6b419f

なお、タイトルにある「PercentRelativeLayout」は非推奨となりましたので、使用しないようにとのこと。

 

コードはこちら。
LinearLayout という、要素を横一列もしくは縦一列に並べるときに使用するレイアウトの中に、並べたい要素を記述します。
今回は横並びにしたいので、orientation=”horizontal” を指定します。
なお、今回はボタンを2つ並べます。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="ボタン1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_weight="1"
        android:text="ボタン2"
</LinearLayout>

今回重要なのは、4、10行目の layout_width=”0dp” と 6、12行目の layout_weight=”1″ という指定です。
これらを指定することで、2つのボタンを綺麗に同じ横幅かつ横並びにすることができます。
なお、layout_weight では重み付けを行っているので、例えば 1つ目のボタンで 1、2つ目のボタンで 2 を指定すると、1つ目のボタンは 1/3 に、2つ目のボタンは 2/3 の大きさになります。

 

ボタン以外にも、均等に横並びをさせたいことは結構あると思うので、覚えておくと便利です!
ただし、親要素は LinearLayout でなければならず、FrameLayoutRelativeLayout ではできないので、そこだけ注意が必要です。
使わないとすぐ忘れてしまうので…このくらいは覚えておきたいものですね。

村上 著者:村上

【Android Studio】「Error:error: uncompiled XML file passed as argument. Must be compiled first into .flat file..」エラーの対処法

業務中、他のスタッフが数年前に開発した Androidアプリをビルドしようと実行したところ、いくつかのエラーに遭遇しました。
今回はその中の1つをご紹介。
なお、他のエラーについては、今後覚えている範囲でご紹介します。

 

エラー文はこちら。

Error:error: uncompiled XML file passed as argument. Must be compiled first into .flat file..

Google翻訳にかけてみたところ、「コンパイルされていないXMLファイルが引数として渡されました。 最初に.flatファイルにコンパイルする必要があります。」という意味のようでした。
これだけだと何をどう直せばいいかさっぱりだったため、こちらのエラー文をそっくりそのまま検索にかけたところ、下記のページがヒットしました。

java – AAPT2 link failed Crashlytics – Stack Overflow
https://stackoverflow.com/questions/45222264/aapt2-link-failed-crashlytics

こちらのページによると、gradle.properties というファイルに、下記の1文を記載すれば解決するとのことでした。

android.enableAapt2 = false

実際に上記一行を追加し、再ビルドしたところ、無事エラーが解消しました!

 

少し古いアプリを実行しようとすると、SDKのインストールやらアップデートやら、さらにエラーの対処等も必要になる場合もあるため、ビルドだけでも一苦労ですね。
エラーに遭遇した場合は、とにかくエラー文を読んで、分からなければテキストを丸ごと検索することをおすすめします。
よっぽどのことがない限り、他の誰かも同じエラーに遭遇していて、さらに別の誰かが解決策を提示しているはずです!

村上 著者:村上

【CSS】テキストや画像の縦方向の位置を指定する「vertical-align」が効かない時の対処法

ある要素内のテキストや画像などを縦方向の位置を指定するときに便利な「vertical-align」プロパティですが、時折聞かないことがあるそう。
私もこの現象に遭遇したので、備忘録としてまとめ。

 

まず、書いたコードはこちら。

<div id="outer">
    <div id="inner"></div>
</div>
#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    vertical-align: middle;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
}

で、上記で何が問題かというと、そもそも「vertical-align」プロパティが適用されるのは、インライン要素テーブルセルのみだったことです。
したがって、上記でいうと #outer に、「display: table-cell;」を追加したところ、あっさりと #inner の要素が #outer 要素に対して縦方向の中央揃えになりました。

分からないとドツボにハマりそうですが、案外原因ってこんな些細なことだったりするんですよね…。
私は分からないと判明してすぐに調べたので、長時間調べることもなく原因が判明しました。

 

なお、中央揃えする方法なら、こちらの方法もあります。

【CSS】DIV要素を上下左右で中央揃えする方法(IE、Safari対応)
https://cpoint-lab.co.jp/【css】div要素を上下左右で中央揃えする方法(ie、safari/

こちらは、親要素に「position: relative」を、子要素に「position: absolute」を指定して、さらに子要素に「top: 50%」「transform: translate(0, -50%)」を指定する方法です。
具体的には下記のとおりです。

#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    position: relative;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

上記のコードでも、vertical-align: center を指定した時と同じ結果になります。
なにかしらのCSSプロパティの制約がなければ、お好きな方をお使いいただければいいと思います。

 

ということで、要素の縦方向の位置を指定する方法でした。
他にも、margin を指定するなど、色々方法はあると思いますので、自分のコードにあった方法をお試しください。

村上 著者:村上

【JavaScript】角度の調節も可能な吹き出し型ツールチップ「grumble.js」

チュートリアルなどで、ページの説明をするときなどにちょうど良さそうなツールチップ「grumble.js」のご紹介。
実装がとても簡単なのに、かなり良い感じの見た目なので、おすすめです。

GitHubページとデモページはこちらから

https://github.com/jamescryer/grumble.js
Examples and documentation on grumble.js

 

インストール等準備については割愛します。
で、一番シンプルなコードは下記のとおり。

$('#start').click(function(e){
    e.preventDefault();

    $('#grumble').grumble({
        text: 'ボタンです',  // 吹き出し内に表示したいテキスト
        angle: 200,  // 吹き出しの角度
        distance: 3,  // 要素との距離
        showAfter: 1000,  // 何秒後に表示
        hideAfter: 2000  // 何秒後に非表示
    });
});

HTMLは下記のように記述しました。

<button id="start">grumble.js START</button>
<button id="grumble">ボタン</button>

「grumble.js START」と書かれたボタンをクリックすると、1秒後に「ボタンです」と書かれた吹き出しが表示され、表示された2秒後に自動的に消えます。

 

なお、吹き出しの大きさは、指定したテキストの長さによって自動的に変更されます。
また、特に指定しなくてもフェードイン・フェードアウトで表示されますので、それもなかなかいい感じです。

主には上のコードで事足りますが、それ以外に使えるオプションは下記のとおり。

type: 'alt-'
hideAfter: false
hasHideButton: true

1つ目は、指定すると、吹き出しが青色になります。
なお、吹き出しの色はオレンジと青の2色が用意されているようです。

2つめは、上でもご紹介した、吹き出しを非表示にする秒数を指定する hideAfter です。
こちらに、数値ではなく false を指定すると、吹き出しをクリックしたときに消えるようになります。

3つめは吹き出しを消すボタンが表示されるオプションです。
吹き出しの右下に、小さく四角いボタンが表示されます。
こちらは、hideAfter に false を指定した時に一緒に使うようですね。
ただ、個人的にはボタンのデザインがちょっと微妙かなと感じるので、あまり使うことはなさそう…。
CSSで無理くりデザイン変更しちゃえばOKかな?

 

と、いうことで、吹き出し型ツールチップ「grumble.js」のご紹介でした。
コードもシンプルで、動きも軽快なので、使い勝手は良さそうです。
簡単なチュートリアルを実装したいときなどに使ってみてはいかがでしょうか?

村上 著者:村上

【JavaScript】aタグでの画面遷移をキャンセルする方法

久しぶり?なJavaScriptについての私用備忘録。
今回は、HTMLのaタグをクリックした際に、画面遷移をさせない方法についてです。

例えば、下記のように指定していた場合に使えます。

<a href="#">リンク1です</a>

普通に実行すると、URLの最後に # が付いてしまいますが、画面遷移を無効にすることで、URLの最後に # が付くことを防ぐことができます。

 

で、この実装方法ですが、preventDefault というメソッドを使います。
具体例は下記のとおり。

// 本サイトのトップページへのリンクです
<a href="https://cpoint-lab.co.jp/" id="link">https://cpoint-lab.co.jp/</a>
// リンクの要素を取得
var element = document.getElementById("link");
element.addEventListener("click", function(e){
    // リンクがクリックされたときの処理
    e.preventDefault();  // 画面遷移を無効化
}, false);

コード自体は、実にシンプルです。
リンクがクリックされたときに、デフォルトのイベント=画面が遷移するのを抑止しています。

なお、jQuery の場合は、下記のように記述します。

$("#link").on('click', function(e){
    e.preventDefault();  // 画面遷移を無効化
});

クリックを検知している箇所の記述が違うだけですが、こんな感じ。

他にも、stopPropagation というメソッドや return false で遷移を無効化している例もありましたが、個人的にはこれが一番わかりやすかったので、こちらを使用しています。

 

以上、aタグでの画面遷移をキャンセルする方法でした。
なお、フォームの送信をキャンセルするのにも使えます。
画面遷移は使用頻度低そうですが、フォームの送信キャンセルは ajax とかでよく使われるので、覚えておいて損はないはず。
似たようなことでお困りの方は、是非ご参考にしていただければ幸いです。

村上 著者:村上

【アプリ】入眠困難型の不眠症の方におすすめなアプリ「寝たまんまヨガ」

日本人は世界的に見て睡眠時間が短い国として知られています。
たまに私も眠りにつくのが困難だったりするのですが、その時はこのアプリを使うことにしています。
ヨガアプリなのですが、本当に寝つきが良くなるんです。
インストールはこちらから。

寝たまんまヨガ 簡単瞑想: リラックスした睡眠で不眠解消! – Google Play の Android アプリ
「寝たまんまヨガ 簡単瞑想」をApp Storeで

 

で、今回おすすめするアプリは「寝たまんまヨガ」というヨガアプリです。
起動直後の画面はこんな感じ。

100円250円くらいの有料の音声ガイドが主ですが、2つほど無料のものもあります。
これだけで十分効果が分かるので、実質無料アプリです。

ガイド音声の再生画面はこんな感じ。

ごく一般的な動画アプリと変わりませんね。
再生ボタンを押せばガイドの再生が開始されます。
ちなみに、こちらは「イントロダクション」で、長さは14分くらい。
が、私はこれを最後まで聞けたことが少ないです。
個人差もあると思いますが、初回から気持ちよく寝落ちできます。

 

呼吸法とか、体の力を抜くことって、やはり大事なんですね。
疲れているはずなのに、妙に目が冴えてしまっているときなど、是非使ってみてはいかがでしょうか。

が、本当に深刻な場合は、お医者様にかかるようにしてくださいね!
ちなみに、布団に入って5分以内に眠れる場合、それは気絶に近いのだとか。
寝つきが良いからといって、良い睡眠が取れているとは限らないのですね…。
こちらも要注意です!