はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

検証環境 この記事の内容は、以下の環境で検証しました。 Java 8 Android studio 2.3 CompileSdkVersion:25 MinSdkVersion:19 TargetSdkVersion:25 BuildToolsVersion:25.0.2 Fragmentとは FragmentはActivityのUIの挙動や部位を表すもの。 Fragmentは必ずActivityに埋め込まれている必要がある。よって、FragmentはActivityで再利用可能な『サブアクティビティ』のようなものである。 Fragmentは独自のライフサイクルを持っているが、ホストとなるActivityの影響を直接受ける。 ActivityはFragmentの追加や削除が行える。 Fragmentの作成方法 Activityと同様にFragmentのサブクラスを作成する。 Fragmen

検証環境 この記事の内容は、以下の環境で検証した。 Java:open jdk 1.8.0_152 Kotlin 1.2.10 Android Studio 3.0.2 CompileSdkVersion:26 はじめに Android 8.0（以降、Oreo）から通知（Notification）を表示させる方法が変わりました。 この記事では、Oreoで通知するさいに必要となる新しい機能と最低限の実装方法について説明します。また、実装は最小限の構成です。 参考情報 Notification Channelsの設定方法 https://developer.android.com/training/notify-user/channels.html 完成イメージ 完成イメージは以下のとおりです。 実装方法 実装する前に、まずChannelsの全体像を理解する必要があります。 Channelsの

検証環境 この記事の内容は、以下の環境で検証した。 Java:open jdk 1.8.0_152 Kotlin 1.2.10 Android Studio 3.0.2 CompileSdkVersion:26 はじめに Android 8.0であるOreoからバックグラウンドに関して、制限がかかってきます。 その制限から既存のServiceを救う方法の記事です。 Foreground Serviceとは・・・ Foreground Serviceとは、通常のサービスと違い、通知（Notification）を表示し、バックグラウンドで実行している事をユーザに認識させた状態で実行するものです。 処理自体はMainスレッドとは別スレッドで実行されているが、ユーザが通知を通じ認識できるため、Foreground Serviceとなります。 完成イメージ Foreground Serviceか開始

検証環境 この記事の内容は、以下の環境で検証した。 Java:open jdk 1.8.0_152 Kotlin 1.2.10 Android Studio 3.0.2 CompileSdkVersion:26 はじめに 今思えば、Oreoでサービスに関する変更があり、その布石だったJobSchedulerがAndroid 5.0(Lollipop：API Level21)で追加されいたんですね。この記事では、そんなJobSchedulerの最小限の実装方法を説明して行きます。 全体像 JobSchedulerが一体どういうものなのかを図にしてみました。 図からわかるように、Serviceと違い条件が合致した時に実行されます。 また、ある一定期間でJobServiceなるものを繰り返し実行が可能です。 必要なクラス群 JobSchedulerを使用する上で必要となるクラス群とその役割は、以

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

解決したいこと React 初心者なので、JSX コード内で HTML にレンダリングさせたくない部分をコメントアウトする方法がわからない。 方法 {/* ... */} または {// ...} という構文でコメントアウトできる。 例 var Header = React.createClass({ displayName: 'Header', render: function () { return ( <div> {// <h1>wasshoi</h1> } <nav> <ul className="header--nav"> <li> <a href="#">hoge</a> </li> {/* <li> <a href="#">fuga</a> </li> */} </ul> </nav> </div> ); } });

この記事は Go Advent Calendar 2015 5 日目の記事です。 はじめに Go にはジェネリクスがありませんが、任意の型に対して共通の処理を提供したいことがあります。 例えば ORM ライブラリで User テーブルと Blog テーブルを struct で表す場合を考えてみます。 package main var db = func() *sql.DB { db, err := sql.Open("mysql", "hoge") if err != nil { panic(err) } return db }() func (u User) FindById(id int64) (*User, error) { return &u, db.QueryRow("SELECT Id, Name, Email FROM User WHERE Id = ?", id).Scan

※ 2015-01-07 追記 boto でなく awscli を使えば下記のように、s3 bucket アップロードスクリプトを書かずに済むことを教えてもらいました。awscli 便利そうなのでこちらを是非使いましょう。 インストール $ pip install awscli S3 情報を登録 (~/.aws/ に設定ファイルが生成される。) $ aws configure 指定フォルダをアップロード $ aws s3 sync <フォルダのパス> s3://<bucket 名> アップロードを確認 $ aws s3 ls <bucket 名> ダウンロードもできる $ aws s3 sync s3://<bucket 名> <ダウンロード先のパス> Gist に貼っていたのを Qiita に書いてみました. boto を使って Amason S3 の bucket に指定のフォルダ(中

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

(※ 編集リクエストをマージしたのでコード大きく変わりました. 機能に変更はありません.) 目的 クライアントから簡単に JSON の読み書きできるような API をさくっと作る。 この記事でやること Python2.7 / Flask を使う。 DB の代わりに JSON ファイルを生成/読みこみ/書きこみする。 この記事でやらないこと Python の環境構築。 細かいコードの説明とか。 背景 コンテンツの状態、ユーザの状態などによって UI を変更したいのです。クライアント(Web まわり)を作りながら、画面の状態やパラメータを追加・変更できるような、状態を返す JSON が欲しくなったので、簡単なものを作ってみました。自分のローカル環境で動かす程度の簡易なものです。(本番環境では専用のアプリケーションサーバなど使ったりするのを想定しています。) JSON のファイル名を key、取

はじめに 前回 に引き続き、postMessage を使ってブラウザ内通信を監視するための調査中に monitorEvents [1] というものを見つけた。 クライアント(Web ブラウザ) とサーバ間の通信は DeveloperTool などのネットワークから調べることができるが、postMessage などを使ったブラウザ内の通信も監視したい。 monitorEvents を使うと、ブラウザ内の通信や任意の DOM のイベントを、コンソールから監視することができる。 目的 Web ブラウザ内の任意のイベントをコンソールから監視したい。 方法 公式リファレンスによると[1]、monitorEvents は任意の DOM に対して任意のイベントを監視し、イベント発火時にコンソールにイベントオブジェクトを出力してくれる。 Chrome 対応。 monitorEvents はグローバル関数。

目的 HTML5 に Web Messaging API というのがある。サーバを介さずブラウザ間で通信ができるインターフェイスが提供されている。 調査がてら把握したことを整理。 概要と用途 Web Messaging API はブラウザの任意のドキュメント間での通信をサポートするインターフェイス。現在、postMessage と MessageChannel という API が用意されている。どちらも任意の window オブジェクト同士で、任意のタイミングでデータの受送信をさせることが可能。 よく使われる用途として、iframe で別ドメインのコンテンツを読み込み、そのドメインと通信させる。 例えば、Facebook のいいねボタンは、 iframe で facebook.com のドメインを埋め込み通信させ、その中の cookie の値を取得してそのブラウザが保持するユーザ情報を表示

目的 Grunt と違って Gulp は登録したタスクが並列で実行されていきます。 しかし、Gulp のタスクも自在に直列/並列化したいのです！ 方法 調べたらよいものがありました。run-seqence を使うだけ。 記述例 図のように clean タスクが終わったら並列に jade、sass、coffee タスクを実行。これらのタスクが全て終わったら deploy タスクを実行と言うように、3 段階にタスクを直列、その中で複数のタスクを並列にします。 var runSequence = require('run-sequence'); gulp.task('default', function(callback) { return runSequence( 'clean', ['jade', 'sass', 'coffee'], 'deploy', callback ); });

目的 前回 Python で書いた JSON ファイルを出入力する API を Node.js に書き換える。 書いた Python の Flask 代わりに Node.js の Express を使いました。 前回 Python で書いた API をそのまま Coffee に書き換えただけです。URI は 前回の と全く同じです。 非同期なので I/O のところを Deffered 使いましたが、あとでリファクタします。書いてみたけどあまりに美しくない...ƪ(•̃͡ε•̃͡)∫ ※ write 時に副作用あるので注意。 fs = require 'fs' _ = require 'underscore' express = require 'express' bodyParser = require 'body-parser' deferred = require 'deferred'

CoffeeScirpt, Sass, Slim ファイルを生成する Middleman のテンプレート Gem を作ったCoffeeScriptSassGemslimmiddleman

既知かもしれませんが, 調べても分からずしばらくハマってしまった問題なので共有しておきます. 解決したい問題 CloudFront(xxx.cloudfront.net) に S3 bucket の URL(yyy.s3.amazonaws.com) をオリジンに設定すると xxx.cloudfront.net/foo/ を参照した時に xxx.cloudfront.net/foo/index.html でなく status=403 を返す. 原因 S3 bucket の URL は bucket が保持するオブジェクト(コンテンツとしてのファイル名)を取得して返すので /foo/ のようなパスに対してどのファイルも返せない. すなわち " xxx.cloudfront.net/foo/ を呼ぶ => yyy.s3.amazonaws.com/foo/ を呼ぶ => bucket は /f

目的 git サブコマンドの個人的メモ 随時追加更新する 「ワンライナーで add して commit したい！」 既存ファイルに対して全て add します.

目的 業務で Coffeescript を書いています. 今回は, 別の AltJS である Typescript を知ること, その為に Typescript を使う準備をするのを目標にやったことのメモです. Typescript ではろーわーるど:D インストールしてはろーわーるどしてみる グローバルでなく作業ディレクトリのみにインストールします. $ npm i typescript $ ./node_modules/.bin/tsc -v Version 1.0.0.0 $ emacs hello.ts $ cat hello.ts console.info('hello:D'); $ ./node_modules/.bin/tsc hello.ts $ node hello.js hello:D

$ curl -I http://example.com HTTP/1.1 200 OK Accept-Ranges: bytes Cache-Control: max-age=604800 Content-Type: text/html Date: Tue, 22 Apr 2014 14:57:58 GMT ## <= これを取得したい! Etag: "359670651" Expires: Tue, 29 Apr 2014 14:57:58 GMT Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT Server: ECS (cpm/F858) X-Cache: HIT x-ec-custom-error: 1 Content-Length: 1270 ブラウザが返す時刻(new Date())の値はデバイスに依存してしまいます. 現在時刻を合わせ

作って壊し放題の仮想マシン自動化ツール Vagrant さんに入門したくて Getting started から見習い始めました:) 目的 仮想マシンって何? Vagrant って何? Vagrant のチュートリアルをやってみる 前提環境 Mac (OS X 10.9.2) Ruby (v2.0.0p0 (2013-02-24 revision 39474) [x86_64-darwin13.0.0]) VirtualBox(v4.3.6) ではではチュートリアル開始〜♪ インストールとプロジェクトフォルダ作成 Vagrant のインストールが完了したのでその確認と任意のディレクトリからプロジェクトを作っておきます. $ which vagrant /usr/bin/vagrant $ vagrant -v Vagrant 1.5.3 $ mkdir vagrant-tutrial $

サーバの構成管理ツール Chef に入門してみました. 目的 Chef って何? Chef を使ってみる 前提環境 Mac (OS X 10.9.2) Ruby (v2.0.0p0 (2013-02-24 revision 39474) [x86_64-darwin13.0.0]) gem (v2.0.0) VirtualBox(v4.3.6) ではではチュートリアル開始〜♪ Chef を使える環境をつくる チュートリアル を見ながら環境構築します. Chef は cookbook という設定ファイルっぽいものを作っておき, それらを仮想環境やリモートサーバに反映させるとそれらを設定通りの構成に作ってくれる仕組みみたいです. この cookbook には Recipe と呼ばれる設定ファイルが 1 つ以上ありサーバに実行させる処理が明記されているそうです. Chef は Gem に登録され

Underscore.string.js が便利そうなので紹介します. JavaScript のちょっと面倒な文字列処理を Ruby や Python っぽくいい感じにやってくれます. 使い方 サーバで使う npm からインストール

各フレームワークも設定ファイルの書き方を調べてみた フロントエンド開発にはいろいろな方法がありますね. 納品物は static な html のみの場合, その作り方や使用するツールは開発者さんの好みだったり使い慣れてるものだったりすると思います. よく使われている(と勝手に思っている)フレームワークをまとめておこうと思って書きました. ひとまず貼り付け. 後でちゃんと書きますね!:P やりたいことは, 納品物は static な html ファイル ローカルで開発するために web サーバ起動 ファイル更新を監視 + 自動でコンパイル の最小限のタスクを想定しています. ビルドツール Grunt(http://gruntjs.com) Node.js 製. 老舗なフレームワーク. Jade, sass, coffeeScript が使われる印象. # Gruntfile.coffee m

2014.4.1 現在 IE11 は ua.indexOf("msie") > -1 が false を返してしまうのでした... こうしておけばもう騙されないっ(・ん・)ノ var isIE = function() { var ua = window.navigator.userAgent; var ie = ua.match(/MSIE/) || ua.match(/Trident/); return ie? true: false; }

javascript のテストを書き始めて 4 日目のしょしんしゃです. いろいろなテストフレームワークを調べながら今更? みたいなことばかりですが整理がてらメモしておきます.

AngularJS と jinja2 は HTML に変数スコープを {{...}} という二重の波括弧で囲う構文仕様になっています. よって, Python のフレームワークで使われる jinja2 で AngularJS を書きたい場合に HTML に AngularJS の変数スコープを書くと競合してしまい, AngularJS の変数スコープは無効化されてしまいます. AngulaJS と jinja2 の変数スコープを競合させない為に, AngulaJS の変数スコープのブロック構造を変更する方法があります. $interpolateProvider というヘルパーを使います. AngularJS の version 1.2.0 以降の機能です. 記述例 AngularJS の変数スコープのブロック構造を [[...]] に変更してみます. var app = angular.m