著者アーカイブ 村上

村上 著者:村上

【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分以内に眠れる場合、それは気絶に近いのだとか。
寝つきが良いからといって、良い睡眠が取れているとは限らないのですね…。
こちらも要注意です!

村上 著者:村上

【CSS】CSSのみで角丸の吹き出しを作成する方法

吹き出しのデザインを実装する場合、背景画像に吹き出しの画像を適用するという方法もありますが、CSSで実装したほうがレイアウトの融通も利くので楽!
ということで、今回は吹き出しのデザインをCSSで実装する方法についてです。

参考にしたサイトはこちらです。

CSSで作る!吹き出しデザインのサンプル19選
https://saruwakakun.com/html-css/reference/speech-bubble

参考に…というより、ほぼコピペですが…。
他にもいろいろなデザインの吹き出しのサンプルコードがあるので、是非訪問してみてください!

 

で、実装方法ですが、下のコードで、下記のような右から吹き出したスタイルの吹き出しが作れます。

<div class="balloon">
    <p>右向きの吹き出しです</p>
</div>
.balloon {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 2px #555;
    box-sizing: border-box;
    border-radius: 10px;
}
.balloon:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.balloon:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
}

とても簡単ですね!
また、吹き出しの三角の部分の位置を変えたい場合は、.balloon:before
.balloon:aftertop のパーセントの値を変更します。
行数でいうと、18行目と28行目の箇所です。
パーセントを大きくすると三角がに、小さくすると三角がに移動しますので、お好みの位置で調節してください。

 

以上、吹き出しデザインの実装方法でした。
他にも、枠線を消して背景色を変えたりしても、また違った雰囲気になって良いですね。
さらに、参考にさせていただいたサイトでは、円形の吹き出しや、考え事風の吹き出しの実装方法についても解説しているので、こちらも是非参考にしてみてはいかがでしょうか。

村上 著者:村上

【CSS】画像の読み込み中にローディング画像を表示させる方法

<img>タグで画像を表示させるときに、少し大きめの画像を読み込むときに時間がかかることがあるかと思います。
その際にローディング画像を表示させる方法についてです。

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

画像の読込完了まで、ローディング画像を表示する方法
https://allabout.co.jp/gm/gc/431053/

 

ちなみに、ローディング画像は、以前ご紹介した「Loader Generator」を使いました。

【Webサイト】ローディングのGIFアイコンが手軽に作れる「Loader Generator」
https://cpoint-lab.co.jp/【webサイト】ローディングのgifアイコンが手軽に作/

 

で、ローディング画像の表示方法ですが、すべてCSSで済みます。
しかも、3行!

コードはこちらです。

img{
    background-image: url("ローディング画像のパス");
    background-repeat: no-repeat;
    background-position: center center;
}

サンプルコードでは、全ての<img>タグに適用させていますが、もちろん ID や Class で指定してもOKです。

コードの説明をすると、まず「background-image」で<img>タグの背景画像にローディング画像を設定します。
そして「background-repeat: “no-repeat”;」で画像の繰り返し表示を無効にし、「background-position: “center center”;」で画像を上下左右中央表示にします。
設定は以上!とても簡単です!

 

表示されるのは本当に一瞬で、ちらっと見えるだけかもしれませんが、画像が表示されるまで、ただ空間がぽっかりと空いているよりも、読み込み中を示すアイコンが見えたほうが、まだ画像の読み込みを待てるような気がしますね。
画像の読み込み中のアニメーションをお探しの方は、ローディング画像生成サイト「Loader Generator」共々、是非参考にしていただければと思います。

村上 著者:村上

【Xcode】アプリのデフォルト言語を日本語に設定する方法

前回に引き続き、今回もXcodeについての備忘録です。
今回は、アプリの言語を日本語に設定する方法について。

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

Xcodeでアプリの標準言語を日本語にする方法
https://qiita.com/ko2ic/items/8918034d940f66fee97d

 

まず、Xcode上での設定です。
Target > Info を開きます。

まずは、「Custom iOS Target Properties」の「Localization native development」を「Japan」に変更します。
次に、同じく Custom iOS Target Properties に新しく1行追加し、「Localizations」を選択します。
そしてこの Localizations の値で Japanese を選択します。
Xcodeの設定は以上です。

続いて、お好みのターミナルアプリを開き、アプリがあるディレクトリまで移動します。
そして、vi コマンドで下記のファイルを開き、編集します。

vi [プロジェクト名].xcodeproj/project.pbxproj

無事開けたら、下記のような記述があるので、

developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
    en,
    Base,
);

こちらを下記のように変更します。

developmentRegion = Japanese;  // English -> Japanese
hasScannedForEncodings = 0;
knownRegions = (
    ja,  // en -> ja
    Base,
);

なお、行数が多いので、「Region」で検索するのがおすすめ。
検索方法は、コマンドモードで「/Region」と入力して Enter です。
該当箇所を書き換えられたら、「:wq」でセーブして終了です。

日本語設定は以上で完了です。
あとは通常にビルド→実行すれば、デフォルトの言語が日本語に代わっているはずです。

 

以上、アプリのデフォルト言語の設定方法でした。

村上 著者:村上

【Xcode】実機での実行時に「This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.」となったときの対処法

タイトル長いですが、今回は Xcode のエラーについて。
アプリを実機で確認しようとして実行した際に遭遇したエラーです。

エラー全文はこちら。
This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.

ざっくり翻訳したところ、インストール済みのアプリと今実行しようとしているアプリの識別子などが一致していないため、アプリをアップグレードできないとのことでした。
私の場合は、Generalのビルドチームが未選択となってしまっていたことが原因のようでした。

 

で、このエラーの対処法ですが、単純に既に端末にインストール済みのアプリを削除すること、でした。
もしくは、私のように原因が分かっていれば、Generalからビルドチームを以前と同じ設定にするなど、以前と同じ設定に戻せばOKのようですが…こちらについては試していないのでわかりません。

エラー文がそこそこ長い文だったので、もっと手間取るかと思いきや、かなりあっさりと修正できました。
とりあえず、エラー文はきちんと読みましょう。