Web Design Articles

  • 1809

Unity EventSystemとは

Unity EventSystemとは 入力、レイキャスト、イベント送信を処理する機能 EventSystem シーン内にEventSystemは1つだけ含めること 他のモジュールと連動して動作する 状態を保持する 処理内容 EventSystemが開始されると、同じGameObjectに接続されている BaseInputModuleを検索し、それらを内部リストに追加します。更新時に、接続されている各モジュールはUpdateModules呼び出しを受け取り、モジュールは内部状態を変更できます。各モジュールが更新された後、アクティブなモジュールでプロセス呼び出しが実行されます。ここで、カスタムモジュール処理を実行できます。 利用方法 using UnityEngine.EventSystems;とライブラリを呼び出す //現在のイベントシステムを取得 EventSystem es = EventSystem.current;//現在のインプットモジュールを取得 EventSystem es = EventSystem.current; BaseInputModule bim = ev.currentInputModule;// 選択中のGameObject EventSystem es = EventSystem.current; GameObject obj = es.currentSelectedGameObject;//初期状態にで選択したいオブジェクトを設定 [...]

  • 1839

技術ポートフォリオ

なんとなく自分の技術ポートフォリオをまとめてみました重点科目はJS系、その他の言語は重点項目ではないので一旦排除しています。 Lv15までは守 Lv100までは破 Lv100以上は離の領域 総合力: Lv50 (システム開発歴10年ほど) Javascript：Lv35 Nuxt.js : Lv10 Vue.js：Lv15 Firebase総合力：Lv5 Firebase FireStore：Lv15 Firebase Authentication：Lv10 Firebase Storage：Lv5 Firebase [...]

  • 1840

nuxt.js のSSRデバッグ方法　by Jetbrain

こちらの記事が参考になりました。 ありがとうございます。k-sasaki.net asyncDataのデバッグを諦めてconsole.logで頑張っていたところこれで、デバッグできるようになりました！こんな感じで、ブレークポイントを入れたい場所に「debugger;」と書けばchromeのDevツールでブレークされます。Jetbrain最高です。

  • 1842

babylon.js ステップ15 環境設定

ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう！！ 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボックス用の画像を自分で生成する方法 Fog霧 まとめ 背景色の変更 シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます scene.clearColor - 背景を変更する関数 scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);Color3型をnewして色を設定できます [...]

個別投稿ページで利用できるテンプレートタグまとめ

日付系タグ echoを使ったやり方 カテゴリーの表示タグ タグの表示 著者の表示 前後の記事へのリンクを表示する ページ分割した記事を表示する 日付系タグ the_date() ：公開日時を表示。一覧の場合は最初の１記事しか表示されない。 the_modified_date()：更新日時を表示 the_time()：一覧表示で日付を表示する場合はこちらを利用 <?php the_time('Y/m/d'); ?>や <?php the_time('Y年m月d日'); ?>のように日付タグは()中にフォーマットを指定することができます。 echoを使ったやり方 <?php echo get_the_date(); ?> このようにechoを使ってgetメソッドで取得した値を表示させる方法もあります。 利点としては、the_date() と違い何度も利用できます。 カテゴリーの表示タグ the_category()：カテゴリーの表示 利用例：<?php the_category(); ?> 初期表示ではリストになります。(「ねこ」と「いぬ」カテゴリに属している例) <ul class="post-categories"> <li><a href="http://localhost:8888/localtest/?cat=2" rel="category">ねこ</a></li> <li><a href="http://localhost:8888/localtest/?cat=1" rel="category">いぬ</a></li> </ul> <?php the_category(', '); ?> このように()内に複数のカテゴリに属していた場合の区切り文字を指定できます。 また、get_the_category()を使うことで次の情報を取得できます term_id：カテゴリーID name：カテゴリー名 slug：カテゴリースラッグ [...]

WordPressテーマの投稿ページのテンプレートを作成する

こんにちは、前回は固定ページのテンプレートを作成しました。 hollywis.hatenablog.com 今回、第11回目は投稿ページのテンプレートを作成していきます。 投稿ページのテーマの作成方法 投稿ページのデザインの使い分ける方法 カスタム投稿タイプを作る カスタム投稿タイプ用のテンプレートを作成する 投稿ページのテーマの作成方法 投稿ページはWordPressで定期的な記事の投稿時に利用する機能です。ブログ機能とも言えますが、投稿タイプを増やすことで様々な投稿に対応しています。 今回はこの投稿ページのテンプレートの作成方法をご紹介します。 投稿ページのテンプレートを作成することで、その他のページと独立して自由にデザインを設定することができます。 テンプレートファイル名は予め決まっており「single.php」になります。 もしテーマの中にsingle.phpがある場合、投稿ページを表示する際の挙動が、index.phpよりもsingle.phpの方が表示優先度が高くなります。 この仕組みを利用して、投稿ページのテンプレートを作ります。 それでは実際に書いて見ましょう。 「single.php」というファイル名でテーマ直下に新規作成し、次のようにコードを記載します。 single.php <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>：single.phpによる投稿ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> 固定ページとほぼ一緒です。 実は、その他にヘッダーやフッター、サイドバー、などの表示も一緒です。 詳しくはこちらを参照ください。 hollywis.hatenablog.com 投稿ページのデザインの使い分ける方法 このままでは表示が味気無いので、CSSを触ってデザインを強化したいと思います。 しかし、例えば別の投稿タイプの時にデザインを変えたい場合はどうすればいいのでしょうか。 (例：ブログ、プレスリリースなど) そこで、WordPressでは固定ページと同様に投稿ページ毎にデザインを変える方法が２つ用意されています。 ページ毎に違うidやclassを自動的に埋め込む 投稿タイプ毎にページテンプレートを作る 投稿ページのテンプレート階層は次の通りです。 このように、投稿タイプ(post_type)毎にテンプレートを作ることができます。 それでは試しに、作成しましょう。 [...]

WordPressテーマの固定ページのテンプレートを作成する

こんにちは、今回はWordPressのテーマの固定ページを作成またはカスタマイズする方法を紹介します。 前回はコンテンツん出し方でWordPressループについて触れました。 今回は第９回目、前回の実践編という位置付けです。 hollywis.hatenablog.com 固定ページのテーマの作成方法 共通のヘッダーやフッターを付ける 共通のサイドバーを付ける 固定ページのデザインの使い分け 固定ページ用のページ毎に違うidやclassを自動的に埋め込む 固定ページテンプレートを複数作る 固定ページのテーマの作成方法 固定ページはWordPressで定期的な記事の投稿ではなく、トップページや会社概要などの静的情報を表示したい時に利用する機能です。 この固定ページのテーマの作成方法をご紹介します。 まず、固定ページのテンプレートファイルを作成することで実現します。 ファイル名は予め決まっており「page.php」になります。 もしテーマの中にpage.phpがある場合、固定ページを表示する際の挙動が、index.phpよりもpage.phpの方が表示優先度が高くなります。 この仕組みを利用して、固定ページのテンプレートを作ります。 それでは実際に書いて見ましょう。 page.php <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>：page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> このようにWordPressループを利用して書くだけですね。 page.phpであることが判別できるようにh1タグの中に「：page.phpによる固定ページ」という文を入れています。 index.phpに固定ページの際の挙動を書く際には、次のようにif文で条件分岐させていましたが <?php elseif(is_page()) : ?><!-- 固定ページの時 --> <?php endif; ?> [...]

WordPressループってなんぞや？コンテンツ表示に欠かせないお話

こんにちは、のすけです。 大学で非常勤講師などをやらせていただいているのですが その繋がりで大学時代の教授との縁が復活するなど、 世間は狭いなと思う今日この頃です。 本日はWordPressカスタマイズの第８団「WordPressループってなんぞや？」です。 WordPressループとは？ どこでWordPressループは使われているの？ なぜループが必要なの？ WordPressループを使ってwp_queryからデータを取り出す方法 the_post()とは 追加WP_QUERYについて ちなみに、前回はWordPressで利用すつタグを紹介しました。 これだけは覚えよう！WordPressテンプレートタグ！ - hollywis's diary (はりうすブログ) WordPressループとは？ 僕自身はRuby on RailsやNode.jsでプログラムを書くことが多いのですが そんな、Web畑出身の人が何これ？と思うのがWordPressループではないでしょうか。 何かと言いますと、端的に言うと、コンテンツを表示する時にwhile文を書いて、その中で記事情報を取得し表示までする仕組みのようです。 ちょっと良くわからないですよね。 普通にコンテンツを取ってきて表示すればいいじゃ。。。と思ってしまう。なぜわざわざループさせているのか。 しかもwhileの無限ループを使うなんてバグが出そうな怖い技を使って。。。 そんなにwhile文なんて使いませんからね。組み込み系のプログラム(Arduinoとか)じゃあるまいし。と思ってしまいます。 どこでWordPressループは使われているの？ まず、利用例を紹介します。 以前、書いたindex.phpとstyle.cssだけで作る最小のテーマを例にします。 hollywis.hatenablog.com 詳しくは↑を見てください。 この中で、index.phpにメインページの時、投稿ページの時、固定ページの時のコンテンツの出しわけを行っている部分があります。 <?php if(is_home()) : ?><!--メインページの時 --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); [...]

これだけは覚えよう！WordPressテンプレートタグ！

こんにちは 前回は、Wprdpressテーマを一般的なheader.php、sidebar.php、footer.php、index.phpに分割して構造化しました。 hollywis.hatenablog.com この中でphpファイルの記述中にいくつかテンプレートタグを利用してきましたので、そのテンプレートタグを深堀していきたいと思います。 なお、最小のテンプレートを作る際に利用したコードが次のような感じでした。 ファイル：index.php <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> <?php wp_head(); ?><!--headの追加コード --> </head> <body> <header class="site-header"> <h1><?php bloginfo('name'); ?></h1> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> [...]

自作WordPressのテーマモジュールを分割する

こんにちは 前回はWordpressテーマの構造を理解するために最小のテーマを作りました。 このテーマはページをすべてindex.phpに詰め込んでわずか３ファイルで作られています。 hollywis.hatenablog.com 今回は、このindex.phpを機能毎に分割してより構造的なテンプレートに変えたいと思います。 前回のindex.phpはこちら <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> <?php wp_head(); ?><!--headの追加コード --> </head> <body> <header class="site-header"> <h1><?php bloginfo('name'); ?></h1> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> [...]

【Unity道場4】マウスクリックを検出せよ

問題：マウスクリックを検出せよ ゲームオブジェクトのマウスクリックを検出してログを出力してください。 回答例 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class PrefabDestroyer : MonoBehaviour, IPointerClickHandler { // Start is called before the first frame update void Start() { } // Update is called once per frame void Update() { } public void OnPointerClick(PointerEventData pointerData) { Debug.Log(gameObject.name + " [...]

【Unity道場3】ゲームオブジェクトを動的に生成せよ

こんにちはUnityの書籍を何も考えずに言われるままにゲームを作っても全く！！！覚えておらず 一向に手放しでゲームを作れるようになれる気がしないため始まったUnity道場の3回目です。 問題1：ゲームオブジェクト動的に生成せよ 回答例 解説 実行結果 問題2：動的生成したゲームオブジェクト削除せよ 回答例 解説 実行結果 問題1：ゲームオブジェクト動的に生成せよ ゲームオブジェクト動的に生成するプログラムを書け。動的生成するプレハブはInspectorビューから指定できるようにすること。また出現位置をランダム化すること。 回答例 using System.Collections; using System.Collections.Generic; using UnityEngine; public class PrefabCreater : MonoBehaviour { public GameObject prefab; void Start() { this.CreatePrefab(); } void Update() { } void CreatePrefab() { float x = Random.Range(-5.0f, 5.0f); float y = Random.Range(0.0f, 5.0f); [...]

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.