Web Design Articles

1812

QNAPのWEBサーバーにSSL証明書を設定する方法

ゆえ合って、SSL証明書が必要になりました。QNAPで動いているQTS(QNAPの独自OS)はLinuxの独自拡張OSのようで SSHログインしてLinuxのように操作できます。以下、設定方法です。 SSHサービスを起動まずは「ネットワークサービスファイルシステム」から「SSH」をONにしてSSHターミナルからSSHでログインします。 apacheのSSL証明書の設定を実施設定ファイルはここにあります more /etc/config/apache/extra/apache-ssl.conf記述中のこのあたりの部分を変更していく感じです。 SSLCertificateFile "/etc/stunnel/stunnel.pem" #SSLCertificateKeyFile "/etc/config/apache/server.key" #SSLCertificateChainFile "/etc/config/apache/server-ca.crt" #SSLCACertificatePath "/etc/config/apache/ssl.crt" #SSLCACertificateFile "/etc/config/apache/ssl.crt/ca-bundle.crt" #SSLCARevocationPath "/etc/config/apache/ssl.crl" #SSLCARevocationFile "/etc/config/apache/ssl.crl/ca-bundle.crl"必要なファイルを /etc/config/apache/　以下に設置します必要なファイルは以下の３つです。 ALPAH SSLとか安くてオススメです。（Let's Encriptでもいいけど3か月ごとに更新するのがちょっとリスキー） Webサーバ証明書ファイル SSLCertificateFile /etc/config/apache/web.crt 秘密鍵ファイル SSLCertificateKeyFile /etc/config/apache/server.key 中間CA証明書ファイル [...]

1858

babylon.jsで3D表現の初めの一歩

こんにちはどうしても3Dでゲームっぽい物をWeb上で作りたくて、ここ数ヶ月Three.jsを勉強していたのですが、、どうやらゲームを作るにはbabylon.jsの方が良さそうです。なぜ、Three.jsではダメなのか？それは純粋な3D表現ツールだからです。キャラクターが簡単には歩いたりはしない地面もただの平面オブジェクト重力は自前でプログラミングなどなど。何ていうか・・・・全て自作が前提なのです。Unityであるように、重力を付与するモジュールとか無いです。誰かが作ってるかもしれないけれど、公式では無いです。これがとても辛いです。(あったら御免なさい。教えていただきたいです) ぽぽん！とゲーム作りたい！じゃあUnityやりなさいよ！！という話なのですが、どうやらWeb上では動作が遅いらしく家庭用ゲーム機とかPCやスマホにインストールする形式じゃ無いと辛いらしいです（未検証）あとは、JSで動かしたいんだ！！既存のWebサービスにシームレスに組み込みたいんだ！という話です。そこで検討したのが、babylon.js(バビロンジェイエス)名前が、人類の愚かさの象徴であるバベルの塔を作り出したバビロンということで、全然いけてないのがとても気になるのですが。。。バベルの塔果たして、これは目的の物なのか、、頑張って検証していきます。 www.babylonjs.com 執筆時点の最新版は4.1です。Microsoftのエンジニアが作った物らしく、フリーで使えますし、定期的にアップデートもされており、良さげです。Microsoftと言えばマインクラフト！！きっとマインクラフトみたいな物も、簡単に作れるんじゃないかと予想していますw ただ、babylon.jsにも、一つも問題が。。。。それは、、、 babylonには日本語のドキュメントが一切ない！！　書籍もない！！ということです。Three.jsには素晴らしい書籍がありました。初めてのThree.js 第2版 [...]

1860

私はサル以下なのか、、、と思ったあなたに。RPGに例えたGitの概念

ヒトにはもっと良い例えがあるはず！そんなわけで、サルには理解できないRPGで、誤解を恐れずに例えてみた。いつも教えるときに例えて説明しているので、自分で整理するためにメモ。概念だけなので正確には、こっちのGithubが出してるチートシートを確認してね。 https://github.github.com/training-kit/downloads/ja/github-git-cheat-sheet.pdf git init メモリーカードの初期化全てはここから始まる。たまにPhpStormなど便利なIDEは勝手にやってる場合がある git clone 友達のセーブデータをメモリーカードにダウンロード。cloneから始める場合はinit不要。 git add セーブするものを選ぶ (RPGの中の状況のうち、セーブするものを選べる。お金だけとか、経験値だけとか、このキャラだけとか) git commit addした状態をメモリーカードへのセーブ git checkout [...]

1861

Nuxt.js × Cordvaでスマホアプリを作ろうとしたメモ

Nuxt.jsでcordovaを利用してiOS,Andoroidアプリが作れたらいいなという意欲的な事をふと思ったのでやってみたメモです。 Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法【ホームページを簡単アプリ化】 – こまめこの設定をやってCordova公式のGet Startedを実行https://cordova.apache.org/ cordova platform add browserをやって実行するとブラウザで開けます。意味ないやん。Webブラウザで開いても。。なので、andoroidプラットフォームを追加します。ちなみに、npm generateしてdistフォルダにソースが履かれたらwindowsの場合は robocopy dist/ cordova/www/を実行するとcordovaフォルダにソースをコピーできます。 Androidプラットフォーム実行 andoroidプラットフームを追加します cordova [...]

7セグメントLEDx4を使ってみる | 中華で始める Arduino入門日記15

こんにちは、のすけです。中華で始める Arduino入門日記の15回目になります。この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。入手の話はこちらから。 hollywis.hatenablog.com 今回のお題今回は、７セグメントLEDを４つ付けたやつを利用してみたいと思います。チュートリアルのchapter13に対応しています。早速始めましょう。 7セグx4 こやつです。数字部分が４つに増えました。裏にピンが12個あります。数字部分が４つなので、７セグの10ピン*4で40ピンとかでは無いようです。安心しました。１個との違い中華キットに入っていたのが5461ASでしたので、データシートを探してみました。データシート(5461AS)より１個の数字の入力は基本的に同じようです。ただしDIG1~4まであるので、あとはその表示をDIG1~4のどこを対象にするのかを指定するだけです。つまり、DIGを指定する入力端子が４つ増痩せば良いということですね。 PINが全部で12あり、左下から反時計回りにPIN1~12となるようです。 pin12,9,8,6はDIG指定用で、11,7,4,2,1,10,5,3はLEDのa~gの表示に対応している模様まずは、a~g部分(11,7,4,2,1,10,5,3ピン)を指す前回とほぼ一緒なので、いきなり刺します。こんな感じでしょうか。プログラム的にはこんな感じになります。 int a=1; //LED 11pin int b=2; //LED 7pin int c=3; //LED 4pin int d=4; //LED 2pin int e=5; //LED 1pin int f=6; //LED 10pin [...]

7セグメントLEDを使ってみる | 中華で始める Arduino入門日記14

こんにちは、のすけです。中華で始める Arduino入門日記の14回目になります。この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。入手の話はこちらから。 hollywis.hatenablog.com 今回のお題前回は温度センサーを使いました。 hollywis.hatenablog.com 今回は、７セグメントLEDを利用してみたいと思います。チュートリアルのchapter12に対応しています。早速始めましょう。 7セグメントLED こいつです。みてわかる通り数字を表示することができそうです。サクッと表示させちゃいましょう。回路７か所すべての足とデジタルピンをつないで、HIGH,LOWを切り替えればいける感じっぽい。電圧は下の真ん中の端子にGNDを220Ωの抵抗付きで接続します。絵では3.3Vにつないでいるように見えますが、実際にはGNDに繋ぎましょう。 by SainSmartチュートリアルコードがヒドいことになってます。プログラム例によってサンプルプログラムを使うと、まともに数字にならないので自作します。わかりやすくA~GとDPを表示する変数を作って、それを利用する数字関数を作ります。数時関数の中では、一度LEDの表示をすべてリセットするall_lowを呼び出すシンプルな構造にしました。 loop内では数字を呼び出します。サンプルにはない９と０も追加してあります。 int a=7; int b=6; int c=5; int d=11; int e=10; int f=8; int g=9; int dp=4; // すべて消す void all_low(void) { unsigned [...]

Arduinoでモールス信号練習機を作った話 | さいぞうのArduino初心者日記5

こんばんは。さいぞうです。 Arduino入門連載の5回目だ。前回はArduinoでLEDを点滅させるという初歩の初歩でふざけてLチカモンスターを作って楽しかった。　 hollywis.hatenablog.com 今回やることは、実は前回とほとんどからない。参考にしているチュートリアルのタイトルは、　前回はChapter 2 Blink LED 　今回はChapter3 LED Blink 何が違うのか全然わからない。　　なので、チュートリアルは無視して、今ある知識だけで作れる応用として、さっき思いついたモールス信号練習機を作ろうと思う。 […]

温度センサーを使ってみる | 中華で始める Arduino入門日記13

こんにちは、のすけです。中華で始める Arduino入門日記の13回目になります。この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。入手の話はこちらから。 hollywis.hatenablog.com 今回のお題前回は光センサーで明るさを検知してみました。 hollywis.hatenablog.com 今回は、温度センサーを利用して部屋の温度を測ってみたいと思います。チュートリアルのchapter10に対応しています。早速始めましょう。温度センサーを知る LM35DZという温度センサーが入っていました。データシートによると次のような特徴があるようです。摂氏 ( ℃ ) 温度に直接較正されている温度係数はリニアで＋ 10.0mV/℃ ＋ 25℃において 0.5℃の精度を保証－ 55℃～＋ 150 ℃の温度範囲リモート・アプリケーションに最適ウェハ・レベル・トリミングによる低コスト化 4 ～ 30V の動作電源電圧範囲 60 μA 以下の電流ドレイン低自己発熱、静止空気で 0.08℃ ± 1/4℃以下の非直線性 ( 代表値 ) 低出力インピーダンス、1mA 負荷で0.1 Ω と、実はそれなりに良さげなセンサーのようです。中華キット侮れん。。。 [...]

明るさセンサーを使ってみる | 中華で始める Arduino入門日記12

こんにちは、のすけです。中華で始める Arduino入門日記の12回目になります。この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。入手の話はこちらから。 hollywis.hatenablog.com 今回のお題前回はポテンションメーターという可変抵抗器でグリグリしました。 hollywis.hatenablog.com 今回は、Photoresistor(明るさセンサー)を利用して傾きを検出してみたいと思います。チュートリアルのchapter10に対応しています。早速始めましょう。 Photoresistor(明るさセンサー)を知るこいつです。中華キットに抜かりなく入っていました。ちょっとここでWikipedia先生の引用を紹介フォトレジスタ (photoresistor) とは、入射する光の強度が増加すると電気抵抗が低下する電子部品である。光依存性抵抗 (light-dependent resistor, LDR) や光導電体 (photoconductor) 、フォトセル(photocell)とも呼ばれる。フォトレジスタは、高抵抗の半導体でできている。充分に周波数の高い光が素子に入ると、半導体に吸収された光子のエネルギーにより束縛電子が伝導帯に飛び込む。結果として生じる自由電子（と対になるホール）によって電流が流れ、電気抵抗が低くなる。 by Wikipedia 光の強さによって、抵抗が低くなるようです。また、キットに入っているのは硫化カドミウム (CdS) セルというものらしく、セルに光が当たると抵抗値が低くなります。なお、明るい時は約600Ω、暗い時に1～2MΩになる模様。回路を作成利用する部品はこちら Photoresistor : 1 LED : 1 1kΩ 抵抗 : 1 220Ω 抵抗 [...]

ぼろアパートのオフィスに営業マンが来た話

こんにちは、のすけです。以前は大手システム会社(SIer:社員1万人以上)でサラリーマンをしていたのですが、ずっと自分でサービスを作りたいという想いがあり、会社を辞めました。そして、数ヶ月後に２つ目のサービスをリリースした時のことです。(1個目は空中分解しました；) 実質、もう動いていませんがそのサービスがこちら HOTCOO | ホックー！プレスリリースを出すリリースに際して、みんなに知ってもらわなきゃだめだよねってことで、何もわからなかった僕らはお手軽に周知してももらえるプレスリリースというものを行うことにしました。プレスリリースとは、一般の企業もよくやっているもので世間に自社の新しい取り組みやプロダクトなどを発表するものになります。基本的にはプレスリリースの内容を記載したページを１ページ作成して、有名どころのメディアやネットメディアなどに FAXやリリースメールなどを送信すればOKです。そして、その記事を見た会社などから問い合わせなどを受けて事業連携が進んだり、その記事を見たユーザが使ってくれたり、その記事を見たブロガーがさらに記事を書いたりなど、いいことだらけらしいです。今はプレスリリースには便利なサービスがいっぱいあって、僕らは ValuePress! [プレスリリース配信・PR情報サイト] を利用しました。ここは、流したい内容を書けば数百件から数千件のメディアに対してメールを送信してくれます。より多くのお金を払えば、電話連絡もしてくれるようです。書き方の指導とかもあり、初心者にも優しいサービスでした。僕たちは、色々と悩みながらもなんとかプレスリリースを作成し、メールだけのプランでやりましたが、数個のネットメディアで取り上げてくれました。そして、僕らは良い問い合わせが来るのを待ったわけです。営業電話が来るプレスリリースを出した反響はすぐに出ました。そう、営業電話が来るのです。事業提携とか、ユーザからの問い合わせとかそんなのは来ません。一番多かったのは広告会社です。〇〇という会社なのですが、うちの広告枠で広告を出しませんか？〇〇という新聞社なのですが、うちの広告枠で広告を出しませんか？〇〇という広告配信業者なのですが、１クリック○円で広告を出しませんか？出しません。弱小スタートアップはりうすに、そんなお金はないし。マーケティング戦略なんて、まるで考えていなかった僕らは「ほへ〜」って感じでした。もう電話に出るのが面倒です。営業マンからメールが来る「〇〇という雑誌のものなのですが、すごいCEOとして紹介しませんか？」ある日、そんなメールが来ました。CEOちゃCEOですけどどう考えても僕は凄くありません。会社辞めて数ヶ月でしたし、サービスもリリースしたばっかりでユーザも碌についていない。でも勉強のために話を聞いて見ることにしました。しかもどうやら、僕らのオフィスに来るというのです。ちなみに僕らのオフィスは当時、神奈川のマイナー駅から徒歩２０分のぼろアパートでした。 hollywis.hatenablog.com 接待用のソファもないし、会議室もありません。しかも玄関のドアには会社名も書いていませんでしたので、急遽プリンターで素早くロゴを作成しテープでドアに貼り付けることにしました。果たしてどうなるのか、ワクワクが止まりません。営業マン現る営業マンから連絡がきます。 [...]

VIEW RECENT WORK

ティラノスクリプトにfirebaseを連携させて自在に操る

前回、シナリオゲームが手軽に作れるティラノスクリプトに強引にVue.jsを入れることをやりましたが。次は、、、Firebaseを入れたい！！やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。そしてFirebaseのFirestoreならとても扱いやすい。もし、Firebaseとティラノスクリプトが掛け算できるならどんなものでも作れそうですよね。それではいきましょう！！ Firebaseを初期化する呼び出す！まとめ Firebaseを初期化する例によって強引にindex.htmlにscriptタグを埋め込みます。 firestoreとauthを使いたかったのでそれも入れています。 first.ksなどで初期化します。 ;Firebase [iscript] console.log("Init firebase"); // Initialize Cloud Firestore through Firebase firebase.initializeApp({ apiKey: 'xxxxx', authDomain: 'yyyyy.firebaseapp.com', projectId: 'zzzzzzz' }); f.db = firebase.firestore(); f.auth = firebase.auth(); [endscript] 初期設定をしてティラノスクリプトのゲーム変数(f)にdbとauthを登録しておきます。呼び出す！こんな感じで、例えばscene1.ksのiscriptタグの中でfirebase authenticationのユーザログイン情報を取得したり。 ;Firebase [iscript] f.auth.onAuthStateChanged(user => { if (user) { f.displayName [...]

ティラノスクリプトに強引にVueを入れてみる

こんにちは、ノベルゲームをHTML5を用いて気軽に作成できるティラノスクリプトをご存知でしょうか？tyrano.jp 最近、ノベルゲーム的な表現がしたくて触っているのですが。使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい！という思いが強くなって来たので、強引にVueを入れてみました。強引にVueを入れる方法結果 Vueを操ってみるまとめ強引にVueを入れる方法やり方はとてもシンプルです。 index.htmlにVueのタグを入れるだけです cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしておりVue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。そして、bodyタグの下の方でvue用のdivを定義して。あとはcssでposition:absoluteとかでレイヤー化しておきます。次に、Vueをインスタンス化する必要がありますが。やり方としては、ティラノスクリプトはJSを実行できる[iscript]タグを利用します。例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに次のように書きます結果こんな感じで、Hello Vue!!が出てくる Vueを操ってみる Vueを操るには[iscript]タグを利用していきます。先ほどの部分を少し改変します。first.ksでnew Vueしたインスタンスをティラノスクリプトのゲーム変数に格納します ;Vue読み込み [iscript] var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) // システム変数にVueを追加 f.vue = app; [endscript] そうすると、例えばscene1.ksなどでvueインスタンスを呼び出すことができるのでこんな感じでmessage変数にアクセスできるはず！ [iscript] f.vue.message = "こんにちは"; [endscript]・・・・・・・・・変わった！！まとめ [...]

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.

LET’S TALK