Web Design Articles

  • 1845

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

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

  • 1944

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

ハード的な物に手を出したい お久しぶりです。さいぞうです。 私はプログラミングといってもこれまではWeb系しかやったことがなかったんですが、 最近IOTとかMakeとかよくハードウェア的な、電子工作的なプログラミングが流行って る気がします。 なんかWebも飽きてきたのでちょっと手を出してみようとおもいます。 そこで目をつけたのがよく名前を聞くArduino。 人が使っているのをみたことはあるけどよくわかりません。 でもなんか簡単にいろいろできるらしいのでやってみます。 ハード的な物に手を出したい Arduinoって？ 何から手を付けていいかわからん 便利な全部入りパッケージ「スタータキット」 ケチなので安いキットと無料チュートリアルにしたい 届いたよ Arduinoって？ こんなやつです。 調べたところ、要はマイコンがのった小さなボードで、簡単なプログラムでいろんな信号をだせて、モータを制御したり、LED光らせたりいろいろするらしいです。 詳細な説明はWikipediaでもみてください。 Arduino [...]

  • 1945

またしても拠点を移動

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

  • 1946

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 [...]

WordPressローカルのテスト環境を用意して開発に備える

ローカルテスト環境とは、自分のPCの内部にサーバを立てて、プログラムを作成とテストをしていくための場所です。 プロダクション環境では、インターネットにアクセス可能な状態で公開されてしまいますので、あまり好ましくありません。 また、一旦リリースした後でも、追加で新しいコンテンツの追加などを継続的に行っていくためにも、テスト環境が必要です。 そこで、自分のPCの内部にサーバを立てて、テストをしやすくします。 これで、いつでもどこでもプログラムの作成や検証ができるようになります。 実際、多くの人がご自分のPCにローカル開発環境にサーバを立ててテストをしており 便利なツールも出てきています。 それが『MAMP』です。 その他にもWindowsではXAMPPというツールも有名です。 XANPPやMAMPを入れる理由は、WEBサーバ環境を独自に簡単にインストールできるからです。 名前の由来は、「XAMPP」がX:クロスプラットフォーム、Apache、MySQLまたはMariaDB、PHP、Perlの頭文字を。 「MAMP」がMacintosh, Apache, MySQL, PHP の頭文字を繋げた名前です。 ちなみにMAMPはWebサーバとしてNginx、言語としてPythonも選べるのでより現代的です。 ※MAMPは今はWindows版もリリースされています。 ですので、Windowsの方もここではMAMPをインストールして開発を始めましょう。 MAMPのインストール MAMP(マンプ) https://www.mamp.info/en/ 例えば、普通は次の通りいくつものプログラムを環境に入れる必要があります。 Apache（Webサーバ） MySQL（SQLデータベース） Webプログラミング言語（PHP、Rubyなど） XAMPPやMAMPはこれらの環境が簡単に設定できます。 MAMP & MAMP PRO こちらからプログラムをダウンロードして、インストールを進めます。 案内にしたがってインストールをします。 途中でPRO版のMAMP PROもインストールされますので、この画面で[カスタマイズ]をクリックし、[MAMP PRO]のチェックを外しましょう。 インストールには1.4GBほどの空き容量が必要です。 インストール完了後、MAMPアプリケーションを起動してください。そうするとサーバの起動画面ができてきますので 右の[Start Servers]をクリックしてサーバを起動しましょう。[Apache Server]と[MySQL Server]の横のランプが緑に点灯すれば正常に起動しています。 なお環境によっては、起動した後にファイアウォールの警告画面が出てくる事があります。 これは通信を[許可]するようにしましょう。 そしてブラウザでMAMPのスタートページが表示されます。 表示されない場合は、次のURLを開きましょう。 http://localhost:8888/MAMP/ ポートの8888がMAMPのApacheに割り当てられています。 正常に[Apache Server]が起動していない場合には、上のメニューの[Preferences]をクリックして [Ports]タブを開きます。ここでApacheのポートを8888から利用指定なさそうなポートに変更しましょう。 例:8890など そして再び、[Start Servers]をクリックしてサーバを起動してみてください。 [...]

やっぱりWordPressだった。WordPress有用性を再認識する！

こんにちは、のすけです。 長らく書いていませんでした。 その間色々ありましたが、とりあえず題名について触れます。 はりうすでは、今までNodeやRuby on RailsとかでWebアプリを書いていたのですが、、、 社員が僕１人となった今では、１からコードを書いて作るスクラッチ開発はキツいため なかなか受注が難しいです。(及び腰になる) そこで、全世界の30%！！のWebページで利用されているWordpressに 鞍替えしようかと思います。 今まで、Wordpressとかクソでしょ！ とか斜に構えて、ある種のプライドを持っていましたが。 そんなプライドなんて捨てて、実際に利用してみると良かったです。 実運用上では記事の更新やレイアウト変更をしたい際に コーダーではない人がやる場面が多く、スクラッチ開発だと変更が遅くなる。 コーダーに作業が集中してしかも待ちが発生するなどの事案が多く。 Wordpressは使えるなぁと再認識しました。 そこで　Wordpressを活用させて頂くことに決めました。 Wordpressの利点 みんな使ってるので使い方に慣れてる(記事書く人とか) 管理画面がわかりやすい 基本機能は最初からある(ページ作る・記事書く、動画載せる) 機能追加もプラグインでだいたいできる(EC機能すらも) 誰でも触れる デザイナーでも画面レイアウトを直接を編集できる(コーダー不要) プラグインとかで解決できない時にコーダーの出番！ という感じで、いいこと尽くめです。 不満点はシステムがちょっと遅い！！！ セキュリティが心配(みんな使ってるからハッカーに狙われやすい) という感じです。 Wixはかゆい処に手が届かない 一時期プログラミングから距離を置いていた時 WixというWeb上でデザインとかも自由に設定できて ホームページも簡単に作れると謳うWebサービスを利用していて 半年ほど運用していたのですが ちょっと私には厳しかったです。 「こんな機能欲しいなぁ」とか「ここをちょっとこうしたい」という かゆい処には全く手が届かないです。（コードを修正できないのでどうしようもない） Javascriptも使えないですので、かなりの縛りプレイです。 半年利用して、限界を感じてしまいました Wixもこのことは認識していて、Wix Codeという新機能のリリースもあるようですが ベータ版をちょっと触ってた感じでは、戻りたいとは思いませんでした。 Wordpressの自由度と比べるとWordpressに軍配が上がりました。 かゆい処に手がとどく Wordpress 機能はプラグインで追加できる、デザイン修正したいときはCSSやJSを触れる。 ちょっとした機能追加もPHPを書けば作れる！ システム関連連携もPHP書けばできる！(色々と作業を自動化できる！) 例えば、会員機能をつけたのですが、Wordpress内に会員のアクセス機能を管理しながら [...]

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.