2019年1月15日火曜日

GitHub からコミットした履歴を消し去る方法

自分用のメモです。

最後のコミットを削除
git reset --hard HEAD~

結果をプッシュする
git push origin +master

on 0 件のコメント: この投稿へのリンク
ラベル: ,

2018年12月15日土曜日

GitBucket セットアップメモ

GitBucket のダウンロード
https://github.com/kohsuke/winsw/releases

winsw を遣って GitBucket をサービスとして登録する
https://github.com/kohsuke/winsw/releases

サービスの削除
sc delete gitbucket
on 0 件のコメント: この投稿へのリンク

2018年11月11日日曜日

Angular ngModel 使い方

Angular の ngModel の使い方をメモしておきます。黄色でハイライトされている部分を追加すると ngModel を利用できるようになります。

１．app.module.ts

ngModel は angular/forms の FormsModule に含まれているので、FormsModule をインポートします。また、NgModel デコレータの imports で FormsModule をインポートします。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';//追加

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

２．app.component.html

HTML テンプレートで ngModel に変数 name をバインドします。
<input type="text" [(ngModel)]="name">
{{name}}

３．app.component.ts

変数 name の初期値を設定します。
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  name = 'sasaki';//追加
}

on 0 件のコメント: この投稿へのリンク
ラベル: ,

2018年10月7日日曜日

ASP.NET Core Web API - html ファイルの利用

ASP.NET Core Web API で html ファイルを利用(表示)する方法です。

Startup.cs ファイルの Configure メソッドに、app.UseStaticFiles() を呼び出します。すると、wwwroot フォルダ配下の html ファイルを表示できるようになります。

public class Startup
{
    ...

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseMvc();
        app.UseStaticFiles(); //追加
    }
}
on 0 件のコメント: この投稿へのリンク
ラベル: , , ,

ASP.NET Core Web API - GET と POST

ASP.NET Core Web API で GET メソッドと POST メソッドの実装方法を調べてみました。


ValuesController.cs (一部抜粋)
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
    // GET api/values
    [HttpGet]
    public ActionResult<IEnumerable<string>> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // POST api/values
    [HttpPost]
    public void Post([FromBody] string id)
    {
    }
}

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="click" onclick="get()" />
    <input type="button" value="post" onclick="post()" />
    <script>
        function get(){
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState === 4) {
                    if (httpRequest.status === 200) {
                        console.log("GET: 通信成功");
                    } else {
                        console.log("GET: 通信失敗");
                    }
                }
            };
            httpRequest.onload = function () {
                console.log("GET: 通信完了");
            };
            httpRequest.open("GET", "api/values", true);
            httpRequest.send(null);
        }

        function post() {
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState === 4) {
                    if (httpRequest.status === 200) {
                        console.log("POST: 通信成功");
                    } else {
                        console.log("POST: 通信失敗");
                    }
                }
            };
            httpRequest.onload = function () {
                console.log("POST: 通信完了");
            };
            
            httpRequest.open("POST", "api/values", true);
            httpRequest.setRequestHeader('Content-Type', 'application/json');
            httpRequest.send(JSON.stringify("id=abc"));
        }
    </script>
</body>
</html>

POST を行うときには、setRequestHeader で Content-Type に application/json を指定する必要があります。ここが分からなくてしばらく調べました。
on 0 件のコメント: この投稿へのリンク
ラベル: , , , , , ,

2018年9月22日土曜日

Flexbox を利用して要素を中央と右端に表示

Flexbox を利用して、要素を中央と右端に表示してみます。
parent クラスで display: flex としているので、justify-content に center とすることで、子要素（メインアイテム）を中央表示にしています。

item クラスで position: absolute としているので、子要素（メニュー）は 常に右端にくっついています。また、parent クラスで position: relative としているので、子要素（メニュー）は親要素の中で絶対位置の計算が行われます。

イメージ



CSS

<style>
    .parent {
        position: relative;
        display: flex;
        justify-content: center;

        border: black solid 1px;
        padding: 20;
    }

    .item {
        display: flex;

        margin: 3px;
        padding: 15px;
        border: black solid 1px;
    }

    .menu {
        position: absolute;
        right: 0;

        margin: 3px;
        padding: 15px;
        border: black solid 1px;
    }
</style>

HTML

<div class="parent">
    <div class="item">メインアイテム</div>
    <div class="item">メインアイテム</div>
    <div class="menu">メニュー</div>
</div>

on 0 件のコメント: この投稿へのリンク
ラベル: , ,

2018年9月17日月曜日

JavaScript ネイティブの Promise を利用する方法

JavaScript ネイティブの Promise を利用する方法を調べてみました。備忘録のためメモしておきます。

処理が成功したら resolve メソッドを呼びます。処理が失敗したら、reject メソッドを呼びます。reject メソッドを呼ぶと、catch 句に入ります。

function myTest() {
  const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
          console.log('スタート');
          //処理が成功したら、resolve を呼ぶ。
          resolve('1つ目の処理');
      }, 1000);

  });
  promise.then((message) => {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              console.log(message);
              resolve('2つ目の処理');
              //エラーの場合、resolve ではなく reject を呼ぶ。
              // reject('xxx');

          }, 300);

      })
  }).then((message) => {
      return new Promise((resolve, reject) => {
          console.log(message);
          console.log('3つ目の処理');
      })
  }).catch((error) => { // エラーの場合
      console.error('エラー', error);
  });
}
on 0 件のコメント: この投稿へのリンク
ラベル:

2018年9月16日日曜日

Flexbox を利用してレスポンシブなレイアウトを実現する

タイトルのままです。Flexbox を利用して 2 カラムのレスポンシブレイアウトを実現する例です。コピペしてそのまま使えますので、よかったら使ってみてください。

CSS
.header{
    background: lightpink;
    height: 40px;
    width: 100%;
}
.parent{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90vh;
}
.main{
    background: lightblue;
    height: 50%;
 }
.sidebar{
    background: lightseagreen;
    height: 50%;
}
@media screen and (min-width : 768px) { /* デスクトップ用 CSS */
    .parent{
        flex-direction: row;
    }
    .main{
        flex: 1;
        height: 100%;
    }
    .sidebar{
        width: 250px;
        height: 100%;
    }
}

HTML
<div class="header">header</div>
<div class="parent">
    <div class="main">item 1</div>
    <div class="sidebar">item 2</div>
</div>


on 0 件のコメント: この投稿へのリンク
ラベル: ,

2018年9月15日土曜日

Flexbox を使って要素を並べる

Flexbox を利用して、要素を横並び、縦並びにする方法です。

横並び

リストの親要素(div class="list") の display に flex を指定します。そして、リストの子要素に flex を指定します。ここでは flex: 1 1 としています。
.list {
    display: flex;
}
.list-item {
    flex: 1 1;
    border: solid cadetblue 1px;
}

<div class="list">
    <div class="list-item">item 1</div>
    <div class="list-item">item 2</div>
    <div class="list-item">item 3</div>
</div>

縦並び

縦並びは、リストの親要素(div class="list") の display-direction に column を指定します。
.list {
    display: flex;
    flex-direction: column;
}
.list-item {
    flex: 1 1;
    border: solid cadetblue 1px;
}

<div class="list">
    <div class="list-item">item 1</div>
    <div class="list-item">item 2</div>
    <div class="list-item">item 3</div>
</div>
on 0 件のコメント: この投稿へのリンク
ラベル: ,

2018年9月7日金曜日

要素を画面の下部に表示する方法

HTML と CSS で、要素を画面の下部に表示する方法です。
CSS で position を fixed、bottom に 0px とします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .bottom {
        position: fixed;
        bottom: 0px;
        background: red;
        height: 40px;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="bottom">テキスト</div>
</body>
</html>
on 0 件のコメント: この投稿へのリンク
ラベル: ,

2018年8月27日月曜日

入門：セマンティックマークアップで役に立ったリンク集

HTML5の文書構造「セマンティックマークアップ」まとめ
https://bsj-k.com/html5-semantic-markup/

→ 端的な説明で、セマンティックタグの説明をしてくれています。概要理解にとてもいいと思いました。


実践！すぐに導入できるセマンティックなマークアップ、4つのパターン
https://thinkit.co.jp/story/2012/04/25/3536

→ article は「自己完結型のコンテンツを配置する」という説明を見かけますが、いまいちピンと来ていませんでした。こちらの記事では、RSS フィードの例でわかりやすく説明してくれています。


HTML5.1を使ってSEOに強いセマンティックコーディングをする方法
https://fastcoding.jp/blog/all/html5toseo/

→ 「3. HTML5タグの正しいセクショニングを設定する」では、図解で分かりやすくタグの構成を解説してくれています。
on 0 件のコメント: この投稿へのリンク
ラベル: ,

2018年7月28日土曜日

Angular - ngIf ディレクティブ

Angular の ngIf ディレクティブの利用例です。

HTML テンプレート
<p>
  <input type="button" value="toggle flag" (click)="toggleFlag()">
</p>

<div #ifBlock *ngIf="flag; else elseBlock">
  This is ifBlock
</div>

<ng-template #elseBlock>
  Here is elseBlock.
</ng-template>

TypeScript
export class IfComponent implements OnInit {

  flag: boolean;


  constructor() { }

  ngOnInit() {
    this.flag = true;
  }


  toggleFlag(){
    this.flag = !this.flag;
  }
}
TypeScript の flag 変数の値に応じて表示します。flag 変数の値が true のときは #ifBlock のある div タグが、false のときは #elseBlock のある ng-template の中が表示されます。
on 0 件のコメント: この投稿へのリンク
ラベル: , ,

2018年6月6日水曜日

Angular 関連メモ

Angular CLI を利用した、プロジェクトへの各種機能の追加

コンポーネントの生成
D:\dev\angular\app1\src\app>ng g c comp1
→　コンポーネントは、app.component.html にタグとして定義して、画面に埋め込む。
app フォルダ配下でコマンドを実施する点は注意。

サービスの生成
ng g s service1
on 0 件のコメント: この投稿へのリンク
ラベル:
登録: 投稿 (Atom)