月別アーカイブ 1月 2019

著者:杉浦

多様な言語のチートシートページDevhints

Devhints — TL;DR for developer documentation
 Devhintsは様々な言語、プログラムの基本的な書き方の例文が載っているページです。開発中の「あれはこの言語であっただろうか」「何かいい感じの書き方用意されてないか」「忘れた」といった時にチラっと見ることのできるヒント集になります。DevhintsにはC++の例文、vimの操作方法、firefoxの過去バージョンへのリンクなど様々ありますが、大体役に立つのはプログラミング言語の例文とCLIの操作例です。
 Devhintsに載っているコードはいかにもヒントな印象で簡易なものです。次はVue.jsに関するチートシートの一部です。

new Vue({
  data: { ... }
  props: ['size'],
  props: { size: Number },
  computed: { fullname() { return this.name + ' ' + this.lastName } },
  methods: { go() { ... } },
  watch: { a (val, oldVal) { ... } },
  el: '#foo',
  template: '...',
  replace: true, // replace element (default true)

  // lifecycle
  created () {},
  beforeCompile () {},
  compiled () {},
  ready () {}, // $el is inserted for the first time
  attached () {},
  detached () {},
  beforeDestroy () {},
  destroyed () {},

  // options
  directives: {},
  elementDirectives: {},
  filters: {},
  components: {},
  transitions: {},
  partials: {}
})

 とても端的です。これを最初に読むには説明がまるで足りていませんが、思い出す時、調べるきっかけになる何かの機能の名前を知りたい時にはあっという間に読める文量のこれぐらいが便利です。

  • この記事いいね! (0)
asaba 著者:asaba

【javaScript】split関数を使って文字列を分割する方法

先週は丸々一週間androidの記事だったので他の話題も振っていきたいと思います。

splitはStringオブジェクトの組み込みメソッドとして用意されており、文字列を任意の箇所で区切って分割することが可能になります。

今回はそのsplit関数を使ってスラッシュで区切られている値を切り分けて取得する方法を書いていきたいと思います。

はじめに、ごくシンプルなコードで説明していきます。

ここでは例として動物の名前をカンマで区切って、それをsplitで分割していきたいと思います。

[javaScript]
var str = 'user-1,user-2,user-3';

//「, (カンマ)」で区切って分割する

var result = str.split(',');

[/javaScript]

console.logで試してみると、resultの中にしっかりと動物ごとに区切られて格納されていることが分かると思います。

[javaScript]
["うさぎ", "ネコ", "タヌキ"]

[/javaScript]

また、分割された文字列は配列のように番号を指定した取り出すことができます。

取り出す方法は受け取ったresult変数で番号を指定するだけ。ここまで取得できれば後は煮るなり焼くなりで好きなように

各値を扱うことができます。

[javaScript]
const rabbit = result[0];
const cat = result[1];
const raccoon = result[2];
[/javaScript]


reactでも同じ形式で使えるので、splitを使ってみたいという方の参考になればと思います。

ここまでのベーシックな使い方を覚えていれば捻った運用などをしなければ困らないかと思われます。

split関数は、Dateで取得した時刻や生年月日をハイフンやスラッシュで区切って切り分けた度分秒や年月日

を利用したい変数に各々入れて使ったりと小回りが利くので、使いこなせるようになると便利ですね。

  • この記事いいね! (0)
takahashi 著者:takahashi

Slackのデザインが一新!その変化に賛否両論の声

ある日いつも通りSlackを開いたら変化が…

なんだか見慣れない感じになってる!?

気になって調べたら、Slackがいつの間にかデザイン変更されてました!

Slack のロゴが新しくなりました! – The Official Slack Blog

ブログによると、従来の#のロゴは、背景や角度を変えるとちょっと微妙な見た目になってしまうことが多く、いろいろな場所で使えるようにするためにSlackのロゴを複数用意したところ、今度は統一感が無くなってしまうという悩みを抱えていたようです。


The Official Slack Blog より引用

The Official Slack Blog より引用

ちなみに、macOS版App Storeの新着情報での説明はこんな感じ。

コホン…
(こういうユーモラスなの好き)

ということで、統一感を確保し、かつどのような背景や扱われ方になっても見栄えのよいロゴに刷新されたというわけですね。

しかし、一部のユーザーやメディアからは今回の変更に微妙な声が上がっているようです。

Slack、新ロゴ導入中、一部で批判の声も – Teck Crunch

んー…まぁ確かにロゴは”シンプルになった”って感じはあんまりしないですよね…w

そんな流れを見て、SlackのCEOは
まぁ一か月もすれば皆慣れてきて批判も収まるだろ\(^q^)/

と楽観的なコメントをしているようです。

いやまぁそうかもしれないけども、それCEOさん言っちゃう???
的なコメントですね…w

しかしロゴ一つとっても、デザインって難しいですよね…

自分はデザイン方面はダメダメなので、デザインをいろいろ考えられる人って本当にすごいなぁ、と思います。

とにもかくにも、今回は飽くまでデザインの変更のみのようなので、たとえ変更が気に入らなかったとしても、あまり目くじらを立てずに普段通り利用していきたいですね。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】componentWillReceivePropsが廃止になっていた話

componentWillReceivePropsというライフサイクルメソッドは最新のstateを受け取って更新することができ、前のページで受け取った値を

上書きしてstateに設定することができるメソッドです。

自分はselectタグで何も入力せずに次のページに進む、つまりデフォルトの値を最新の状態で受け取りたかったので

使っていたのですがずいぶん前に廃止するって決められていたみたいです。

Reactはv16まではこれまでのバージョンとほぼ同じ動きをするように決められていたのですが

v17になってからはRender Phaseという実装がrenderする度に何度も呼ばれ、これがループのようにぐるぐる回ってしまうため

危険視されているみたいですね・・・。

 

render部分がループすれば当然コンポーネントでバグがわんさかでて保守性が著しく落ちてしまうので使うのを避けてくださいなので

代わりにcomponentDidUpdateかUNSAFE_componentWillReceivePropsに置き換えてねという記事を見かけたので

後者のUNSAFE_componentWillReceivePropを使うことにしました。

 

どちらもprop・state共にrenderに影響を及ぼすことなくsetStateできるので値を遷移する前に更新したい

もしくは他の関数の影響を受けないように最後にstateの更新をしたいというかたは今使っているcomponentWillReceiveProps

を避けて上のどちらかに切り替えれば安牌なのかなぁと感じました。

※componentDidUpdateでthis.stateすると、無限にstateし続けることを知ったのでUNSAFE_componentWillReceivePropを

使ってください!!

  • この記事いいね! (0)
著者:杉浦

Vue.jsのライブラリ集Vue.js Examples

Vue.js Examples
 Vue.js ExamplesはVue.jsのライブラリ集です。npmやgitからvue関連のライブラリをまとめています。特長はデモへのリンクと絞り込まれたタグです。
 検索結果の時点で画面がやかましいくらいのgifデモとデモページが用意されていた場合そこへのリンクがあり、どんなライブラリなのか簡単にわかる様になっています。

 npmにもタグ相当のキーワードはありますが雑多でなかなか上手く絞り込めません。Vue.js Examplesならばあらかじめ用意されたカテゴリにから探せばよく、目当てのものにたどり着きやすいです。また、各カテゴリの件数は多くとも100件程度なので使用するライブラリの調査もそう辛くないです。
 
 Vue.js Examplesから辿れるライブラリ等はnpmに負けず劣らずピンキリな出来で、思わぬ副作用あり、バグ疑惑あり、英語ですらないドキュメントのコードというのが少なくないです。そのため都度ソースコードを探る必要がありますがそう悲惨なことにはなりにくいです。多くはコンポーネントレベルのライブラリであり、コンポーネントレベルのものならばVueの恩恵を受け小さいコードで仕上がっているためです。

  • この記事いいね! (0)
村上 著者:村上

【アプリ】iOSでビーコンの信号が受信できているかを確認できるアプリ「Beacon Scanner」

以前、Android でビーコンの情報を確認できるアプリ「Beacon Scanner」をご紹介しましたが、iOSでも良さそうなアプリを見つけたのでご紹介。
同じ名前の「Beacon Scanner」です。
が、こちらはどちらかというと、ビーコンの信号が受信できているかを調べるアプリですね。
UUID など、ビーコンの信号情報そのものを確認したい場合は不向きです。

アプリのインストールはこちらから。

Beacon Scaner on the App Store
https://itunes.apple.com/us/app/beacon-scaner/id1224905991?mt=8

ちなみに、Androidアプリの Beacon Scanner を紹介した記事はこちら。

【アプリ】AndroidでキャッチしたBeaconの情報を確認できるアプリ「Beacon Scanner」
https://cpoint-lab.co.jp/article/201809/【アプリ】androidでキャッチしたbeaconの情報を確認でき/

 

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

シンプルでわかりやすい!

ただ、使用する前に、ビーコンのUUID を登録する必要があるので要注意です。

上の画像のように、受信したい UUID を登録します。
そのため、ビーコンも ID が同じものでなければ、受信できているかどうかはわかりませんのでご注意ください。

UUID を登録後は、左のメニューから「Scan Beacon」をタップすれば、ビーコンをスキャンし、受信できたビーコンの情報を表示してくれます。

あとは、端末の Bluetooth を有効にしておくことをお忘れなく。

 

以上、iOS でビーコンの信号を受信できているかを確認できるアプリのご紹介でした。
個人的には、以前紹介した Android アプリの方が使い勝手が良いと思いますね。
ただ、アプリ開発時に「そもそも、これ本当にビーコン受信できてるの?」と心配になることがあるので、その心配を解消するためにはとても有効なアプリかと思います。
是非、ご活用ください。

  • この記事いいね! (0)
著者:ym

三大脅威

トレンドマイクロのページを見ていたら、「法人」と「個人」の三大脅威という情報セキュリテイの記事がありました。

2018年「法人」と「個人」の三大脅威:止まらない情報漏えいと漏えい情報の「再利用」

https://blog.trendmicro.co.jp/archives/20053

2018年「個人」を狙う三大脅威:「フィッシング詐欺」

https://blog.trendmicro.co.jp/archives/20138

法人利用者の三大脅威

  • 情報漏えい被害と、漏えい情報を使用した攻撃
  • 取引所からの仮想通貨流出
  • ビジネスメール詐欺

個人利用者での三大脅威

  • フィッシング詐欺
  • SMSを発端とする不正アプリ拡散
  • セクストーションスパム

昔からあまり変わりませんが、個人情報もパスワードも、アプリやネットで使ったら、必ず漏洩する覚悟でいたほうが良いですね。
そうすれば自然と漏洩しても良い情報と、まもる情報の区別するし。情報の重要度に応じて多要素認証なども取り入れると思う。

皆さん注意して楽しみましょ。

  • この記事いいね! (1)
takahashi 著者:takahashi

macOS版TweetDeckがMojave対応アップデート。メンテナンスが継続されていることを確認。

今日macOSのAppStoreを開いたところ、なんとmacOS向けデスクトップ版TweetDeckにアップデートが来ていました。

実に3年ぶりのアップデートです。

TweetDeckはもともとサードパーティー製だったマルチカラム型TwitterクライアントをTwitter社が買収し、公式化したもの。
ストリーミングAPIが廃止されて以降、現状唯一のTLのストリーミング(リアルタイム更新)対応クライアントとなっています。

以前mac版の公式Twitterクライアントが停止になったり、Twitter自身もサードパーティークライアントを締め出す動きを見せたりということもあったため、公式といえどもTweetDeckの存続も怪しいんじゃないかという声も一部で出ていました。
そんな中、新しいアップデートが配信されたのをみて、一安心した方も多いのではないでしょうか。

今回のアップデートではバグ修正のほか、macOS Mojaveに正式対応し、ダークモードにも対応したようです。

macOS MojaveでmacOS版TweetDeckを利用の方は、是非チェックしてみてください。

TweetDeck by Twitter

  • この記事いいね! (0)
takahashi 著者:takahashi

【要注意】さくらのクラウドのCentOS6フレーバーはデフォルトで時刻同期が無効になっている

とあるサイトで、時刻を使用したプログラムを実行した際、何故か変な値が返されることがわかり、調べたところ、サーバー時刻のずれが原因でした。

このサイトはさくらのクラウド上で動作していて、OSはCentOS6を使用しています。

なぜ時刻がずれてしまったのか調べたところ、時刻同期デーモンであるChronyd が動作していないことがわかりました。

$ sudo service chronyd status
chronyd is stopped

今後時刻がずれるのを防ぐためにChronydを有効化します。

sudo chkconfig chronyd on
sudo service chronyd start

これでOKです。

さくらのクラウドは仮想環境なので、ホストマシンの時刻と自動で合わせてくれる機能が実装されていたり、Chronydかntpdが自動で有効化されているものだと思っていたのですが、そうではなかったようです。

サーバーで動作するプログラムはサーバーの時刻がずれているとかなり影響が出ますので、さくらのクラウドでCentOS6を使われる方は、一度時刻同期が動作しているか確認した方がよさそうです。

  • この記事いいね! (0)
asaba 著者:asaba

【anadroidJava】続・ExifInterfaceで画像の向きを変える

ExifInterface記事の三回目になります。

前回はExifInterfaceクラスを使って画像の向きを取得していたと思いますが、今回はその画像の向き情報を使って

実際に向きを正しい位置に変えて表示するコードを書いてみようと思います。

まず、通常通りメソッドを書きますが、ここでの引数は前回取得した画像の向き情報が入っている変数locatateになります。

<pre>public void replace(int locatate,Bitmap bitmap){
//ここに処理を書きます
}</pre>

二つ目の引数は、このメソッドを叩く前に取得したBitmapのデータになります。

つまり、まだ正しい向きに修正されていない画像が変数に入っている状態ですね。

ここで実際に向きを変える工程に入りますが、まず最初にMatrixクラスをnewします。

画像を動的に編集する手段は枚挙に暇がありませんが、このMatrix拡大・縮小・回転など画像に関するアクションを全て揃えており

androidで画像をいじるときはよく重宝して使っています。

このmatrixを使う前にswitch文を使って角度別に処理を分けていきたいと思います。

case別で90,180,270とありますが、これは前回のORIENTATION_ROTATE_〇〇に合わせて指定した角度に修正するように

制御しており、引数のlocatateが90ならば一番最初のcase90で処理を受けて加工されていきます。

ORIENTATION_ROTATE_〇〇なんてわかりにくいという方も見受けられますが、慣れてくれば「ああこの角度に修正すればいいのね。」

みたいに感覚で慣れてくると思います。

public void replace(int locatate,Bitmap bitmap){
<pre>    int imageWidth = bitmap.getWidth();
    int imageHeight = bitmap.getHeight();
    Bitmap bitmap2;
    // Matrix インスタンス生成
    Matrix matrix = new Matrix();</pre>
<pre>     switch (locatate) {
        case 90:
            matrix.setRotate(90, imageWidth/2, imageHeight/2);
            // 90度回転したBitmap画像を生成
            matrix.postScale(0.3f, 0.3f);// 0.5倍調整
            bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                    imageWidth, imageHeight, matrix, true);
            imageView.setImageBitmap(bitmap2);
            break;
        case 180:
            matrix.setRotate(180, imageWidth/2, imageHeight/2);
            // 90度回転したBitmap画像を生成
            matrix.postScale(0.3f, 0.3f);// 0.5倍調整
            bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                    imageWidth, imageHeight, matrix, true);
            imageView.setImageBitmap(bitmap2);
            break;
        case 270:
            matrix.setRotate(270, imageWidth/2, imageHeight/2);
            // 90度回転したBitmap画像を生成
            matrix.postScale(0.3f, 0.3f);// 0.5倍調整
            bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                    imageWidth, imageHeight, matrix, true);
            imageView.setImageBitmap(bitmap2);
            break;
            default:
                matrix.postScale(0.3f, 0.3f);// 0.5倍調整
                bitmap2 = Bitmap.createBitmap(bitmap, 0, 0,
                        imageWidth, imageHeight, matrix, true);
                imageView.setImageBitmap(bitmap2);
    }
}</pre>
}

三日間ExifInterfaceのお話をしましたがまだまだ作っているアプリにも改善の余地があるのでまた画像周りを

いじることがあれば記事に載せるかもしれません。

あと前にも書きましたが、androidStudioのgradleや実機のスペックが人によって違ってくるのでここで紹介した

設定に合わせる必要は全くないのでそこは皆さんの環境に合わせてください。
 

  • この記事いいね! (0)