Commit 6d264672 authored by Guanwei Liu's avatar Guanwei Liu

updated interface

parent 87d97ea1
......@@ -21,6 +21,9 @@ class SearchController extends Controller
// dd($types);
$chars=HNG::where('entry','=',$kanji)->orWhere('variants','like','%'.$kanji.'%')->first();
$results=array();
if(is_Null($chars)){
return null;
}
$results['chars']=$chars;
// $results=HNG::where('entry','=',$kanji)->orWhere('variants','like','%'.$kanji.'%')->get()->toArray();
......@@ -43,8 +46,6 @@ class SearchController extends Controller
// $cardnum=(int)substr($num,0,-1);
$cardnum=(int)$num;
switch(substr($num,-1)){
case "a":
$charID=(int)substr($num,0,-1) * 10+1;
......
This diff is collapsed.
<template>
<v-app>
<v-navigation-drawer fixed app v-model="drawer">
<v-list dense>
<v-list-tile @click="$router.push('/')">
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>検索</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="$router.push('/about')">
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>アバウト</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app color="amber darken-4" dark>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>HNG 単字検索</v-toolbar-title>
<v-app style="background: #EDEBE0;">
<v-toolbar app color="primary" dark>
<v-toolbar-title><span @click.stop="goHome()">HNG&nbsp;単字検索</span></v-toolbar-title>
<v-spacer></v-spacer>
<v-flex xs1 class="hidden-sm-and-down">
<v-text-field solo light autofocus flat single-line background-color="white" v-model="termTop"
@keyup.enter="search"></v-text-field>
</v-flex>
<v-btn color="secondary" @click="search" class="hidden-sm-and-down">検索</v-btn>
<v-dialog v-model="dialog" width="500">
<v-btn icon slot="activator">
<v-icon>search</v-icon>
</v-btn>
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>単字検索</v-card-title>
<v-card-text>
<v-text-field v-model="termTop" @keyup.enter="search()"></v-text-field>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="search()">検索</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-btn color="secondary" flat @click="goHome">
<v-icon>announcement</v-icon>
使い方
</v-btn>
</v-toolbar>
<v-content>
......@@ -59,27 +25,43 @@
</v-app>
</template>
<style scoped>
.toolbar {
width: 2%
}
</style>
<script>
import FooterSection from "./components/Footer";
export default {
components: {
FooterSection
},
mounted:function(){
if(this.$route.params.hanzi){
this.termTop=this.$route.params.hanzi
}
},
data: () => ({
drawer: false,
dialog:false,
termTop: ""
}),
methods: {
search: function(){
this.dialog=false;
this.$router.push('/search/'+this.termTop);
import FooterSection from "./components/Footer";
export default {
components: {
FooterSection
},
mounted: function () {
if (this.$route.params.hanzi) {
this.termTop = this.$route.params.hanzi
}
},
watch: {
$route(to, from) {
this.termTop = this.$route.params.hanzi;
}
},
data: () => ({
termTop: ""
}),
methods: {
search: function () {
if (this.term != "") {
this.$router.push('/search/' + this.termTop);
}
},
goHome: function () {
this.termTop = ""
this.$router.push('/');
}
}
}
};
</script>
};
</script>
\ No newline at end of file
......@@ -14,7 +14,14 @@ import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import router from './router'
Vue.use(Vuetify)
Vue.use(Vuetify,{
theme:{
primary:'#AF3648',
secondary:'#C98184',
success:'#00C9C9',
accent:'#FFE4E5'
}
})
/**
* Next, we will create a fresh Vue application instance and attach it to
......
<template>
<v-footer app color="amber darken-4" dark>
<v-card class="flex" flat tile dark>
<v-card-actions class="red justify-center">
<v-icon>copyright</v-icon>
<a href="http://www.hng-data.org"><strong>漢字字体規範史データセット保存会</strong></a>
</v-card-actions>
</v-card>
</v-footer>
</template>
<v-footer app dark>
<v-card class="flex" flat tile dark color="secondary">
<v-card-actions class="justify-center body-1">
&copy;2019&nbsp;
<strong>
<a href="http://www.hng-data.org" dark>漢字字体規範史データセット保存会</a>
</strong>
</v-card-actions>
</v-card>
</v-footer>
</template>
\ No newline at end of file
<template>
<v-layout row wrap>
<v-flex xs12>
<v-sheet>
<p class="display-1 text-md-center">漢字字体規範史データセットの概要</p>
<v-sheet pa-5>
<p>
このサイトは、「漢字字体規範史データベース」(2018年7月現在、長期メンテナンス中のため停止中)の前身である「石塚漢字字体資料」の情報カードの画像、漢字字形の切り抜き画像、及びメタデータを「漢字字体規範史データセット」と称して公開するリポジトリです。
</p>
<p>
「石塚漢字字体資料」は、各時代・各地域(国)には漢字字体の標準が存在し、その標準が変遷することを実証するため、北海道大学名誉教授石塚晴通氏が在職中の国語学演習等で作成したものです。「石塚漢字字体資料」は、情報カードで整理され、2005年9月の時点で、漢籍・仏典・国書等の典籍67資料、総用例数約40万字に達した資料群です。
</p>
<p>
「石塚漢字字体資料」は、情報カードの劣化による保存と、学界へのデータ提供のため、2000年頃から北海道大学文学部言語情報学講座有志によって、電子化が着手されました。漢字字形の切り抜き画像と、字種、用例数などのメタデータは、「漢字字体規範史データベース」として、2005年から公開サービスを開始しました。「漢字字体規範史データベース」は、各資料から字形1例(複数字体の場合はそれぞれ字形1例ずつ)を公開するため、全用例を確認したいという要望も多く寄せられました。そこで、「漢字字体規範史データセット」では、「漢字字体規範史データベース」で公開していた漢字字形の切り抜き画像とメタデータに加え、情報カードの画像も公開します。
</p>
<p>
データベースは、公開を続けることがとても難しいものです。安定的なデータ公開のためには、データセット自体を公開することが有効だと考えられます。そこで、「石塚漢字字体資料」も、データセットとして公開・保存することを選びました。
</p>
<p class="text-md-right">
2018年7月21日
</p>
<p class="text-md-right">
漢字字体規範史データセット保存会
</p>
</v-sheet>
</v-sheet>
<v-layout row>
<v-flex xs12 md6 offset-md3 lg4 offset-lg4>
<p class="display-1 text-md-center">HNG 単字検索の使い方</p>
<p>このサイトは、「漢字字体規範史データセット」の単字検索サービスを提供します。「漢字字体規範史データセット」については、<a href="http://www.hng-data.org" target="_blank">こちら</a>をご覧ください。</p>
<p>検索窓に漢字1文字を入力して、検索ボタンを押してください。検索結果の一覧画面が表示されます。</p>
<p>検索結果は、中国写本、中国版本、日本写本、日本版本、韓国資料、その他資料の6種に分けて、文字画像を表示します。</p>
<p>文字画像の上には資料名の略称を記述しています。資料名の略称は、<a href="http://www.hng-data.org/sources.ja.html" target="_blank">こちら</a>をご覧ください。</p>
<p>文字画像をクリックすると、文字の詳細情報が表示されます。</p>
<p>また、文字画像の下には用例数を記述しています。用例数をクリックすると、文字のカード画像が表示されます。</p>
</v-flex>
</v-layout>
</template>
</template>
\ No newline at end of file
......@@ -9,24 +9,16 @@
<v-card-text :class="{'overflow-hidden':ifShowScrollBar, 'py-0':ifShowScrollBar}">
<h2>{{type.name}}</h2>
<v-layout
row
:class="{'wrap':!ifShowScrollBar,'horiz-scroll':ifShowScrollBar}"
>
<v-flex
v-for="(chars,book) in resultsData[type.id]"
:key="book"
v-bind="{ [`xs-${chars.length}`]: true }"
shrink
ma-1
>
<v-layout row :class="{'wrap':!ifShowScrollBar,'horiz-scroll':ifShowScrollBar}">
<v-flex v-for="(chars,book) in resultsData[type.id]" :key="book"
v-bind="{ [`xs-${chars.length}`]: true }" shrink ma-1>
<v-card color="amber lighten-3" flat>
<!-- 書籍名 ToDo: 高さの調整 -->
<v-card-title>
<v-tooltip bottom>
<span slot="activator">{{bookList[book].short_name}}</span>
<span>{{bookList[book].name}}』({{bookList[book].date}}){{bookList[book].normal_type}} {{bookList[book].koushi}}</span>
<span>{{bookList[book].name}}』({{bookList[book].date}}){{bookList[book].normal_type}}
{{bookList[book].koushi}}</span>
</v-tooltip>
</v-card-title>
......@@ -34,13 +26,15 @@
<v-flex v-for="char in chars" :key="char.id" text-xs-center xs-1 ma-1>
<v-card flat hover max-height="120px" min-height="120px">
<div class="text-xs-center">
<a :href="'http://www.chise.org/est/view/character/repi.hng-'+char.chisechar" target="_blank" rel="noopener noreferrer">
<a :href="'http://www.chise.org/est/view/character/repi.hng-'+char.chisechar"
target="_blank" rel="noopener noreferrer">
<v-img width="80px" min-height="80px" :src="'/image/'+book+'/'+char.glyph_num"></v-img>
</a>
</div>
<!-- 用例数 ToDo: 高さの調整 -->
<v-card-text>
<p class="caption"><a :href="'http://www.chise.org/est/view/hng-card/rep.id='+char.hngcard" target="_blank" rel="noopener noreferrer">{{char.occerrences}}</a></p>
<p class="caption"><a :href="'http://www.chise.org/est/view/hng-card/rep.id='+char.hngcard"
target="_blank" rel="noopener noreferrer">{{char.occerrences}}</a></p>
</v-card-text>
</v-card>
......@@ -55,135 +49,149 @@
</v-layout>
</v-flex>
<v-flex xs12>
<v-flex xs12 md6 offset-md3 lg4 offset-lg4>
<div v-if="!resultsData">
<p class="display-1 text-md-center">使い方</p>
<p>このサイトは、「漢字字体規範史データセット」の単字検索サービスを提供します。「漢字字体規範史データセット」については、<a href="http://www.hng-data.org"
target="_blank">こちら</a>をご覧ください。</p>
<p>検索窓に漢字1文字を入力して、検索ボタンを押してください。検索結果の一覧画面が表示されます。</p>
<p>検索結果は、中国写本、中国版本、日本写本、日本版本、韓国資料、その他資料の6種に分けて、文字画像を表示します。</p>
<p>文字画像の上には資料名の略称を記述しています。資料名の略称は、<a href="http://www.hng-data.org/sources.ja.html"
target="_blank">こちら</a>をご覧ください。</p>
<p>文字画像をクリックすると、文字の詳細情報が表示されます。</p>
<p>また、文字画像の下には用例数を記述しています。用例数をクリックすると、文字のカード画像が表示されます。</p>
</div>
<v-layout row>
<v-flex xs8>
<v-text-field
ref="searchField"
label="検索対象"
v-model="term"
outline
clearable
@keyup.enter="goSearch"
></v-text-field>
<v-text-field ref="searchField" label="検索対象" v-model="term" block @keyup.enter="goSearch"></v-text-field>
</v-flex>
<v-flex xs4>
<v-btn block color="info" dark large @click="goSearch">検索</v-btn>
<v-btn block color="primary" dark @click="goSearch">検索</v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</template>
<script>
import CharField from "../components/CharField.vue";
export default {
components: {
CharField
},
computed: {
ifShowScrollBar() {
switch (this.$vuetify.breakpoint.name) {
case "xs":
return true;
case "sm":
return false;
case "md":
return false;
case "lg":
return false;
case "xl":
return false;
}
}
},
data: () => ({
bookList: [],
term: "",
resultsData: null,
typeList: [
{
id: "CM",
name: "中国写本"
},
{
id: "CP",
name: "中国版本"
},
{
id: "JM",
name: "日本写本"
},
{
id: "JP",
name: "日本版本"
},
{
id: "K",
name: "韓国資料"
},
{
id: "X",
name: "その他資料"
import CharField from "../components/CharField.vue";
export default {
components: {
CharField
},
computed: {
ifShowScrollBar() {
switch (this.$vuetify.breakpoint.name) {
case "xs":
return true;
case "sm":
return false;
case "md":
return false;
case "lg":
return false;
case "xl":
return false;
}
}
]
}),
watch: {
$route(to, from) {
this.term = this.$route.params.hanzi;
this.search();
}
},
mounted: function() {
// for /search/:hanzi
if (this.$route.params.hanzi) {
this.term = this.$route.params.hanzi;
this.search();
}
//get all books
axios
.get("/api/v1/booklist")
.then(response => {
for (let book of response.data) {
this.bookList[book.id] = book;
},
data: () => ({
bookList: [],
term: "",
resultsData: null,
typeList: [{
id: "CM",
name: "中国写本"
},
{
id: "CP",
name: "中国版本"
},
{
id: "JM",
name: "日本写本"
},
{
id: "JP",
name: "日本版本"
},
{
id: "K",
name: "韓国資料"
},
{
id: "X",
name: "その他資料"
}
})
.catch(error => {
console.log(error);
});
},
methods: {
goSearch: function(){
this.$router.push('/search/'+this.term);
]
}),
watch: {
$route(to, from) {
this.term = this.$route.params.hanzi;
console.log(this.$route.params.hanzi)
this.search();
},
},
search: function() {
if (this.term == "") {
this.resultsData = null;
return;
mounted: function () {
// for /search/:hanzi
if (this.$route.params.hanzi) {
this.term = this.$route.params.hanzi;
this.search();
}
//get all books
axios
.get("/api/v1/search/character/" + this.term + "/all")
.get("/api/v1/booklist")
.then(response => {
if (response.data) {
this.resultsData = response.data;
for (let book of response.data) {
this.bookList[book.id] = book;
}
})
.catch(error => {
console.log(error);
});
},
methods: {
goSearch: function () {
this.$router.push('/search/' + this.term);
},
search: function () {
if (this.term == "" || this.term==undefined) {
this.resultsData = null;
return;
} else {
axios
.get("/api/v1/search/character/" + this.term + "/all")
.then(response => {
console.dir(response)
if (response.data) {
this.resultsData = response.data;
}
})
.catch(error => {
console.log(error);
});
}
}
}
}
};
};
</script>
<style scoped>
.overflow-hidden {
overflow: hidden;
}
.horiz-scroll {
overflow-y: hidden;
overflow-x: auto;
}
.overflow-hidden {
overflow: hidden;
}
.horiz-scroll {
overflow-y: hidden;
overflow-x: auto;
}
</style>
\ No newline at end of file
......@@ -11,7 +11,7 @@
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>HNG単字検索</title>
<title>HNG&nbsp;単字検索</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- <link rel="stylesheet" href="{{ mix('/css/app.css')}}"> --}}
</head>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment