サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
www.yoheim.net
こんにちは、@yoheiMuneです。 XSERVERで、常時SSLとwww統一の対応について、htaccessを記述する機会があったので、その内容をブログに書いておきたいと思います。 目次 常時SSL対応とwww統一のhtaccess .htaccessファイルは以下のように記載します。ドメイン名は設定したいサイトに合わせて修正してください。また設定前には必ず現状のバックアップを取り(.htaccessファイル)、もし失敗しても戻せるようにしておく必要もあります。 # Apacheのリライト機能が有効な場合のみに限定 <IfModule mod_rewrite.c> # リライト機能をONにする RewriteEngine on # httpでアクセスされた場合には、httpsへリダイレクト. RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ htt
こんにちは、@yoheiMuneです。 TypeScriptは猛勉強中ですが、なかなか楽しいですね。今日はType Aliasという機能を使って、読みやすいコードを書く方法をブログに書きたいと思います。 目次 タイプエイリアスとは タイプエイリアス(Type Alias)とは、C言語やSwift言語などにある機能で、データ型に別名をつけることができます。例えばstring型にNameという別名をつけることができます。 type Name = string これの何が便利なのかというと、型名を見るだけでコードの意味が推測できやすくなったり、複雑な型(=コールバックなど)を完結に記述できたりします。 Type Aliasを使って分かりやすいコードを書く ここでは2つの例を紹介したいと思います。 既存の型に別名をつける 例えば以下のようにMapにデータを格納する場合を考えます。 interfac
こんにちは、@yoheiMuneです。 今日は、create-react-appで作ったReactアプリケーションについての話です。ビルド結果のJavaScriptやCSSをindex.htmlから相対パスで読み込む方法について、ブログに書きたいと思います。 目次 何が問題か Githubページを使うと、簡単に無料でページを公開できます。しかしその場合には、JSファイルやCSSファイルを絶対パスではなく相対パスで読み込む必要があります。 <!--絶対パスでの読み込み例--> <script type="text/javascript" src="/static/js/main.29a8746a.js"> <!--相対パスでの読み込み例--> <script type="text/javascript" src="./static/js/main.29a8746a.js"> create-r
こんにちは、@yoheiMuneです。 React.jsで、ネイティブのような行スワイプ処理を実装したので、ブログに残したいと思います。 目次 今回のサンプルコード GithubのyoheiMune/react-hammer-drag-sampleに置いてあります。適宜ご参照ください。 何をしたいのか 以下のテーブルビューのようなUIの場合に、指でグググと動かして行をスワイプしたい。それをReact.jsで実現したいというお話です。 デモはこちら Hammer.jsについて スマホ向けのWebページで、スワイプやピンチなどの指によるジェスチャーを扱いたい場合には、Hammer.jsが便利です。Angular.jsにも採用されていて、かなりの人気なライブラリです。 React.jsにおける指ジェスチャーもHammer.jsを使うと、お手軽に実装することができます。 npmインストール Rea
こんにちは、@yoheiMuneです。 React.jsでイベントバブリングを抑止する方法を、ブログに書きたいと思います。 目次 何が問題か イベントバブリングを抑止しないと、クリックされた要素の親の要素のClickイベントまで発火してしまいます。 例えば、ul -> liの親子関係のあるDOMがあるとします。 class Greeting extends React.Component { onClickUl(e) { console.log('<ul> was clicked.') } onClickLi(e) { console.log('<li> was clicked.') } render() { return ( <ul onClick={this.onClickUl}> <li onClick={this.onClickLi}>Good morning.</li> <li
こんにちは、宗定(@yoheiMune)です。 5年半ほどお世話になりました(株)サイバーエージェントを退社し、独立することにしました。今の気持ちを残しておきたいと思い、今日はブログを書こうと思います。 目次 CA CAで働いている間は非常に充実して楽しい日々で、たくさんの方と一緒にできて本当に感謝しています。最初はマークアップエンジニアという肩書きで入れてもらって、他の人が書く本格的なCSSのに恐怖を感じたり(marginとpaddingの違いすら分かっていなかったw)、Javascriptのクラスが分からなくてドキドキしていたことが懐かしく感じます。その後はフロントエンドエンジニアとしてコミュニティサービス、ブラウザゲームなどを数年経験させて頂き、フロントエンドのチューニング大会で準優勝を頂く経験もできました。その時は詳しくは言えませんが、それぞれのコミットに自分の人生がかかっていて、
こんにちは、@yoheiMuneです。 React.jsの任意のコンポーネントから、React Routerのmatch、location、historyを使えるようにする方法を、ブログに書きたいと思います。 目次 対象のバージョン React Routerのバージョンは、v4以降が対象です。v3以前とはかなり違うので、対象バージョンにご注意ください。 何が問題か 例えば、以下のルーティングがあるとします。 import React, { Component } from 'react' import { BrowserRouter as Router, Route, Switch } from "react-router-dom" import Thread from './Thread' import Todo from './Todo' class AppRouter extends
こんにちは、@yoheiMuneです。 Reactでの開発は学ぶことが多く楽しいです。今日は、onClick時に任意の値を渡すための実装方法を、ブログに書きたいと思います。 目次 何がしたいのか ReactでonClickを実装する際に、eventオブジェクトではなくて、任意の値を受け取りたい場合があります。 // onClickでは、例えば商品IDを受け取りたい. onClick(productId) { console.log)(productId + 'を購入するよ!'); } これを実現する方法について説明します。 onClickの関数に任意の値を渡す 任意の値を渡すためには、bind関数を使います。具体的には以下のように指定します。 <div onClick={this.onClick.bind(this, "渡したい値")}></div> bindの第1引数にはonClick関
こんにちは、@yoheiMuneです。 Reactのお仕事をやっていて、日々試行錯誤してます。JSX内で条件分岐を表現する方法についてブログに書きたいと思います。 目次 何がしたいのか HTMLを出力するrenderメソッドで、この条件ならこのUI、別の条件なら別のUIを出したい、ということは良くあると思います。それをReact.jsではどのように表現するのかについて、ブログにまとめておきたいと思います。 JSX内で条件分岐を表現する5つの方法 よく使われる手法として、5つあります。状況に応じて必要なものを使えたら良いと思います。 方法1:即時関数を使う JSX内で即時関数を書き、その中で条件分岐を表現できます。 class Hello extends React.Component { render() { let isMorning = true return ( <div> {(()
こんにちは、@yoheiMuneです。 create-react-appを使うと簡単にReactアプリケーションを作成することができます。それをサーバー上のNginxで配信する方法について、ブログを書きたいと思います。 目次 create-react-appとは create-react-appとはReactアプリケーションの雛形を1コマンドで作れる便利ツールです。雛形を作って必要な箇所を実装することで、簡単に本格的なReactアプリケーションを作ることができます。詳細は以下をご確認ください。 facebook/create-react-app | Github ReactアプリケーションをNginxで配信する さてここからが本題です。 ローカルで作成したReactアプリケーションをサーバー(Nginx)で配信したい場合に、どうすれば良いでしょうか。以下の作業ステップを行います。 手順1:
こんにちは、@yoheiMuneです。 Reactなどの仮想DOMを扱うライブラリでは、直接HTML要素にアクセスする機会は少ないですが、でも時々はアクセスしたい場合があります。React流にどのようにDOMにアクセスするのか、ブログに書きたいと思います。 目次 対象のReactバージョン このブログでは、React.jsのv16.3.0をベースに記載しています。フロントエンドは進化が早いので、適宜読み替えてください。 何がしたいのか Webアプリを作っていると、DOM要素にアクセスして値を取得したいという場合があります。例えば以下のようなinputがあるとします。 <input type="text" name="name"/> このDOMにアクセスしたい場合、(Reactではない普通のJSでは)以下のようにアクセスします。 let input = document.querySelec
こんにちは、@yoheiMuneです。 今日はReactで、onClickなどで呼び出す関数のthisを、一括でクラスにバインドする方法を、ブログに書きたいと思います。 目次 何が問題か ReactコンポーネントをES6のクラスで作成すると、onClickで呼び出すメソッドのthisがundefinedになってしまいます。 import React, { Component } from 'react' class MyComponent extends Component { onClick() { console.log(this) // 「undefined」になる. } render() { return ( <div onClick={this.onClick}>Click Me!!</div> ); } } 対処法としては以下のようにthisをバインドすれば良いのですが、毎回や
こんにちは、@yoheiMuneです。 今日はEC2などのsshが繋がるサーバーから、scpというコマンドを用いてファイルのダウンロード/アップロードする方法を、ブログに書きたいと思います。 目次 やりたいこと AWSや各種クラウドを使う場合に、サーバーにはsshでログインできる環境が多いと思います。その状態の場合にはscpというコマンドを使うことで、サーバー上のファイルをダウンロードしたり、自分のPCからサーバーへアップロードしたりすることができます。サーバー上のログをダウンロードしたい、MySQLのダンプをダウンロードしたい、といったユースケースで利用でき便利です。 前提:sshでログインできること 今回はEC2(Amazon Linux)を前提に、以下のコマンドでサーバーにログインできる状態とします。 # sshでログイン ssh -i ~/my.pem ec2-user@xxx.x
こんにちは、@yoheiMuneです。 Pythonのお仕事でビープ音を鳴らす実装をしたので、今日はそれをブログに書きたいと思います。 ビープ音を鳴らす実装 さっそくですが、ビープ音を鳴らす実装です。ビープ音はWindowsとMacでそれぞれ実現方式が違うので、platform.system()で環境別に実装します。 def beep(freq, dur=100): """ ビープ音を鳴らす. @param freq 周波数 @param dur 継続時間(ms) """ if platform.system() == "Windows": # Windowsの場合は、winsoundというPython標準ライブラリを使います. import winsound winsound.Beep(freq, dur) else: # Macの場合には、Macに標準インストールされたplayコマンド
こんにちは、@yoheiMuneです。 今日は、create-react-appでCSSモジュールを有効化する方法をブログに書きたいと思います。 目次 何がしたいのか create-react-appを用いることで、簡単にReactアプリケーションを作ることができます。create-react-appではほとんど設定ファイルが存在せず(正確には内部に隠されている)、シンプルなのに様々なことができるようになっています。 シンプルで使いやすいのは良いのですが、設定自体を変更したい場合には少し大変です。拡張できるポイントも用意されていますが、それに該当しない場合には独自に設定をする必要があります。CSSモジュールの有効化も独自設定が必要です。今日はその手順をブログに書きたい次第です。 CSSモジュールとは何か 少し話が逸れますが、CSSモジュールについても少し触れたいと思います。CSSモジュール
こんにちは、@yoheiMuneです。 今日はGulpを用いてSourceMapを作成する方法をブログに書きたいと思います。 目次 ソースマップとは ソースマップ(SourceMap)は、UglifyJSなどで最適化する前(またはコンパイルする前)のJavascriptを保持したファイルです。ブラウザへの配信ではJavascriptを最適化しますが、その最適化のプログラムに不備があったらデバッグが大変。そんな時に、圧縮したファイルに対応したソースファイルも作っておくことで、エラーの箇所を特定しやすくなります。 詳しくは、以下のサイトをご覧ください。 ソースマップを使用する - 開発ツール | MDN Gulpでソースマップを作成するには、gulp-sourcemapsというライブラリを使います。 インストールはnpmで行います。 $ npm install --save-dev gulp-
こんにちは、@yoheiMuneです。 GulpでHTMLファイルを圧縮(minify)する方法を、ブログに書きたいと思います。 目次 Gulpとは Gulpとはフロントエンドのビルドツールの1つです。今回紹介するhtmlの圧縮以外にも、JSの圧縮や結合など色々なことができます。gulpについては「[JavaScript] Gruntの後発のフロントエンドビルドツール、gulpに入門」をご参照ください。 GulpでHTMLのミニファイする いくつかnpmモジュールがありますが、gulp-htmlminが人気もあって良さそうです。 npm経由でインストールします。 $ npm install --save gulp-htmlmin 以下のようにgulpで実装します。 const gulp = require('gulp'); const htmlmin = require('gulp-htm
こんにちは、@yoheiMuneです。 PHPの開発ではプロジェクトによってPHPのバージョンが違うことがほとんど。ローカルでPHPのバージョンを気軽に切り替えられると開発が捗ります。今日はPHPBrewというツールで、それを実現する方法をブログに書きたいと思います。 目次 PHPのバージョン切り替えツールは乱立状態 今回紹介するPHPBrew以外にもいくつも同様のツールが存在していて、乱立しているようです(参考→phpenvやphpbrewの雑な比較)。参考先の方のオススメとは別ですが、色々と試した結果、PHPBrewが一番使いやすい印象でした。 PHPBrewの使えるOS PHPBrewは以下の環境で利用可能です。Windowsはサポート対象外です。 Mac OS 10.5+ Ubuntu Debian REHL / CentOS PHPBrewのインストール 「依存ライブラリのインス
こんにちは、@yoheiMuneです。 スマホ向けWebサービスを開発していたら、Android端末での表示確認やデバッグが大変だった経験が誰しもあるのではないでしょうか?今日はAndroid ChromeをPCからデバッグする方法をブログに書きたいと思います。 目次 やりたいこと 開発したアプリケーションをAndroidのChromeブラウザで表示した場合に、CSSの確認や、ログの確認や、JSの実行などのデバッグ作業を高速に行いたい、というのが今回の目的です。 以降のステップを行うと、PCのChromeと同じようにディベロッパーツールからデバッグを行うことができます。 手順1:Android端末の開発者モードを有効化する AndroidとPCをUSBで接続してデバッグを行います。そのためAndroidの「開発者向けオプション」をONにする必要があります。基本的には設定アプリ内のビルド番号
こんにちは、@yoheiMuneです。 Swiftのお仕事で、UILabelの一部の文字だけ色を変更する実装をしたので、それをブログに残しておきたいと思います。 目次 何がしたいのか UILabelでラベルを作成した場合に、一部の文字だけを色やフォントを変えたい場合があります。例えば以下のような表示です。 これを実現するには、Storyboardを使う方法と、コードを使う方法の2種類あります。それぞれのやり方を書きたいと思います。 ストーリーボードでUILabelの一部文字の色を変える ストーリーボードを使う場合、コード記述なしで設定することができます。 対象のUILabelを選択し、設定のTextをPlainからAttributedに変更すると、文字色など細かく設定できるようになります。 変更したい文字をマウスで選択状態に(下記の場合には「こんにちは」を選択)して、色を設定すると、選択部
こんにちは、@yoheiMuneです。 G's ACADEMY TOKYOさんでいくつか講義を担当させていただいているのですが、新しくデータベース設計の講義を行ったので、そのスライドを公開したいと思います。 講義内容 この講義は、初めてプログラミングを学んだ方向けで、卒業制作で作るアプリケーションのデータベース設計ができるようになることを目標にしています。特に論理設計を扱い、アプリケーションで扱うデータ構造を読み解いて理解できるようになります。 論理設計では以下の項目を扱います。 データの理解 エンティティの定義 リレーションシップの定義 データ項目の定義 列の定義 少しでも参考になればと思い、もし気になった方はチラッと見てみて頂けたら嬉しいです。 編集後記 データベース設計についていざ講義を作ろうとするとなかなかアイデアがまとまりませんでした。いつもやっていることをいざ明文化しようとする
こんにちは、@yoheiMuneです。 Pythonの辞書(Dictionary)で、データを追加した順を保持したい場合があります。その場合にはOrderedDictを使うと便利です。今日はその使い方をブログに書きたいと思います。 目次 Dictionaryでは順番が保持されない 通常の辞書(Dictionary)では、データを追加した順が保持されません。 d = dict() d["one"] = 1 d["two"] = 2 d["three"] = 3 これをfor文で取り出すと、追加した順で取得することができません。 # for文での抽出例 for k, v in d.items(): print(k, v) # one 1 # three 3 # two 2 この場合に、追加した順で取り出したいとなると、これから説明するOrderedDictを使う必要があります。 Ordered
こんにちは、@yoheiMuneです。 JavaScriptで日付を扱う場合に、デフォルトではDateクラスくらいしかなくて使いづらい。その問題を解消するライブラリはいくつか存在しますが、その中でMoment.jsが非常に使いやすいので、今日はその使い方をブログに書きたいと思います。 目次 はじめに 本記事は、moment.jsを用いた日付処理について記述しています。ライブラリを用いない日付処理については「[JavaScript] 今日、明日、昨日、月末、月初などを取得する」でブログを書いたので、もし良ければご参考ください。 Moment.jsとは Moment.jsは、Javascriptで日付を扱うためのライブラリです。文字列からパースしたり、月末月初を求める演算ができたり、任意のフォーマットで出力できたり、と様々な機能があります。日付の演算やパース処理をする際には、必ず使いたいライブ
こんにちは、@yoheiMuneです。 Amazon EC2のAmazon Linuxで、Javaの最新版をインストールすることがあったので、その手順をブログに残したいと思います。 目次 対象の環境 Amazon EC2では様々なOSを扱えますが、この記事の対象はAmazon Linuxです。 また、執筆時点でのJava最新版は1.8なので、それをインストールする内容で執筆します。 プレインストールのJavaを確認する Amazon Linuxには、最初からjavaが導入されています。 $ java -version java version "1.7.0_151" OpenJDK Runtime Environment (amzn-2.6.11.0.74.amzn1-x86_64 u151-b00) OpenJDK 64-Bit Server VM (build 24.151-b00,
こんにちは、@yoheiMuneです。 今日はPythonで日本語の全角と半角を相互に変換する方法について、ブログを書きたいと思います。 目次 サンプルコード ここで記載したプログラムは、yoheiMune/python-playground@Githubでも公開しています。適宜ご利用ください。 利用するライブラリ いくつかライブラリはありますが、mojimojiというライブラリを使います。pipでインストール可能であること、実装がシンプルであること、が良いなと思います。 mojimojiのインストール pipでインストールすることができます。 $ pip install mojimoji 全角から半角へ 全角から半角への変換は、zen_to_han関数を利用します。 import mojimoji mojimoji.zen_to_han("アイウエオ12345ABC") # => アイウ
こんにちは、@yoheiMuneです。 npm linkというコマンドがあるんですね、初めて知りました。npmモジュール開発が効率的にできたので、ブログにも用途や使い方をまとめておきたいと思います。 目次 npm linkとは npm linkはシンボリックリンクを貼る仕組みで、開発中のnpmモジュールと、それを組み込むアプリケーションとをつなぎ合わせることができる仕組みです。 ここでは、開発中のモジュールをmymodule、それを組み込むアプリをmyappとして、以下のディレクトリ構成だとします。 + ~/git/ - mymodule/ <--- 開発中のモジュール - myapp/ <--- 開発中のアプリ - node_modules/ - mymodule/ (※2) <--- 開発中のモジュールに依存している 通常であればmyappからmymoduleを使う場合には、npm i
こんにちは、@yoheiMuneです。 ファイルアップロードを実装する時はいつも苦戦するのですが、multipart/form-dataというデータ形式を理解できたらすんなりと実装できるようになりました。今日は、ファイルアップロードでは必須とも言えるmultipart/form-dataについて、ブログにまとめました。 目次 サンプルコード 本記事のサンプルをGithubに置いてあります。Node.JSのサーバーで実装しています。実際に動かすと理解の助けになると思いますので、必要あればご参照ください。 コンテンツの種類とは multipart/form-dataを扱う前に、まずは「コンテンツの種類」について理解する必要があります。 フロントエンドとバックエンドとのデータのやり取りでは、html、javascript、png、jsonなど様々な種類のデータを扱います。その際に、どんなデータを
こんにちは、@yoheiMuneです。 今日は、Python標準のvenvという仮想環境ツールを用いて、プロジェクトごとに独立した環境を作る方法をブログに書きたいと思います。 目次 venvとは venvは、プロジェクトごとにsite-pakcagesを独立して管理できる仮想環境ツールで、Python3.3から公式に組み込まれています。このブログで以前には「pyenvの使い方」や「pyenv-virtualenvの使い方」を紹介しましたが、今回はそれとは別の仮想環境の作り方となります。 僕は、Pythonに幾つかある仮想環境ツールを以下の基準で使い分けています。 pyenv ローカル開発で利用。頻繁にPythonのバージョンとsite-packageを同時に切り替えたいので使ってます。これでanacondaも利用。 venv Python3系の本番での環境構築に利用。 virtualenv
こんにちは、@yoheiMuneです。 今日は、左右フリックなどでサクサクと情報の選択ができるTinderUIの実装方法を、ブログに書きたいと思います。 目次 Tinder UIとは TinderUIという単語は聞き慣れないかもしれませんが、Tinderというマッチングアプリで採用されているUIで、左右フリックで情報を取捨選択できるような使い勝手をすることができます。 この実装方法について、今日はブログを書きたいと思います。 どのライブラリを使うか 自前でゴリゴリとアニメーションを実装しても良いですが大変なので、ライブラリを使いたいと思います。色々とライブラリ調査がされていますが、今回は一番人気のありそうなKolodaライブラリを使うことにします。 ライブラリの採用基準は以下にしました。 スターが3,500個(2017/11時点)でたくさんあり人気 最近のコミットもあり放置されていない U
次のページ
このページを最初にブックマークしてみませんか?
『YoheiM .NET - 世の中のWeb情報に、体験と意見を添えて発信します』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く