ysugiyama12 のアーカイブ

d3.js でx軸のラベルを文字列にする

2017年5月24日

通常はラベルの数値を元に範囲を取得して均等に表示する処理をしているが、それをせずにデータ数に応じて均等に配置する。 いじる部分だけピックアップ ``` var xScale = d3.scale .ordinal() .domain(d3.range(gdp.length)) .rangeRoundBands([0, width], 0.05); ``` ``` var xAxi
続きを読む

ファイルやフォルダの取得、削除など

2017年5月19日

``` use Cake\Filesystem\Folder; use Cake\Filesystem\File; ``` これらを取り込むことでファイル操作が可能となる。 例えば、$image_pathにrootからのpathが入っているとすれば(フォルダの場合) ``` $dir = new Folder(ROOT . DS . $image_path); if ($dir_igp->find()) { $
続きを読む

in_arrayという関数

2017年5月17日

配列に該当する要素が含まれていればtrueを返す関数in_arrayは使い方に注意したほうがよい。 たとえば ``` $array = [0,1,2,3,4]; $input = 3; in_array($input, $array); ``` このようにすれば当然trueがかえってくる。 しかし、"3"(文字列)、3.0(数値),"3.0"でもtrueを返す。 初めの2つはわかるにしても、最後のtrueは違和感を感じるはず。 これはin_ar
続きを読む

placeholderに翻訳機能を適用させる

2017年5月10日

placeholderによって指定された文字列はそのままだと翻訳の対象とならずページ全体を翻訳してもそこだけ無視されてしまう。 そこで、stackoverflowにあった処理を行ったら上手くいったのでまとめておく。 ``` // Find all placeholders var placeholders = document.querySelectorAll('input[placeholder]'); if (placeholders.length) {
続きを読む

改行タグの置換

2017年4月28日

'\n'などを含む文字列をページに表示しても改行が反映されないことがある。 そのため、'\n'などは''に置き換える必要がある。 ``` var text = '改行\nします'; var new_text = text.replace(/\r\n|\n|\r/g, ''); ``` 改行タグは環境によって\n(Mac),\r(古いMac),\r\n(Windows)の三種類がある。\r\nは左端に戻してから1行スクロールするタイプライターに由来するらしい
続きを読む

日時の表記

2017年4月22日

CakePHPでデータベースから日時(createdなど)を取得するとFrozenTimeというクラスの状態で出力される。そのままechoすると ``` 4/21/2017 12:00 AM ``` のような形式で出力される。これを〜年〜月〜日と日本の形式にするには ``` echo $data->created->year,'年',$data->created->month,'月',$data->created->day,'日'; ``` な
続きを読む

ログイン認証ボタンの設置

2017年4月14日

cakePHPにおいて、controller, action, providerを指定して認証ページに飛ぶボタンの作成。 ```      ```
続きを読む

画像のalt属性

2017年3月31日

``` ``` alt属性はimage要素内の属性値で、主に画像に関する説明を記述する部分である。 もし何らかのエラーで画像が表示されなかった場合でもaltを登録しておくことでそこにどのような画像が表示されるはずだったかを知ることができる。記号などでも、altが未定義だと怒られてしまうので空の値にしておく必要がある。
続きを読む

地図や画像の上に透明なOverlayを配置

2017年3月28日

コンポーネントはnativeBaseのCardを用いて色を透明にすることで実現した。 ``` Overlay ``` そして、スタイルシートで背景:透明を指定 ``` overlay: { backgroundColor: 'rgba(0,0,0,0)', }, ```
続きを読む

地図上でdrag&dropできるマーカーの作成

2017年3月24日

react-native-mapsにおいて自分で移動させたマーカーの座標を取得できる。 ``` this.setState({ region: e.nativeEvent.coordinate })}//drag終了時の座標を読み取りstateにセット /> ``` 現時点ではdragの判定範囲が狭く移動しづらいので対策を考え中。
続きを読む

記事一覧などに便利なコンポーネント:Card

2017年3月22日

nativeBaseにあるCard要素を用いるとリスト形式のデザインが簡単に実現できる。 ``` No.1
続きを読む

文字が入力されている時だけ色が変わって押すことができるボタンの作成

2017年3月16日

割と使う機会が多いはずだが、綺麗にまとまっているサイトがなかったのでまとめておく。 ``` class Hoge extends Component { constructor() { super(); this.state = { text: ''}; } render() { return ( th
続きを読む

NativeBaseを用いたReact Native のデザイン設計

2017年3月15日

iOS,Androidそれぞれの様式に合わせたコンポーネントをシングルソースで提供するオープンライブラリがNativeBaseである。 npm install した後、各ファイルにおいて必要なコンポーネントを ``` import { Content, Button, Text, Input, getTheme } from 'native-base'; ``` などのようにしてインポートすることで使用することができる。 styleの設定も別ファイルに分け
続きを読む

PropsとStateについて

2017年3月10日

ここの理解がかなり怪しかったので自分なりにまとめます。 # Props コンポーネント利用時に属性として設定できる値で、一度定義したらその値を変更することはできない。 例えば ``` ``` として描画において設定したPropsはMyComponent内のメソッドで ``` Props : {this.props.PropsName} ``` このような方法で呼び出すことができる。 型の指定もできる。この型に
続きを読む

reduxにおいて大切な概念「flux」

2017年3月6日

fluxがどういうものなのかイメージがつかみにくかったのでまとめてみる。   ・データのフローは必ず一方通行になっている→原因や結果にかんする認識の切り分けが容易。   ・HTTPからのアクセスに対し、大きく「Action」「Dispatcher」「Store」「View」の処理に分けることができる。   ・4つの項目の役割を簡潔にまとめると、データの構築→データの配送→データの蓄積→データの表示   ・Storeが更新されたことを感知することでVie
続きを読む

React Nativeで横スクロールするリストの作成

2017年3月1日

ComponentsのひとつであるScrollViewを用いて作成する。 ``` No.1 No.2 //... ``` horizontal = {true}を追加することで縦スクロールから横スクロールへ変化する。
続きを読む

GASの諸機能

2017年2月27日

本日学んだGASの機能をメモしておく。 1.セル内の行の折り返し ``` sheet.range.setWrap(true); //sheet,rangeは状況に応じて定義しておく ``` 括弧内をfalseにすることで折り返しをキャンセルすることもできる。 2.セル内で垂直上向き、下向きに詰める ``` var alignments = [ [ "top", "middle", "bottom" ] ]; var
続きを読む

GASの基本的な書き方

2017年2月22日

Google Apps Scriptにおける基本的なシートの読み取り、書き込みのまとめ。 ``` var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName('シート名');//いじりたいシートの取得 var start_row = 10; var last_row = 15; var range = sheet.getRange(start
続きを読む

JavaScriptで文字列をいじる

2017年2月20日

1.全角カナを半角カナに変換する 自作することもできそうだが、MITによって配布されているので利用させていただく。 http://freesofutotravel.blog94.fc2.com/blog-entry-19.html?sp 2.全角英数と半角英数の変換 こちらがより一般的な変換。 ``` // 半角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.from
続きを読む

Reactの基本的な書き方

2017年2月15日

新しいアプリ作りのために一からReactの文法を覚えている途中なので自分のためにも得た知識をまとめていく。 などにはスタイルを指定することが多い。cssのような書き方で指定できる。 ``` ... const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', back
続きを読む