Web Design Articles

  • 1837

ティラノスクリプトに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 = [...]

  • 1922

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を指定する入力端子が４つ増痩せば良いということですね。 [...]

  • 1924

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に繋ぎましょう。 [...]

  • 1923

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

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

WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインする

こんにちは、のすけです。はい。今まで様々な投稿関係のテクニカルなことを紹介してきましたが、今回は一番わかりやすいデザインを触っていきたいと思います。デザインはCSSを弄って色々とやっていくわけですが、如何せん設定項目が多く、CSSも膨大な数を書かなくてはいけないためとても大変です。 そこで巷ではCSSフレームワークというものが用意されています。有名な例では「Bootstrap」「Foundation」などがあります。今回は「Bootstrap」を導入する例を紹介したいと思います。なお、バージョンは最新のBootstrap4を扱います。 Bootstrap4はいわゆるよく利用されているBootstrap3の後継バージョンで、ついにフラットデザインになったものです。 利用されすぎて「Bootstrap臭さ」と呼ばれるものがあったBootstrap3ですが、４になっていくらか軽減されていると思います。 Bootstrapを読み込む ヘッダーを作る ナビゲーションメニューをつける li要素とaタグにクラスを付けるためにfunctions.phpに追記 まとめ Bootstrapを読み込む 今回はheader.phpに書き込む手法でいきたいと思います。また読み込み方法もCDNからデフォルトのBootstrapを読み込むもっとも簡単な方法を選びました。CSS <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> JS <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> そのほか、独自のCSSの読み込み方法を利用して、functions.phpで読み込む方法は、こちらの記事で紹介しています。hollywis.hatenablog.comテーマフォルダ内にCSSやJSを置く方法もありますが、ルートフォルダ直下にassetsフォルダを作ってそこに配置していきます。 ヘッダーを作る header.phpを編集していきます。 オリジナルで作った最小テーマである「anothersky」の分割バージョンを使っていきます。hollywis.hatenablog.comhollywis.hatenablog.com 元のheader.php <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> [...]

カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させる

こんにちは、のすけです。「WordPressって言うてもブログでしょ。」いや、違います！！カスタムフィールドがあります！！ということで今回は、あなたのWordPressを単なるブログからシステムに進化させる方法をこっそり教えたいと思います。 本文じゃ色々と足りない カスタムフィールドとは 頼れる相棒「Advanced Custom Fields」さん 使ってみる フィールドを入力 ルールを登録 位置を追加 カスタムフィールドを表示させるテンプレートを作る コンテンツをフィールドごとに適切に表示 まとめ 本文じゃ色々と足りない WordPressにある「投稿」では次のような項目があると思います。 タイトル 本文 カテゴリ タグ でもこれだけだと正直、記事の投稿くらいにしか使えません。もっと、例えば音楽アーティストのページだったら イベント情報を出したくて 「ライブハウスの名前」 「住所」 「時間」 「曲目」 なんて情報の入力項目が欲しいかもしれません。もっと、例えば、不動産会社のページなら 「部屋の名前」 「所在地」 「最寄駅」 「築年月」 「間取り」 「価格」 なんて情報の入力項目が欲しいかもしれません。でも、通常のままだと全部「本文」に入れるしかありません。もっと項目を増やせたらいいのに。。。=> 増やせます。カスタムフィールドで！しかも、住所に情報を入れたら自動的にGoogleMapで表示させるとか、いちいちテーブルタグを書かないで表を作るなども自由自在です。 カスタムフィールドとは 実はWordPress標準の機能に「カスタムフィールド」と言う設定欄があります。投稿や固定ページの新規作成画面で、表示オプションのカスタムフィールドにチェックを入れると利用できるようになります。投稿や固定ページの編集画面で上の方の「表示オプション」を開くとカスタムフィールドを出せるカスタムフィールドの情報には「名前」と「値」の組み合わせがあり、自由な情報を登録できます！！ 例えば「住所」の情報を増やしたければ、「名前」に"住所"と入れて、「値」に実際の住所情報を入れます。 すると、データベースのwp_postmetaテーブルに「meta_key：名前、meta_value：値」としてデータが保存されます。このカスタムフィールドのデータを利用することで、記事情報から取得したいデータだけを取得して任意の処理ができるようになります。 まるで業務システムのように。ただし、実はこのカスタムフィールド標準だと、いちいち投稿や固定ページを投稿するたびに項目を追加しなくてはならないため システムがわからない人が投稿時に使うには現実的ではありません。そこで次の便利なプラグインを使います。 頼れる相棒「Advanced Custom Fields」さん 標準のままだと、いちいち項目を追加の必要がありましたが、この「Advanced Custom Fields」を利用するともう全て解決です。最初から必要な項目は全てセッティングできます。また、テキストデータだけでなく、画像やファイルをアップロードする項目すら作れます。もう便利すぎます。 実際に使ってみましょう 使ってみる では実際にサンプルとして、オンライン教育サイトの講座のページを作ってみたいと思います。管理画面の「プラグイン」ー「新規追加」から「Advanced Custom [...]

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.