投稿日：2019-08-20T18:59:36+09:00

Angularでの同一ページ内アンカー設定方法

とても簡単な話だが、普通の方法だと（以下）動かない。

<a href="#abc">ジャンプ元</a>

<span id="abc">ジャンプ先</span>

というかhttps://ドメイン名/#abc へジャンプしてしまう。

ActivateRouterを使う方法があるようだがメンドクサイ～～～～

で、一番簡単な方法。ngx-page-scrollモジュールをインストールしてしまう。

npm install ngx-page-scroll --save

そしたらいつものようにapp.module.tsに追記。

import { NgxPageScrollModule } from 'ngx-page-scroll';

@NgModule({
    imports: [
        /* Other imports here */
        NgxPageScrollModule
        ]
})

これだけ。
実際に使用するページのコンポネントの方、***-component.tsのほうはまったく触る必要なし。

そしてHTMLのほうを・・・

<a pageScroll href="#abc">ジャンプ元</a>

<span id="abc">ジャンプ先</span>

このようにジャンプ元のほうにpageScrollの単語一つ入れるだけ。

ああ…簡単で良かった

※ スクロールスピードなど細かい調整をしたい場合はngx-page-scroll-coreをインストールする必要があります。

当方環境Angular7

package.json

//package.json
{
  "name": "benzoinfojapan",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/cdk": "^7.3.4",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/fire": "^5.1.3",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.3.4",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/pwa": "^0.13.5",
    "@angular/router": "~7.1.0",
    "@angular/service-worker": "~7.1.0",
    "core-js": "^2.5.4",
    "firebase": "^5.11.1",
    "firebase-admin": "^7.3.0",
    "firebase-functions": "^2.3.1",
    "firebaseui": "^3.6.1",
    "firebaseui-angular": "^3.4.1",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^7.3.0",
    "ngx-page-scroll": "^6.0.2",
    "ngx-page-scroll-core": "^6.0.2",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "~7.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

参考：ngx-page-scroll

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-20T17:57:41+09:00

1日のまとめ　8/20(火)

①MySQL

ググった単語
・データベース...端的に言うと、沢山の情報を纏めて管理できるソフトウェア。且つその情報を使用できる。用途は主に検索、抽出。

1..データベースの一覧記述
mysql>show databases; //Enter
2..データベースの作成記述
create database データベース名　//Enter
3..データベースの削除記述
mysql>drop database データベース名 //Enter
②HTML
ググった単語
・styleタグ..HTMLのhead要素の中にスタイルシートを直接記述するためのタグ。
・toransitionプロパディ...セレクタを変化させるまでの時間を設定するプロパディ。
<DOCTYPE html>
  <html>
    <head>
      <title>ナビゲーションバー勉強</title>
      <style>
        body{
          margin:0;
          padding:0;
          background:#ccc;
        }
        .nav ul{
          list-style:none;
          background:#663366;
          text-align:center;
          padding:10px;
          margin:0;
        }
        .nav li{
          display:inline-block;

        }
        .nav a {
          text-decoration:none;
          color:#fff;
          display:block;
          padding:15px;
          margin:15px;
          font-size:20px;
          font-family:Helvetica;
        }
        .nav a:hover {
          background: #000;
          transition:0.4s;
        }
        </style>
    </head>
    <body>
      <div class ="nav">
        <ul>
          <li><a href ="#">ホーム</a></li>
          <li><a href ="#">練習</a></li>
          <li><a href ="#">ブログ</a></li>
          <li><a href ="#">ニュース</a></li>
          <li><a href ="#">お問い合わせ</a></li>
        </ul>
      </div>
      </body>
      </html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-20T14:35:37+09:00

cssだけでトグルを実装する

背景

WordPressのサイトを作っていて、ふとトグル（クリックしたら展開するやつ）を実装したいなと思ったんですが、そのためだけにJSを用意しないといけないのがめんどくさいなぁと思ったので、CSSだけで実装する方法を探しました。

次同じようなことする時に忘れていそうなので備忘録的に描いておくことにします。

コード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #toggle1{
        display: none;
    }
    .toggle-inner{
        display: none;
    }
    #toggle1:checked ~ .toggle-inner{
        display: block;
    }
    </style>
</head>
<body>
    <input type="checkbox" id="toggle1">
    <div class="toggle-outer">
        <label for="toggle1">クリックして開く▼</label>
    </div>
    <div class="toggle-inner">
        <hr>
        <p>長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章</p>
    </div>
</body>
</html>
説明

checkbox(id:toggle1)、toggle-outer、toggle-innerという順番に要素を記述

toggle-outer:展開・折りたたみをしないエリア

toggle-inner:展開・折りたたみをするエリア

toggle-inner配下へ、展開後に表示するコンテンツを用意してdisplay:noneを当てておく

checkboxがチェックありの場合のみ、toggle-innerがdisplay:blockになるようにする

#toggle1:checked ~ .toggle-inner で「checkbox(チェック有り)の後ろにあるtoggle-inner」にだけスタイルを適用するという指定ができる（参考：E ~ F－CSS3リファレンス http://www.htmq.com/selector/precede.shtml）

スクショ

展開前

展開後

CodePen

See the Pen GRKjQwJ by Hiroaki Kato (@hirobel) on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-20T11:14:17+09:00

HTAで超簡単なデスクトップアプリを作ってみる

はじめに

Windows環境であれば、何もインストールしないでHTMLベースのデスクトップアプリが作れます。私、凄く気に入っていてかなり愛用し続けていますが、とってもマイナーな様子…

「HTMLは書いたことあるけど、アプリ作るのって…難しいんじゃね？」
という方に一回これを実行してみて欲しいです！

スクリプト
test.hta
<!doctype html>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<title>秘密のアプリ</title>
<ul>
    <li><a id="notepad" href="#">メモ帳を起動する</a>
    <li><a href="https://qiita.com/sozaiya/items/475211daf85bbb208635">IEでsozaiyaさんの記事を表示する</a>
    <li><a id="shutdown" href="#">今すぐシャットダウンする</a>
</ul>
<script>
    var data = {
        shell: new ActiveXObject('wscript.shell')
    };
    document.getElementById("notepad").addEventListener("click", function () {
        data.shell.exec("notepad");
    }, false);
    document.getElementById("shutdown").addEventListener("click", function () {
        if (window.confirm("本当にシャットダウンしますか？")) {
            data.shell.exec("cmd /c shutdown -s -t 0");
        }
    }, false);
</script>
上記ファイルを作成したらダブルクリックで実行します。

解説

メモ帳を開いたり、シャットダウンしてみたりと、あまり実用的ではないですが、応用すれば色んなことできるかも？と感じてもらえたら嬉しいです(^^)

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-20T03:08:41+09:00

PHP For Beginnersチュートリアル　その14　基本的な検索フォームの実装

このシリーズの目的

体系的なwebコーディングの訓練ができるようになるためにPHPの初学のきっかけかつ、PHPでログインフォームやフォームを実装することができるようになるために

PHP For Beginners

上記のチュートリアルを進めているのでその備忘録。

前回

内容

今回のチュートリアル

PHP Multi Language Website Tutorial: Create Dynamic Website In 20 Minutes

このチュートリアルでやること

Webサイトの言語切り替えを行えるようになる

成果物
index.php
<?php 

    require_once "config.php";

?>

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $lang['title'] ?></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>


</head>
<body>
    <nav class="nav navbar navbar-expand-sm bg-dark navbar-dark ">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#"><?php echo $lang['home'] ?></a></li>
            <li class="nav-item"><a class="nav-link" href="#"><?php echo $lang['pricing'] ?></a></li>
            <li class="nav-item"><a class="nav-link" href="#"><?php echo $lang['contact'] ?></a></li>
        </ul>
    </nav>
    <div class="container">
        <div class="row justify-content-center">
            <div class="main col-md-6">
                <h1><?php echo $lang['title'] ?></h1>
                <p><?php echo $lang['description'] ?></p>
            </div>
        </div>
    </div>

    <div class="footer bg-dark">
        <a class="footer-link" href="index.php?lang=en"><?php echo $lang['lang_en'] ?> </a>| <a class="footer-link" href="index.php?lang=ja"><?php echo $lang['lang_ja'] ?></a>
    </div>
</body>
</html>
config.php
<?php 

session_start();

if (!isset($_SESSION['lang'])) 
    $_SESSION['lang'] = "en";

    else if(isset($_GET['lang']) && $_SESSION['lang'] != $_GET['lang'] && !empty($_GET['lang'])) {
        if ($_GET['lang'] == "en") 
            $_SESSION['lang'] = "en";

        else if ($_GET['lang'] == "ja")
            $_SESSION['lang'] = "ja";
}

    require_once 'languages/'. $_SESSION['lang'] . ".php";

 ?>
ja.php
<?php 

     $lang = array(

        "title" => "ダイナミック・ウェブサイト",
        "home" => "トップ",
        "pricing" => "料金プラン",
        "contact" => "ご連絡先",
        "description" => "ようこそ、ダイナミック社のウェブサイトへ",
        "lang_en" => "英語",
        "lang_ja" => "日本語"
     );

 ?>
en.php
<?php 

     $lang = array(

        "title" => "Dynamic Website",
        "home" => "Home",
        "pricing" => "Pricing",
        "contact" => "Contact",
        "description" => "This is explanation about my amazing website!",
        "lang_en" => "English",
        "lang_ja" => "Japanese"
     );

 ?>
手順

1.サーバーにlanguageフォルダを作りそこに言語設定が記載されたPHPファイルを作る。
(ja.php、en.php）
コード見ればわかるように連想配列にキー値の形で記載していく。
今回はen.phpを基準として、それの互換としてja.phpを作るという流れで見てもらえればわかりやすい。

2.Session変数を用いて条件分岐させる。
今回はページが読み込まれた時にはWebサイトを英語表記し、あとはGETで切り替えられるようにする。

3.HTML要素の切り替えさせたい部分をPHPタグで用いて変数とキーをechoで出力する形に置き換える、詳しくは後述。

今回のコードの注釈

・言語ファイルの作り方
ja.php
<?php 

     $lang = array(

        "title" => "ダイナミック・ウェブサイト",
        "home" => "トップ",
        "pricing" => "料金プラン",
        "contact" => "ご連絡先",
        "description" => "ようこそ、ダイナミック社のウェブサイトへ",
        "lang_en" => "英語",
        "lang_ja" => "日本語"
     );
en.php
<?php 

     $lang = array(

        "title" => "Dynamic Website",
        "home" => "Home",
        "pricing" => "Pricing",
        "contact" => "Contact",
        "description" => "This is explanation about my amazing website!",
        "lang_en" => "English",
        "lang_ja" => "Japanese"
     );

 ?>

 ?>
言語切替させる箇所にそれぞれキーを設定して、そのキーを各言語共通にし、値をそれぞれの言語に合わせる形で書いていく。
そして、HTML要素の該当する部分をecho $lang['キー']の形でPHPタグを用いて置き換えていく。
こうすることで、キーさえ設定してまえばあとは実装したい言語に応じて基準となる言語と対照させてしまえば簡単に多言語に対応させることができるし、例えばページタイトルとメインタイトルには共通してtitleキーを設定することで一括して切り替えを行ったりすることもできる。
require_once
require_once 'languages/'. $_SESSION['lang'] . ".php";
require関数は指定されたパスのファイルを読み込む関数であるが、その派生のrequire_onceはファイルが既に読み込まれていた場合、そのファイルは読み込まないという処理が付随する。
今回はSessionにおいて最初に読み込まれるのはen.phpだということはコード見ればわかるが、ここで例えば英語orEngilishリンクをクリックしたとしても英語表示はそのままだがen.phpは読み込み直されることはない。
つまり、不必要な読み込みが行われないのでそれだけ処理は軽くなるということになる。
パスの指定方法は様々であるが同じ階層にあれば、そのままファイル名を、階層が違う場合は今回のようにパスを指定してファイル名を書く。
翻訳するとlanguageフォルダにある$_SESSION['lang']に代入された文字列.phpファイルを読み込むということになる。
ちなみに、PHPMaillerを使う際にも用いている関数なので、ここまでのチュートリアルを見直してみてほしい。

このチュートリアルを終えたら

Sessionについては過去のチュートリアルでも出てきたがここで一旦基本に立ち返って最低でも以下の2つの記事はしっかり理解しておきたい。

PHP $_SESSION(セッション変数)のすべて！【初心者向け基本】

【PHP超入門】Cookieとセッションについて

私もそうだがそろそろコードを見れば何が行われているかが、新しい関数などが出てこない時などを除けばおおよそ苦もなく理解できるようになった頃なので、そろそろアルゴリズムを考える上で、コードを書くだけではなく概念の勉強もしていかないといけないと感じる。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-20T02:04:23+09:00

PHP For Beginnersチュートリアル　その13　コンタクトフォームの練習

このシリーズの目的

体系的なwebコーディングの訓練ができるようになるためにPHPの初学のきっかけかつ、PHPでログインフォームやフォームを実装することができるようになるために

PHP For Beginners

上記のチュートリアルを進めているのでその備忘録。

前回

内容

今回のチュートリアル

PHP Tutorial: Create Contact Form & Send an Email With Attachment Using PHPMailer v6

このチュートリアルでやること

・その7 の復習

成果物

sendemail.php

<?php   

        $msg = "";
        use PHPMailer\PHPMailer\PHPMailer;
        use PHPMailer\PHPMailer\Except;
        use PHPMailer\PHPMailer\SMPT;


        if (isset($_POST['submit'])) {
                $subject = $_POST['subject'];
                $email = $_POST['email'];
                $message = $_POST['message'];

        if (isset($_FILES['attachment']['name']) && $_FILES['attachment']['name'] != "") {
            $file = "attachment/". basename($_FILES['attachment']['name']);
            move_uploaded_file($_FILES['attachment']['tmp_name'],$file);

        } else
            $file = "";

            mb_language("japanese");
            mb_internal_encoding("UTF-8");
            require 'vendor/autoload.php';
            require 'Mailtrap-config.php';


                $mail = new PHPMailer();

                // Server

                $mail->isSMTP();
                $mail->SMTPAuth = true;
                $mail->Host = MAIL_HOST;
                $mail->Username = MAIL_USERNAME;
                $mail->Password = MAIL_PASSWORD;
                $mail->SMTPSecure = MAIL_ENCRPT;
                $mail->Port = SMTP_PORT;

                // Recipients
                $mail->setFrom($email);
                // $toname = mb_encode_mimeheader("$name", 'ISO-2022-JP', 'B', "\n");
                $mail->addAddress(TO);
                // $mail->addAttachment($attachment);

                // Content
                $mail->Subject = mb_encode_mimeheader("$subject", "ISO-2022-JP", "UTF-8");
                $mail->Body = mb_convert_encoding("$message","ISO-2022-JP", "UTF-8");
                $mail->CharSet = 'ISO-2022-JP';
                $mail->Encoding = "7bit";
                $mail->addAttachment($file);

                // Select HTML or NOT

                $mail->isHTML(true);

               if ($mail->send()) {
                    $msg = "Your Email has been sent, thank you!";
                } else {
                    $msg = "Something wrong happend! Please try again!";

                    unlink($file);//サーバーに毎回添付したファイルが保存されないようにする。送信先には問題なく添付される。
                }



        }

 ?>


<!DOCTYPE html>
<html>
<head>
    <title>PHP Mail Contact Form </title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 mail">

                <?php if ($msg != "") {
                    echo "$msg <br> <br>";
                }
                ?>

                <form action="sendmail.php" method="post" enctype="multipart/form-data">
                    <input class="form-control" type="text" name="subject" placeholder="Subject......"><br> 
                    <input class="form-control" type="text" name="email" placeholder="Email......"><br> 
                    <textarea class="form-control" name="message"  placeholder="What`up?"></textarea><br>   
                    <input class="form-control" type="file" name="attachment"><br>  
                    <input class="btn btn-primary" type="submit" name="submit" value="Send Email">
                </form>
            </div>

        </div>

    </div>


</body>
</html>

変更点

unlink関数を使い、サーバーにユーザー側がアップロードした添付ファイルが残らないようにする。
メールには問題なくて添付されて送られるので問題ない。
また。Bootstrapを用いたフォームなのでテキスト要素にはform-controlクラスを付随。

今回のコードの注釈

unlink

unlink($file);

指定した引数を削除する。
この場合は$fileには添付ファイルのパスが代入されているので、それを削除するということはそのファイルを削除することになる。

　 Tweet
Qiitaで続きを読む

20190820のHTMLに関する記事は6件です。

Angularでの同一ページ内アンカー設定方法

Angularでの同一ページ内アンカー設定方法

package.json

1日のまとめ　8/20(火)

cssだけでトグルを実装する

背景

コード

説明

スクショ

展開前

展開後

CodePen

HTAで超簡単なデスクトップアプリを作ってみる

はじめに

スクリプト

解説

PHP For Beginnersチュートリアル　その14　基本的な検索フォームの実装

このシリーズの目的

内容

手順

今回のコードの注釈

このチュートリアルを終えたら

PHP For Beginnersチュートリアル　その13　コンタクトフォームの練習

このシリーズの目的

内容

変更点

今回のコードの注釈

日付別

タグ一覧

20190820のHTMLに関する記事は6件です。

Angularでの同一ページ内アンカー設定方法

Angularでの同一ページ内アンカー設定方法

package.json

1日のまとめ 8/20(火)

cssだけでトグルを実装する

背景

コード

説明

スクショ

展開前

展開後

CodePen

HTAで超簡単なデスクトップアプリを作ってみる

はじめに

スクリプト

解説

PHP For Beginnersチュートリアル その14 基本的な検索フォームの実装

このシリーズの目的

内容

手順

今回のコードの注釈

このチュートリアルを終えたら

PHP For Beginnersチュートリアル その13 コンタクトフォームの練習

このシリーズの目的

内容

変更点

今回のコードの注釈

日付別

タグ一覧

1日のまとめ　8/20(火)

PHP For Beginnersチュートリアル　その14　基本的な検索フォームの実装

PHP For Beginnersチュートリアル　その13　コンタクトフォームの練習