Web Design Articles

  • 1872

新渡戸稲造の「武士道」

「武士道」を読んでいるという話なんだけれどこれが、とても面白くて。令和でこそ生きる知識だと思う。 日本人はなぜ世界から見ると礼儀正しい人種なのか?神を信じていないわけだから蛮族になるはずなのになぜココまで、まごころある芯の通った精神を持っているのか?という問いを外国人から度々受けた”新渡戸稲造”さんが分析した結果それはたぶん「武士道」だというという結論に至り。 それを書にしたためたというもので。そしたら世界中で読まれる本になったということなのだ。 無宗教について 「宗教なし」というのは、海外の人にとって驚くべきことなのだ。なぜなら、海外の人は聖書・コーランなどなどの経典から行動規範を学ぶ事で、自分を正し清い生活を送っているわけで もし、聖書などのルール(経典)がない場合は、好き放題自分勝手に生きるクソな民族になるしかない。 もしくは、経典がない場合は自然を信仰する(アニミズム)方向となり、理知的で文化的な生活は送れるはずがないというのだ。確かに、ほかの民族をみると自然信仰か、唯一神信仰か、多神教しか見当たらない。本当に日本は不思議だ?と思っても仕方がないかもしれない。 海外の友達に「君はどんな神を信じているんだい?」という問いに「無宗教」だと答えると。 蛮族扱いされたという話はよく聞く。日本人自身答えられない、この根底に流れる規範、社会構築方法はなんなのか? ということを、新渡戸稲造は「武士道」であるとしそして、この「武士道」は「神道」・「仏教」・「儒教」の中から探り欧米思想との対比を示してくれている。 良く感じていたこと 会社で働いていて感じていたことが、西洋式の合理的な個人評価や、個人の権利を保障する制度、成果論や、欧米思想による組織連携方法を 日本の会社に適用したとき。 どこか冷たい感じがして、しっくりこない。 進んでいるというより、後退している感じがする。そこまでルールで明文化しなくても大丈夫じゃないの?というところまで明文化することで窮屈になることが多い。 なぜなのか?その答えが、「武士道」にあったという訳だ。THE TEAM 5つの法則 (NewsPicks Book)作者: [...]

  • 1873

はじめてのプログラミング的な 「のすけ式」エンジニアになりたい人向けの講座

最近、プログラミングをやったことない人でも、それなりにプログラミングできるようになる カリキュラム考えて、実際にやってもらっているのですが どうせなので、ここにも公開していきます。 いろいろ内容に異論はあるかもしれませんが「のすけ式」ということでやっていきます。 【内容】 WordPressを通してHTML・CSSを学び さらに実践的なWordPressの構文及びPHP言語を3か月程度(人による)で習得してもらうプランです。 ・最終成果物は「天気の子」のような自分のブログサイトを 自力で構築するまでになります。 https://tenkinoko.com/ 具体的にはWordPressのテーマを自分で作ることになります。 ここまでできれば、企業のコーポレートサイトの受注や 個人サイトの開設など、小銭稼ぎくらいのサイト作成ができるように なります。 最近のWordpressサイトの受注内容をざっと見たところ 天気の子のように、かなり動きのあるサイトが求められています。 そこで、Javascriptも習得しなくては、ほかのエンジニアとの差別化が 難しいと考え、その範疇も含めたいと思います。 社内で必要技術があるので、ちょっと偏っているかもしれませんが 世情は反映されていると思います。 [...]

  • 1874

Nuxt.jsとかメモ

最近は Nuxt.jsでSPAアプリケーション及び、SSRアプリケーションを 構築したりしています。Vue.jsは以前利用していたknockout.jsに似ていて書きやすい。 cssフレームワークやjQueryも併用できるなど相性がいいので気に入ってます。サイトを作っていく上で、やはりデザインの大切さに気付く いままでBootstrapで適当に作ってきたが、やはりオリジナルのコンセプトで サイトを構築していかないと、差別化された世界観の システムは構築できないのだと痛感しています。 特にボタン回りは課題です。 フラットデザインはいよいよダサくなってきました。 Googleが提唱するマテリアルデザインをより、Googleを超える思想で 実装していくのがカギだと思っています。 Webの世界から離れたら、地球上には解像度の高いマテリアルがあふれています。 水の表現などは良い線いっていますが、土や岩などまだまだ ほど遠い質感がのこっていて。浮ついていない重厚感あるマテリアルの存在感を どう表現できるかが、重要だと感じています。 ヒントは質感、反発。 あと文脈はとても大事。 アートの世界でも、ほぼすべてが文脈。 ただ絵を眺めているだけでは受け取れない奥行きがある。 奥行きがあるから、そこに一貫性があり、表現の幅が広がる。 [...]

中華で始める Arduino入門日記1 はじめに「中華機を購入してみる」

みなさまこんにちは、のすけです。 ハードウェア触ってみようと最近動き出しているHOLLYWIS(はりうす)ですが まずは、初心者でも手を出しやすそうなArduinoから始めていくことになりました。 これが終わったらRasberryPi編に入ろうかと思います。 もしかして、お気づきかもしれませんが、似たような連載が実はスタートしています ⇩ hollywis.hatenablog.com しかし、僕の方でも別枠で始めることになりました。 個々に勉強になりますし、次のような違いもあるからです。 さいぞうの日記との違い キットが違う(さいぞうさんはOsoyo製)  僕のはよく分からない中華キットです(後述) やり方も違う 特に相談もせず別々に進めていくので、ぶつかるであろう課題も違いますし、解決するアプローチも違ってきます。  別々でやることで、より網羅的にArduinoをカバーできるのではという考えです。 環境が違う  細かな点ですが、利用しているPCやArduinoが違います。 同じ点 同じSainSmartmの「Arduinoを始めよう」のチュートリアルを進めていきます。 チュートリアルはこちら⇩(無償で公開されています) http://www.sainsmart.com/zen/documents/20-013/SainSmart%20UNO%20Starter%20Kits%20Tutorials.zip 初心者におすすめ Arduinoとは ArduinoとはWebで調べたところ「とても簡単に扱えるマイコンボード」らしいです。 読み方は【あるどぅいーの】のようです。 マイコンボードには他にも色々あるのですが、扱いやすさが優秀で かなり初心者のハードウェア入門としてはかなりデファクトスタンダードのようです。 僕は数年前に「H8マイコン」という、これも初心者が扱いやすいという触れ込みの マイコンを触ったことがありました。 しかし、開発言語がアセンブラやC言語でしたのでとても取っ付き難かったと記憶しています。 (特にアセンブラ) しかし、このArduinoはC言語を元にした独自言語であるArduino言語を利用して プログラミングを進めて行くそうです。 また、専用のIDEがあるそうでArduino本体とPCの接続がとても楽そうです。 Arduio IDE この連載ではArduinoのスタータキットを利用して、チュートリアルを進めていきます。 理由としては、Arduinoではじめにどんなことが出来るのかを学べそうだからです。 センサーなどの組み合わせにより、色々なことが出来るとは思うのですが、具体的などのくらいの労力とお金で 出来るのか知りたいという方には、「Arduinoを始めよう」のキットを始めるのが良いと思いました。 ちなみの本はこちらの模様(僕は持ってません) Arduinoをはじめよう 第2版 (Make:PROJECTS)作者: Massimo Banzi,船田巧出版社/メーカー: オライリージャパン発売日: 2012/03/16メディア: 単行本(ソフトカバー)購入: 9人 [...]

さいぞうのArduino初心者日記 もくじ

こちらは、Arduino初心者日記の目次です。 Arduinoの格安スターターキットを買ってネットに転がっている無料チュートリアルを進めていく記録になります。 現在、2回目で、10〜20回の連載?を予定しています。 第1回 hollywis.hatenablog.com 第2回 hollywis.hatenablog.com 第3回 hollywis.hatenablog.com 第4回 hollywis.hatenablog.com 第5回 hollywis.hatenablog.com 第6回 hollywis.hatenablog.com 第7回 hollywis.hatenablog.com 第8回 hollywis.hatenablog.com 週に1回くらい更新する予定です。 高い入門書を買うくらいなら、この記事をそのままやればタダなのでいいですよ。

さいぞうのArduino初心者日記2 Hello world

こんにちは。さいぞうです。 前回Arduinoのスターターキットを買ったので、これを使ってチュートリアルをこなしてみます。 hollywis.hatenablog.com 使うのはこちらのチュートリアルです。 www.sainsmart.com PDFが無料で公開されています。英語ですが。 でも日本のサイトでこれをやってる例を見つけたので、参考にやってみます。 ht-deko.com Arduinoの開発ツールをインストール 1章からはじめようと思ったのですが、その前にArduinoの開発ツール(IDE)が必要でした。 こちらからダウンロードします。 Arduino - Software 普段使いのPCはmacなのですが、ここでちょっとひねって仮想マシン内のwindowsで動かしてみることにします。 なので、 ページ右側のWindows Installerをクリックして、Windows版をダウンロードします。 途中、Contribute to the Arduino Softwareとかいって寄付をつのる画面になります。 寄付したい人はすればいいと思いますが、しなくてもダウンロードはできます。 「Just Download」をクリックしてください。 それをそのまま実行し、適当に進めていけばインストール完了です。 開発ツールを起動する スタートメニューにArduinoという名前のアプリが登録されるので起動します。 最初から、何か関数のようなものが書かれたエディタが開いています。 チュートリアルの1章の内容をいれてみる チュートリアルのChapter 1 Hello World1!!の内容を見てみます。 いろいろ英語が書いてあるのですが、真ん中のExample Code:の下の枠に以下のコードが書いてあります。 void setup() { Serial.begin(9600);// opens serial port, sets data rate to 9600 bps [...]

さいぞうのArduino初心者日記1 スターターキットを買ってみる

ハード的な物に手を出したい お久しぶりです。さいぞうです。 私はプログラミングといってもこれまではWeb系しかやったことがなかったんですが、 最近IOTとかMakeとかよくハードウェア的な、電子工作的なプログラミングが流行って る気がします。 なんかWebも飽きてきたのでちょっと手を出してみようとおもいます。 そこで目をつけたのがよく名前を聞くArduino。 人が使っているのをみたことはあるけどよくわかりません。 でもなんか簡単にいろいろできるらしいのでやってみます。 ハード的な物に手を出したい Arduinoって? 何から手を付けていいかわからん 便利な全部入りパッケージ「スタータキット」 ケチなので安いキットと無料チュートリアルにしたい 届いたよ Arduinoって? こんなやつです。 調べたところ、要はマイコンがのった小さなボードで、簡単なプログラムでいろんな信号をだせて、モータを制御したり、LED光らせたりいろいろするらしいです。 詳細な説明はWikipediaでもみてください。 Arduino - Wikipedia 何から手を付けていいかわからん いろいろなことができるらしいArduinoですが、どこから初めて良いかわかりません。 Arduino本体だけ買っても何もできず、電子部品をいろいろ買わないといけないらしいし、何をやりたいかによっても買うものが変わってきます。 やりたいことを考えて部品を揃えようとしても、まずどれくらいのことがどれくらい難しいのかわからないので、目標すらたてられません.... 便利な全部入りパッケージ「スタータキット」 困っていろいろ検索してみると、どうやら初心者向けにいろんなパーツをつめあわせた「スターターキット」っていうものが売っていることがわかりました。 そこで、まずこれを買って試してみることにします。 スターターキットはいろんな会社が出していて、Amaoznで検索するとたくさんでてますが、よく「Arduinoをはじめよう互換」なんて書いてあります。 これは、どうやらMake:PROJECTSの出しているチュートリアル本、「Arduinoをはじめよう」にのっている内容を試すのに必要なパーツが全部入ってますという意味らしいです。 有名どころとしては、電子部品、モジュール系で有名なスイッチサイエンスのキットとか、 似たようなセインスマートのスターターキットがあります。 ケチなので安いキットと無料チュートリアルにしたい でも両方買うと7000円くらい。うーん。 ちょっと高いなあ。 そこでAmazonさらに検索して、少しでも安い別の会社のキットを買うことにしました。 Amazon.co.jp ウィジェット 一応三千円台。 まあ内容が微妙に違うと思いますが、どうせ何もわからないんだからこれでいいです。 これもArduinoをはじめよう互換のキットなんですが、本も買いたくないので、上に書いたセインスマートのサイトでタダで公開されてるチュートリアル、これをためしてみることにしました。 SainSmart Uno R3 Starter Kit – SainSmart.com このキットのページのTutorialってとこからダウンロードできます。 [...]

またしても拠点を移動

こんにちは。のすけです。 実はHollywis(はりうす)の拠点を移動しました。 前回は新宿でしたが、今回は渋谷に主に出没することになりました。 前回新宿でやっていたプロジェクトが終了したためです。 作業場所の要件は、複数人で作業できる場所があること、会議室があること、コワーキングスペースであること、そしてハードウェア開発ができることです。 私たちの使命は「場所をハックして盛り上げる(新しいコミュニティを作る)」ことしているのですが、インターネット上のWebだけだとできることが 限られてしまうと考えました。ハードとWebの連携、、、IoTってやつですね。 そこで、その場所に設置可能なハードウェアの開発ができることを新しい要件として加えました。 そして見つけたのがこちらです。 渋谷アトリエ News | 渋谷アトリエ | co-lab 各拠点案内 | co-lab 作業スペースの様子。お洒落な木製のデスクが多く置いてあって快適です。 他のco-labメンバーと共有な感じです。無事にコラボれるかな? ここには FabLab Shibuyaさんが入っており、色々な機械を利用できるそうです。 レーザーカッター 豊富な3Dプリンタたち 画像はFacilities - FabLab Shibuyaさんから引用させていただいております。 なんか、色々あって凄いですね。 まだ、システム開発案ばかりやっているので、3Dプリンタには触れていないのですが これから色々作っていきたいと思っています。

TensorBoardを使ってみる

TensorFlowの実行結果の学習の可視化ツールであるTensorBoardを利用してみます。 前回のままではlogが記録されませんので、SummaryWriterでlogを記録するように修正する必要があります。 しかし、公式gitには実装済みのチュートリアルデータがあるため、こちらを実行することにします。 git clone https://github.com/tensorflow/tensorflow cd tensorflow/tensorflow/g3doc/tutorials/mnist そして以下を実行 Succesfully downloaded train-images-idx3-ubyte.gz 9912422 bytes. Extracting data/train-images-idx3-ubyte.gz Succesfully downloaded train-labels-idx1-ubyte.gz 28881 bytes. Extracting data/train-labels-idx1-ubyte.gz Succesfully downloaded t10k-images-idx3-ubyte.gz 1648877 bytes. Extracting data/t10k-images-idx3-ubyte.gz Succesfully downloaded t10k-labels-idx1-ubyte.gz 4542 bytes. Extracting data/t10k-labels-idx1-ubyte.gz can't determine number of CPU cores: assuming 4 I tensorflow/core/common_runtime/local_device.cc:25] Local device intra [...]

babylon.js ステップ13 スプライト(Sprites)

babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! 2つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から利用可能) スプライトの設定 スプライトアニメーション方法 スプライトマップ タイル表現に便利なスプライトマップタイル まとめ 2つのスプライト管理方法 スプライトは大量の2D画像を利用するため、パフォーマンス管理が重要です。babylon.jsでは2つの管理方法があります A uniform spritesheet (均一化されたスプライト)・・・SpriteManagerを利用 A packed spritesheet(パッケージされたスプライト)・・・SpritePackedManagerを利用 これらは、1枚のスプライトであってもManagerを使う必要があります。 スプライトマネージャー // 木の画像用のsprite managerの作成 var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene); treesManagerの部分は名前なのでユニークな名前を設定します。「Assets/Palm-arecaceae.png」の木の画像を最大2000個作ることができる容量を確保します。800の部分は画像のサイズに対応するセルサイズです。最後に追加するsceneを設定します。 // プレイヤー用のsprite managerの作成 var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager","Assets/Player.png", 2, {width: 64, height: 64}, scene); [...]

babylon.js ステップ12 レイキャスト(Raycasts)

babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう! レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelper まとめ レイキャストとは光線による衝突判定 前回の11回ではマウスの位置と、壁の衝突判定を行いましたが。レイキャストは、光線(レーザー・)による衝突または、交差チェックを行う機能です。FPSゲームの弾丸の軌道なんかはレイキャストで行います。 マウスクリックで、選択されたメッシュ情報を取得する方法(scene.pick)を使用しました。一方レイキャストでは似たようなメソッド、 scene.pickWithRay() を使っていきます 光線と最初に接したメッシュの取得 光線と最初に接したメッシュの取得をやっていきます。 真ん中に、光線を出力する赤い箱があります(箱はマウスで動かせる)そして、その光線と接する可能性のある、青い箱が2つと緑の箱があります。 なお、奥の青い箱は、光線が届きません。光線が当てられた箱は上に伸びていきます。 デモはこちらhttps://www.babylonjs-playground.com/#KNE0O#84 まず、最初に光線の出力もとである赤い箱には、衝突検出をoffにする設定を入れます。赤い箱自体が衝突判定されてしまっては困りますので。 box.isPickable = false; 次に、箱から出る光線のベクトルを定義します。その際,箱の位置()を差し引いて箱の原点origin(光線が始まる場所)からの方向を取得します。 // 赤い箱との方向ベクトル var forward = new BABYLON.Vector3(0,0,1); forward = vecToLocal(forward, box); // 箱の方向 var direction = forward.subtract(origin); direction = BABYLON.Vector3.Normalize(direction); vecToLocalは箱からの方向を取得する関数です。Normalizeは正規化(長さを1に)する作業です。そして、取得した単位ベクトルから任意の長さの光線を作成します。 var ray = new BABYLON.Ray(origin, [...]

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.