生まれ育った街、神戸は長田区丸山から鵯越を歩く(1)。

神戸 歩く 思い出


Posted on 2017-09-20


IMG_1104

30年ぶりくらいに生まれ育った街を歩いた。
神戸は長田区の一番北にある丸山地区というところなんだけど18歳まで住んでいて東京はもうすぐ15年だけど同じ街に10年住むってことはなくて、今でもなんだかんだと一番長く住んだ街になる。
で街って書いているはいるけどこれが街と呼べるようなものなのかはなはだ心もとないくらいの家と生協と個人商店しかないような小ささだったりする。
長田が典型的な下町な感じだとすると方向だけは長田から北の山側にあって山の手なんだけど、土地的に山というか谷にあるだけでほぼ...

もっと読む

文章の先頭や末尾にアイコン画像をつけるってやつをSwiftで比較的簡単にやってみる

React ES2015 webpack BrowserSync Babel thee.js


Posted on 2017-05-16


Webサイトなどではよく文章の先頭にアイコン画像をつけることでリンク先や文章内容を類推しやすくして読ませるってことをよくやってますね。
Yahoo! JAPANのトップページでも左カラムに各サービスへのリンクエリアを設けて先頭へ各サービスのアイコン画像を配置したりトピックなどでも末尾にカメラアイコンやNEW、またビデオ再生のアイコン画像を配置してリンク先のコンテンツには写真があるよとかビデオがあるよなどを類推しやすくしていますね。
CSSで背景に画像を配置して左パディングすることで実現した...

もっと読む

thee.jsってReact風(react-three-rendererで)に書くと簡潔に書けるのかもしれない。

React ES2015 webpack BrowserSync Babel thee.js


Posted on 2017-05-15


Reactをいろいろ触って試しているとThree.jsのオブジェクトをReact風(ライク)のコンポーネントとして書けるよっていうのがあって試してみました。 結論からいうと元のThree.jsの記述よりも長くなってあまり簡潔には書けませんでした。。。 ただしThree.js単体での記述よりも構造的で理解しやすいかなと思います。

これが今回使用したreact-three-rendererです。そのGithubのURLになります。
react-three-renderer

import React
もっと読む

Reactの学び方(2017年ゴールデンウィーク)、Reactってけっきょく何なのか?

React ES2015 webpack BrowserSync Babel


Posted on 2017-05-01


最初に

ちょっと時間に余裕が出てきたのでReactの知識をアップデートするかってことで学び直してます。
以前やった学んだ時はReactを実践投入することはなかったので今回は実践で投入してサービスとして使えるところまで持っていこうと思ってます。

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず…

極端なところだけど生というか素のReactってのは何なのかを知ろうとしたらこういうアプローチがいいと思う。
React系は細かくモジュールに分割して必要なものを...

もっと読む

Storyboardを使用しないでアプリを準備する(Swift3)。

swift xcode Swift3 iOS


Posted on 2017-02-24


Storyboardを使用しないSwiftでアプリを準備する。

以前書いた記事からiOS 10 SDKになってアップデートしないといけないところとなります。
SDKの10からAppDelegate.swiftでの記述が変わったようですね(Swiftだけの記述になってますがObjective-cでも変わっているはず)。
Storyboardを使わないでViewControllerを呼び出す場合、変更されたapplicationメソッドを使えばまぁいけるわけです。
引数launchOptions...

もっと読む

webpackでejsを使い、共通要素をインクルードして効率的にやりたいよね。

フロントエンド系技術 フロントエンドエンジニア npm Node.js Yarn webpack ejs


Posted on 2017-02-10


数ページのサイトとはいえテンプレ化はしたい、includeを使うと共通要素を外部ファイル化できて効率いいよね。

サンプルとしてファイルは以下におてます。
https://github.com/shigekitakeguchi/yarn-webpack-ejs

ちょっとした、例えばブランドサイトとかキャンペーンサイト、小規模な企業や組織、お店のサイトというと構成によっては1ページってこともあるけど数ページから20ページくらいの規模になると思う。
いやいやもっとあるよってことになるかもしれ...

もっと読む

npmがわりとゆるふわ過ぎたのでYarnに移行するか検討するためにいろいろやってみた

フロントエンド系技術 フロントエンドエンジニア npm Node.js Yarn


Posted on 2017-02-05


https://yarnpkg.com/

Facebookが作ったというnpmとの互換パッケージマネージャ

Node.js系のパッケージマネージャーといえばnpmです。いろいろありますがかなり便利なのでずっと使ってました。
ただnpmで管理していたパッケージの機能がローカルでは動くけど、どうも本番で動いてないんじゃない?的なことがあって
どうやらそのパッケージのバージョンの違いで動いてない的なことが起こっているんじゃないか疑惑があってnpmってそういえば、
バージョンとかけっこうゆるふ...

もっと読む

webpack+spritesmithでページの高速化、複数のスプライト画像とRetina対応について

フロントエンド系技術 フロントエンドエンジニア webpack spritesmith


Posted on 2017-01-31


webpack-spritesmithで複数のスプライト画像を作るってどうやるのか今ひとつわからなくてやってみたやり方の紹介。
やってみたら単純なことですね。SpritesmithPluginをnewしてpluginに複数設定してやればいい。 元となる画像をディレクトリわけて配置してそれぞれのディレクトリからスプライト画像を作る。
わける基準は例えばスプライト化した画像を最適化(減色をする)場合なんかは色味でわけると減色効率がよかったりする。
赤系は赤系だけでスプライト化するとかね。

...もっと読む

webpack+spritesmithでページの高速化

フロントエンド系技術 webpack spritesmith


Posted on 2017-01-30


ページの表示を高速化しようとしたら手法はいろいろあるけどフロントエンドエンジニアができることのひとつに画像のスプライト化ってのがある。
たくさんの画像ファイルをサーバーへリクエストして表示ってのをやるとサーバーの負荷になる。 負荷になると応答が遅くなる。こういうことからリクエスト数を減らせば表示の高速化が見込まれたりするので少しでも快適にページを観てもらおうと思えばやったほうがいい。

http://compass-style.org/
で、ソシャゲーとか作ってるとアクセスは多いし負荷とな...

もっと読む

iPhone 7 Plusのケースで迷った件。

iPhone 7 Plus 5.5インチ Anker iPhoneケース


Posted on 2017-01-27


iPhoneのケースにこだわることもそこまでなくて透明のシンプルなものか黒、前回のiPhone 6sはアップルの純正の皮のを使ってた。
iPhone 7 Plusにして5.5インチの画面がやっぱり大きいというのもあったのでこれで映画を観る機会も増えるかなー、そしたら手帳型の方だったら自律して立つよなーとか思ってた。
iPhone 7 Plusが到着するっていうんでいろいろ探したらカメラが2つあるってことでiPhone 6s Plusと互換性がない、
じゃあ7 Plusに対応したやつじゃない...

もっと読む

    Page 1 of 12

shigeki.takeguchi

渋谷の某ソーシャルゲームの会社でフロントエンドエンジニアとして働いてます。20世紀よりウェブ業界。気づいたらアラフィフ業界人です。
まだまだ現場で粘り強く作る側でいたいと思います。

By year

  1. 2017 (11)
  2. 2016 (23)
  3. 2015 (13)
  4. 2013 (15)
  5. 2012 (21)
  6. 2011 (34)

© 2012 shigeki.takeguchi